メインコンテンツへスキップ
すべてのシステムが正常に動作しています変更履歴v1
ログイン
SDKs

Web SDK

DEUNA Web SDKを読み込み、Payment Widget、要素、ネイティブウォレット、クーポン、および次のアクションを統合する。

最終更新日 October 5, 2026
このページで

DEUNA Web SDKを使用して、Payment Widget、Payment Vault、Click to Pay、ネイティブウォレット、クーポン、および次のアクションをモーダルウィンドウまたはページ内に表示します。 ブラウザ SDKは、DEUNA CDNを通じて従来のスクリプトとして配布されます。

SDK のロード#

統合で使用しているSDKのバージョンを固定してください。 本番環境で変更する前に、サンドボックスで新しいリリースをテストしてください。

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

このスクリプトはシングルトンを公開します。 window.DeunaSDK. また、以下の機能をサポートしています DeunaSDK.newInstance() 個別のSDKインスタンスが必要な場合に

初期化#

環境を選択後、公開APIキーを一度設定します。環境は明示的に設定してください。SDKはデフォルトでプロダクション環境を設定します。 env is omitted.

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

Payment Widget の起動#

バックエンドで注文を作成し、トークンをブラウザに返します。 Payment Widget を開きます。

JavaScript
await DeunaSDK.initPaymentWidget({
  orderToken,
  language: 'en',
  callbacks: {
    onSuccess: async (order) => {
      await DeunaSDK.close();
      showConfirmation(order);
    },
    onError: (error) => showRetry(error),
    onClosed: (action, metadata) => {
      console.log('Widget closed', action, metadata);
    },
    onEventDispatch: (event, payload) => {
      analytics.track(event, payload);
    },
  },
});

コールバックを使用してインターフェースを更新します。 信頼できるWebhookからの最終的な注文の確認と処理を行い、ブラウザの状態のみに依存しないようにします。

表示モードを選択#

デフォルトはモーダルです。 SDKがオーバーレイを所有し、 close() それを制御します。

埋め込みウィジェットの場合、 mode: 'target' とCSSセレクターの両方を使用します。 コンテンツが切り捨てられないように、コンテナの高さを onResize に設定します。

HTML
<div id="payment-widget"></div>
JavaScript
await DeunaSDK.initPaymentWidget({
  orderToken,
  mode: 'target',
  target: '#payment-widget',
  callbacks: {
    onResize: ({height}) => {
      document.querySelector('#payment-widget').style.height = `${height}px`;
    },
    onSuccess: (order) => showConfirmation(order),
    onError: (error) => showRetry(error),
  },
});

ページから送信を制御#

ページが最終的なアクションを実行する場合、ウィジェットの決済ボタンを非表示にします。送信前に検証を行い、プロミスが処理中であることを確認してボタンを無効化してください。

JavaScript
await DeunaSDK.initPaymentWidget({
  orderToken,
  hidePayButton: true,
  callbacks,
});

payButton.addEventListener('click', async () => {
  if (!(await DeunaSDK.isValid())) return;

  payButton.disabled = true;
  const result = await DeunaSDK.submit();
  payButton.disabled = false;

  if (result.status === 'error') showRetry(result);
});

アクティブなウィジェットは、以下の機能を提供します。 getWidgetState(), refetchOrder(), および setCustomStyles(...)呼び出し setCustomStyles は、決済フローに記載されているカードBINまたは分割払いコールバックのみから実行してください。

利用可能な機能#

Payment Vault と Click to Pay

initElements デフォルトで Payment Vault を開きます。 types 異なる Elements の体験を選択するために、この設定を変更します。

JavaScript
await DeunaSDK.initElements({
  orderToken,
  userInfo: {
    firstName: 'Ada',
    lastName: 'Lovelace',
    email: 'ada@example.com',
  },
  types: [{name: 'vault'}],
  callbacks: {
    onSuccess: (credential) => useSavedCredential(credential),
    onError: (error) => showRetry(error),
    onClosed: (action) => console.log(action),
  },
});

使用する {name: 'click_to_pay'} Click to Pay 用。すでに認証された DEUNA ユーザーがある場合は、以下の情報を渡します。 userToken 代わりに userInfo.

Apple Pay および Google Pay

商社が所有するウォレットボタンを表示する前に、利用可能かどうかを確認します。 Apple Pay がユーザーの操作から直接開かれるように、この手順を最初に実行します。

JavaScript
const userInfo = {email: 'ada@example.com'};
const availableWallets = await DeunaSDK.getWalletsAvailable({
  orderToken,
  userInfo,
});

applePayButton.hidden = !availableWallets.includes('APPLE_PAY');

applePayButton.addEventListener('click', () => {
  DeunaSDK.initElements({
    orderToken,
    userInfo,
    types: [{name: 'APPLE_PAY'}],
    callbacks: {
      onSuccess: (credential) => useSavedCredential(credential),
      onError: (error) => showRetry(error),
      onClosed: () => showPaymentMethods(),
    },
  });
});

使用する GOOGLE_PAY Google Pay の対応フローについては、 Apple Pay ガイドを参照してください。 および Google Pay ガイド 加盟店およびブラウザの要件について。

保留中の操作を続行

「Open Next Action」は、注文応答が顧客の操作が必要であることを示している場合にのみ実行します。例えば、サポートされている3DSチャレンジまたはリダイレクトの場合。

JavaScript
await DeunaSDK.initNextAction({
  orderToken,
  callbacks: {
    onSuccess: (order) => showConfirmation(order),
    onError: (error) => showRetry(error),
    onClosed: () => showPaymentMethods(),
  },
});

このステップで2回目の注文を作成しないでください。次のアクションが必要な注文のトークンを再利用してください。

クーポンを開く

サポートされている現金またはバウチャーベースの支払い方法の場合、「voucher」体験を使用します。

JavaScript
await DeunaSDK.initVoucherWidget({
  orderToken,
  callbacks: {
    onSuccess: (order) => showVoucherInstructions(order),
    onError: (error) => showRetry(error),
    onClosed: () => showPaymentMethods(),
  },
});

ウィジェットを事前ロード#

決済ウィジェットおよび要素は、初期化時にオフラインで作成し、後で表示できます。 事前読み込みにより、認識される起動時間が短縮されますが、ネットワークおよびブラウザのリソースを早期に消費します。

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

// After the backend returns the order token:
await DeunaSDK.initPaymentWidget({orderToken});

顧客が使用する可能性のある体験のみを事前読み込みします。 後続の initPaymentWidget または initElements 呼び出しで注文またはユーザートークンを提供し、準備されたウィジェットを表示します。

不正利用デバイスデータ#

決済ウィジェットは、ウィジェットが開かれたときにDEUNAデバイスのデータ収集を開始します。 ウィジェットが開かれる前に、識別子が必要な場合は、次の generateFraudId(...) を呼び出し、ドキュメントで指定された注文またはリスクフローを通じて返された値を送信してください。

JavaScript
const fraudId = await DeunaSDK.generateFraudId();

プロバイダー固有の入力およびバージョンに関する動作は、以下のドキュメントで説明されています。 デバイスフィンガープリントを統合.

コールバックとライフサイクル参照を参照してください。#

コールバックまたはメソッドこれを使用してください
onSuccess(data)体験が成功した場合にインターフェースを更新します。
onError(error)再試行可能な、またはターミナルとの統合エラーを提示します。 error.type および error.metadata.
onClosed(action, metadata)SDK を使用した顧客アカウントの停止と、それ以外の停止を区別する。
onEventDispatch(event, payload)サポートされているライフサイクルイベントを分析に転送する。
onResize(dimensions)埋め込みホストコンテナのサイズ変更
onCardBinDetected(data)カードのBIN（銀行識別番号）およびブランドの検出への対応
onInstallmentSelected(data)分割払いオプションの選択への対応
onPaymentProcessing()承認処理中に、重複した決済アクションを無効化する。
close()アクティブなウィジェットを閉じる。
決済ウィジェット支払い方法を選択し、支払い体験をカスタマイズします。支払いVault支払い情報のトークン化と管理3DS保留中のアクションとチャレンジ完了を理解する。Apple Pay の統合について説明しますApple Payを設定および開始する。Google PayGoogle Payを設定および開始する。統合に関する情報源互換性のあるコーディングエージェント向けのWeb統合パターン。