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

Web用の要素とカードバウルの実装

DEUNA Elementsを、カードバウルス、Click to Pay、Apple Pay、Google Payを、レスポンシブなWeb体験に統合する。

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

initElements は、Payment Widgetを必要とせずに、集中型の認証体験を提供する。カードのバウルス、Click to Payの実行、または設定されたネイティブウォレットの起動に使用できる。

Elementsの種類を選択#

Type目的IDまたは注文コンテキスト
vaultトークン化または保存されたカードを選択する。これはデフォルトの動作。 types is omitted.userToken * 認証されたユーザーの場合、または userInfo; an orderToken * 金額と分割払いオプションを追加できます。
click_to_payClick to Pay の利用を開始する。顧客の身元と商人の設定が必要です。
APPLE_PAYApple Pay の利用可能状態が確認された後に開始する。注文コンテキストと設定されたウォレットの認証情報。
GOOGLE_PAYGoogle Pay の利用可能状態が確認された後に開始する。注文コンテキストと設定されたウォレットの認証情報。

カードを Vault に登録する#

JavaScript
await DeunaSDK.initElements({
  orderToken,
  userInfo: {
    firstName: 'Ada',
    lastName: 'Lovelace',
    email: 'ada@example.com',
  },
  types: [{name: 'vault'}],
  callbacks: {
    onSuccess: (credential) => useCredentialResult(credential),
    onError: ({type, metadata}) => showRecovery(type, metadata.code),
    onClosed: () => restorePaymentMethods(),
    onCardBinDetected: ({cardBin, cardBrand}) => updateCardOffers(cardBin, cardBrand),
    onInstallmentSelected: ({installmentPlanOptionId}) => rememberPlan(installmentPlanOptionId),
  },
});

体験フロー#

フロー図
1Initialize Web SDK2-- APPLE_PAY /GOOGLE_PAY3Enter or selectcredential4Complete Click toPay5Open native walletsheet6onSuccess credentialresult7Continue merchantbackend flow
結果またはアウトカム商社または顧客

要素の事前読み込み#

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

// Add the order or user context and reveal the prepared experience.
await DeunaSDK.initElements({orderToken, userToken});

SDKによって初期化パラメータと後続の呼び出しが統合されます。安定した設定を事前読み込みエントリに、最新のトークンを… initElements.

パラメータ#

パラメータ必須目的
typesなし選択体験; デフォルトはVault。
orderTokenフロー依存金額、分割、支払い、またはウォレットの開始に関する注文コンテキスト。
userTokenフロー依存認証されたDEUNAユーザーコンテキスト。
userInfoフロー依存部分的な顧客ID: firstName, lastName, および email.
callbacks推奨成功、エラー、クローズ、イベント、リサイズ、BIN、および分割支払い処理。
mode + targetなしデフォルトのモーダルではなく、埋め込みターゲットの表示。
walletConfig高度承認されたApple PayまたはGoogle Payの設定。
behaviorなしサポートされているトークン化、購入、カード分割、および表示動作。
language, styleFile, widgetExperienceなしローカライゼーションとサポートされている外観のカスタマイズ。
domainなしホストの制御されたオーバーライド; 標準的な本番環境での統合では省略。

トークン化または決済#

クレジットカード要素の動作をサポート tokenize または purchase:

JavaScript
behavior: {
  paymentMethods: {
    creditCard: {
      flow: 'tokenize',
    },
  },
}

使用する tokenize 商取引フローが再利用可能な認証情報のみを必要とする場合に利用します。 purchase 必要な注文と商取引設定と組み合わせてのみ使用してください。バックエンドが認証情報の利用方法を決定します。

ネイティブウォレット#

ボタンの表示前に、利用可能かどうかを確認し、顧客の操作から直接対応する処理を開始します。

JavaScript
const wallets = await DeunaSDK.getWalletsAvailable({orderToken, userInfo});
applePayButton.hidden = !wallets.includes('APPLE_PAY');

applePayButton.addEventListener('click', () => {
  DeunaSDK.initElements({
    orderToken,
    userInfo,
    types: [{name: 'APPLE_PAY'}],
    callbacks,
  });
});

参照 ウォレットの可用性 プラットフォーム、キャッシュ、およびトラブルシューティングに関する情報。

組み込みおよび制御モード#

使用する mode: 'target', target, および onResize 埋め込み型体験向け。ページが主要なアクションを制御する場合、設定を hidePayButton: true, 呼び出し isValid(), 次に待機 submit()送信処理中に、外側のボタンを無効化する。

JavaScript
await DeunaSDK.initElements({
  orderToken,
  types: [{name: 'vault'}],
  mode: 'target',
  target: '#credential-entry',
  hidePayButton: true,
  callbacks: {
    onResize: ({height}) => {
      document.querySelector('#credential-entry').style.height = `${height}px`;
    },
    onSuccess: useCredentialResult,
    onError: showRecovery,
  },
});

既存のセキュアフィールドの移行#

以前のドキュメントには modularPaymentCredentialsStorage, mountPaymentCredentialStorage、および別の sdk.deuna.io 安全なフィールドバンドル。これらの名前は、監査済みの現在の Web SDK の公開型または実装には存在しません。既存の初期化またはフィールドのマウントのコードを新しい統合にコピーしないでください。

現在利用可能な認証情報は、Elements を通じて提供されます。 DeunaSDK.initElements:

フロー図
1Legacy per-fieldintegration2Inventory identity,order, styling, andsubmit ownership3Initialize currentWeb SDK4Open types: [{name:'vault'}]5Handle dedicatedcallbacks6Continue through themerchant backend
商社または顧客
既存システムの管理標準的な運用方法
負荷 sdk.deuna.io/.../main.min.js現在値を読み込む cdn.deuna.io/web-sdk/.../index.js まとめて購入する 開始
初期化 Deuna または deunaSDK.init インスタンスコール DeunaSDK.initialize 公開APIキーと明示的な環境で一度
独立したPAN、有効期限、またはCVVフィールドをマウントホストされた環境で initElements({types: [{name: 'vault'}]}) モーダルまたは埋め込みモードで
商社向け、送信ボタン使用する hidePayButton, isValid(), および submit() サポートされている制御モードで
レガシーな認証イベントを解析する使用する onSuccess, onError, onClosed、および専用のBIN/分割払いコールバック
既存のチェックアウトセッションを再利用する選択されたフローに必要な orderToken, userToken、または userInfo 現在の情報を渡す

Hosted Elements は、機密性の高い入力 UI を所有します。現在の公開 SDK は、各カードフィールドを独立した商社 DOM ノードにマウントするための、1 対 1 の API を公開していません。承認された PCI 範囲または製品設計が、独立したフィールドの所有を必要とする場合、移行を停止し、実装前に DEUNA でサポートされているアーキテクチャを確認してください。

移行時には、古い環境と新しい環境を、それぞれ独立した制御されたテストグループで実行してください。かつて使用していたセキュアフレームから Elements への値のコピーや、両方を同じ顧客アクションに対して初期化することは避けてください。

セキュリティと運用#

  • Elementsによって表示されたカード情報を読み取らない、複製しない、またはログに記録しない。
  • 結果は、必要なバックエンドの商社オペレーションにのみ送信する。
  • 顧客がログアウトしたときに、商社のセッションとSDKの状態を同時に無効化する。
  • 中断された購入フローの後で注文を再調整する。
  • 「 onSuccess 顧客の同意と商社の契約範囲外での資格情報の利用権限として、クライアントの結果としてのみ表示する。
ウォレットの可用性有効なウォレットボタンのみを表示する。資格情報の保管資格に関する概念とバックエンドの責任。SDKからのレスポンスコールバックとエラーの形状。