モバイル WebView で利用可能な Web SDK

カスタムWebViewを使用するのは、既存の商人のウェブチェックアウトをホストする必要がある場合にのみ。新しいモバイル統合の場合は、メンテナンスされている iOS, Android、または React Native SDKを使用してください。これらのSDKは、DEUNA WebViewブリッジと外部アクションライフサイクルをすでに実装しています。

アーキテクチャこれについて Athia に質問#

WebView ラッパー パターンを参照してください。これについて Athia に質問#

このチュートリアルでは、iOS WebView 内にロードされた販売者の Web チェックアウトを示します。 DEUNA Web SDK が支払いエクスペリエンスをレンダリングしている間、ネイティブ ラッパーはチェックアウト ページとメッセージを交換します。

ビデオではプレゼンテーションのパターンを示しています。 UI の詳細は変更される可能性があります。以下のアーキテクチャ、セキュリティ境界、およびプラットフォーム要件を実装契約として使用します。

必要なWebView機能これについて Athia に質問#

最小限のブリッジを定義これについて Athia に質問#

type NativeMessage = {
  version: 1;
  type: 'success' | 'error' | 'closed' | 'event';
  widget: 'payment' | 'elements' | 'voucher' | 'nextAction';
  data?: unknown;
};

function postToNative(message: NativeMessage) {
  const body = JSON.stringify(message);
  window.webkit?.messageHandlers.deunaPayment?.postMessage(body); // iOS
  window.deunaPayment?.postMessage(body);                         // Android
  window.ReactNativeWebView?.postMessage(body);                   // React Native
}

ネイティブ境界で、厳密なスキーマを使用してJSONを解析し、未知のメッセージバージョンとタイプを拒否し、メッセージサイズを制限し、予期しない上位レベルのページからのメッセージを無視します。JavaScriptへの汎用的なネイティブメソッドディスパッチャを公開しないでください。

SDKの結果の転送これについて Athia に質問#

await DeunaSDK.initPaymentWidget({
  orderToken,
  callbacks: {
    onSuccess: (data) => postToNative({version: 1, type: 'success', widget: 'payment', data}),
    onError: (data) => postToNative({version: 1, type: 'error', widget: 'payment', data}),
    onClosed: (action) => postToNative({version: 1, type: 'closed', widget: 'payment', data: {action}}),
    onEventDispatch: (event) => postToNative({
      version: 1,
      type: 'event',
      widget: 'payment',
      data: {event},
    }),
  },
});

ネイティブアプリケーションに必要なフィールドのみを転送してください。注文トークン、ウォレットトークン、カードデータ、完全な顧客オブジェクト、または任意の生のイベントペイロードの転送は行わないでください。

外部ウィンドウおよびリダイレクトこれについて Athia に質問#

Web SDKは、サポートされている外部ポップアップに対してライフサイクルイベントを送信します。WebViewは、 window.open または新しいウィンドウのリクエストをインターセプトし、ターゲットを正しく表示し、すぐに閉じられたと誤って報告しないようにする必要があります。

• 以下のURLのみを許可してください。 https ホストが承認された認証または決済先と一致するURLのみ。
• サードパーティのコンテンツには、独立したブラウザ環境を使用することを推奨します。また、商社側の機能を発行元またはプロバイダーのページに埋め込まないでください。
• 外部のブラウザ環境を、チェックアウト WebView から独立して追跡してください。
• 決済完了時またはリターン時、チェックアウトを再開し、注文の状態を取得します。
• グローバルにタイムアウトエラーを抑制しないでください。タイムアウトは、実際の未完了のアクションを示す可能性があります。状況を把握し、適切な復旧手順を表示してください。

SDKのリポジトリには、iOSおよび Examples/checkout-web-wrapper 向けの、維持されている参照用ラッパーが含まれています。 examples/checkout-web-wrapper Android 用。

プラットフォームの確認リストこれについて Athia に質問#

レスポンシブでアクセシブルなプレゼンテーションこれについて Athia に質問#

• 安全領域のインセットとオンスクリーンキーボードを尊重します。
• 利用可能な全幅と動的なビューポートの高さを利用し、固定されたデスクトップサイズのWebViewを使用しないでください。
• ネイティブのクローズコントロールを、決済コンテンツの外に配置し、アクセシビリティ技術でアクセスできるようにします。
• ナビゲーションとエラーを通知し、外部ウィンドウが閉じられた後にフォーカスを復元します。
• 回転、分割画面、大きなテキスト、スクリーンリーダー、遅いネットワーク、およびアプリのバックグラウンドモードをテストします。

テストマトリックスこれについて Athia に質問#

• カードの成功、拒否、および顧客による決済の終了。
• スムーズで、複雑な3DS。
• APMリダイレクトの成功、キャンセル、およびプロバイダのタイムアウト。
• 顧客によって外部ウィンドウが閉じられます。
• アプリがバックグラウンドで実行され、その後再開されます。
• 送信前のおよび送信後のネットワークの喪失。
• 信頼できないナビゲーションと不正なブリッジメッセージは拒否されます。
• クライアントの曖昧な結果後もバックエンドの状態が正しい。

関連する参照これについて Athia に質問#