Web SDK を使用して開始する

DEUNA Web SDK は、ブラウザで支払い体験をモダールまたはレスポンシブなターゲット要素に表示するブラウザスクリプトです。バックエンドは注文を作成し、プライベートな資格情報を保護します。ブラウザは公開されたAPIキーと、短期間有効な注文トークンを受け取ります。

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

1. ピン留バージョンをロードするこれについて Athia に質問#

<script
  crossorigin
  src="https://cdn.deuna.io/web-sdk/v1.7/index.js">
</script>

このスクリプトは以下の機能を提供する。 window.DeunaSDK. 本番環境でバージョンをピン留し、テスト環境でアップグレードを事前にテストする。信頼できない入力から、実行時にCDN URLを静かに書き換えない。

単一ページアプリケーションの場合、ドキュメントレベルでスクリプトを一度だけ読み込みます。動的に読み込む場合は、共有された Promise を解決して、複数のルートが重複したタグを追加しないようにします。

function loadDeunaSdk() {
  if (window.DeunaSDK) return Promise.resolve(window.DeunaSDK);
  if (window.__deunaSdkPromise) return window.__deunaSdkPromise;

  window.__deunaSdkPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://cdn.deuna.io/web-sdk/v1.7/index.js';
    script.crossOrigin = 'anonymous';
    script.onload = () => resolve(window.DeunaSDK);
    script.onerror = () => reject(new Error('DEUNA Web SDK failed to load'));
    document.head.append(script);
  });

  return window.__deunaSdkPromise;
}

2. 環境の初期化これについて Athia に質問#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
});

使用する sandbox 統合テストおよび production リアルタイム交通状況の確認に。デフォルトでは、SDKを使用します。ただし、設定を変更することで env 明確に、異なる環境間のトークンと認証情報の誤用を防ぎます。

3. ロード戦略の選択これについて Athia に質問#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
  preloadWidgets: [
    {
      widget: 'payment',
      params: {
        language: 'en',
        callbacks,
      },
    },
  ],
});

// Once your backend returns the token, reveal the prepared widget.
await DeunaSDK.initPaymentWidget({orderToken});

顧客が最も可能性の高い機能のみを事前読み込みします。現在の実装では、 payment, elements, voucher, および nextAction 事前読み込みをサポートしています。

4. 経験の起動これについて Athia に質問#

コンテンツセキュリティポリシーこれについて Athia に質問#

既存のポリシーから開始し、選択した環境と機能で使用される DEUNA のオリジンのみを許可します。 開発 SDK は、 https://cdn.deuna.io; ウィジェットフレームは、プロダクションの Checkout または Elements ホストを使用し、API およびストレージ接続は DEUNA のプロダクションエンドポイントを使用します。 サンドボックスは対応する *.sandbox.deuna.io hosts.

Content-Security-Policy:
  script-src 'self' https://cdn.deuna.io;
  frame-src https://checkout-ux.deuna.com https://elements.deuna.com https://cdn.getduna.com;
  connect-src 'self' https://api.deuna.io https://apigw.getduna.com https://elements.deuna.com;

ウォレット、不正行為プロバイダー、APM、フォント、画像、およびカスタムスタイルファイルは、追加のプロバイダー固有のオリジンを必要とする場合があります。 設定された統合で使用されているオリジンのみを追加し、ブラウザコンソールでサンドボックスを検証し、ポリシーをソース管理で管理します。 広範なワイルドカードを使用して違反を回避しないでください。

レスポンシブホストとアクセシビリティこれについて Athia に質問#

モーダルモードは、600px 幅の画面でのビューポートを使用します。埋め込みモードの場合は、流動的なホストを提供し、その高さを以下から更新します。 onResize.

#deuna-payment {
  width: 100%;
  min-width: 0;
  min-height: 32rem;
}

@media (max-width: 600px) {
  #deuna-payment { min-height: 100dvh; }
}

ズーム機能を有効にし、フォーカスをウィジェットの外に移動しないようにし、ウィジェットを閉じるとフォーカスを復元し、キーボードによるナビゲーションと 200% のテキストズームをテストします。

サンドボックス受け入れチェックリストこれについて Athia に質問#

• スクリプトは一度ロードされ、失敗すると復元可能な UI が生成されます。
• サンドボックスキーと注文トークンは、生産環境には到達しません（またはその逆）。
• モーダルおよびターゲットモードは、320px の幅とキーボードのみで動作します。
• 成功、拒否、クローズ、タイムアウト、リフレッシュ、およびネットワーク中断が処理されます。
• 3DS および APM のポップアップまたはリダイレクトは、CSP または iframe サンドボクシングによってブロックされません。
• ログには、トークン、顧客の詳細、および支払いデータは含まれません。
• バックエンド（コールバックではなく）が、履行を許可するかどうかを決定します。

次のステップこれについて Athia に質問#