ウェブ用のDEUNA決済ウィジェット
DEUNA Payment Widget をウェブで、レスポンシブなプレゼンテーション、制御された送信、コールバック、支払いフィルタリング、および復旧機能とともに統合します。
決済ウィジェットは、既存の注文に対して利用可能な決済方法を表示し、選択された方法をDEUNAを通じて処理します。カードおよび設定された代替決済方法をサポートし、商人のJavaScriptに機密情報を公開することなく処理します。
開始する前に#
完了 Web SDK を使用して開始する、バックエンドで注文を作成し、注文IDのみをブラウザに返します。 order_token 注文ID
Payment Widget の起動#
await DeunaSDK.initPaymentWidget({
orderToken,
language: 'en',
callbacks: {
onSuccess: async () => {
await DeunaSDK.close();
await verifyOrderOnBackend();
},
onError: ({type, metadata}) => {
showRecovery({type, code: metadata.code});
},
onClosed: (action, metadata) => {
restorePaymentMethods(action, metadata);
},
onCardBinDetected: ({cardBin, cardBrand}) => {
updateCardOffers(cardBin, cardBrand);
},
onInstallmentSelected: ({cardBin, installmentPlanOptionId}) => {
rememberPlan(cardBin, installmentPlanOptionId);
},
onPaymentProcessing: () => disableDuplicateActions(),
onEventDispatch: (event, payload) => trackSafeEvent(event, payload),
},
});統合手順#
パラメータ#
| パラメータ | 必須 | 目的 |
|---|---|---|
orderToken | はい | バックエンドで注文を作成した際に返されるトークン。 |
callbacks | 推奨 | 成功、エラー、クローズ、リサイズ、決済、BIN、分割払い、およびイベントハンドラ。 |
language | なし | en, es、または pt; それ以外の場合は、商人のデフォルト設定が適用されます。 |
userToken | なし | 利用可能な保存された決済方法に対する認証されたDEUNAユーザーコンテキスト。 |
paymentMethods | なし | 設定された方法を制限または直接開きます。ルーティングで使用されるプロセッサをハードコードしない限り、必要な場合にのみ使用してください。 |
mode + target | なし | デフォルトのモーダルではなく、対応する要素内にレンダリングします。ターゲットモードでは、両方が必要です。 |
hidePayButton | なし | ページが送信を処理する場合、ウィジェットのアクションを非表示にします。 |
styleFile | なし | DEUNAが管理するテーマ/スタイル識別子または承認されたスタイルリソース。 |
widgetExperience | なし | サポートされているテーマとユーザーエクスペリエンスのオーバーライド。 |
behavior | なし | サポートされているフローの動作（分割カードや親ウィンドウへのリダイレクトなど） |
fraudCredentials | なし | 承認された不正検知プロバイダーの設定のみ。 |
sessionId, idempotencyKey | なし | サポートされているフローにおける関連性と重複試行の制御。 |
domain | なし | 制御された環境のオーバーライド; 通常のプロ덕ション環境では使用しない |
モーダルまたは埋め込み#
モーダルがデフォルトです。 埋め込みモードの場合：
<div id="deuna-payment" aria-label="支払い詳細"></div>await DeunaSDK.initPaymentWidget({
orderToken,
mode: 'target',
target: '#deuna-payment',
callbacks: {
onResize: ({height}) => {
document.querySelector('#deuna-payment').style.height = `${Math.ceil(height)}px`;
},
onSuccess: verifyOrderOnBackend,
onError: showRecovery,
},
});セレクターは、安定した要素と一致する必要があります。要素の中にレンダリングしないでください。 display: none 初期化時またはクリップのオーバーフローが発生した場合。
支払い方法のフィルタリング#
省略 paymentMethods 注文と商取引設定に基づいて、承認条件を決定できるようにします。フォームを直接開くための方法を1つ提供するか、選択肢を制限するための複数の方法を提供します。
await DeunaSDK.initPaymentWidget({
orderToken,
paymentMethods: [
{paymentMethod: 'credit_card'},
{paymentMethod: 'wallet', processors: ['click_to_pay']},
],
callbacks,
});ルーティングは、設定されたカードプロセッサの中から選択できるため、クレジットカード入力は通常、次の必要ありません。 processors list.
送信ボタンを所有#
await DeunaSDK.initPaymentWidget({
orderToken,
hidePayButton: true,
callbacks,
});
payButton.addEventListener('click', async () => {
if (!(await DeunaSDK.isValid())) return;
payButton.disabled = true;
const result = await DeunaSDK.submit();
if (result.status === 'error') showRecovery(result);
payButton.disabled = false;
});アクティブなインスタンスも公開しています getWidgetState(), getSelectedPaymentMethod(), refetchOrder(), setOrderData(...), setCustomStyles(...), および close()アクティブなエクスペリエンスにのみ関連するメソッドを使用し、更新をシリアル化して、古い注文トークンが新しいチェックアウトを上書きしないようにします。
カードと分割払い#
設定された2つのカードフローの場合、ドキュメントに記載されているネストされた動作を使用します。
behavior: {
paymentMethods: {
creditCard: {
splitPayments: {maxCards: 2},
},
},
}参照 カード分割払い 調整とテスト用に。 onInstallmentSelected 正確な installmentPlanOptionId; 視覚的な情報から推測しないでください。
エラーとクローズ処理#
プロバイダの生のメッセージを表示しないでください。既知のタイプとコードを、ローカライズされた顧客ガイダンスにマッピングし、安全な診断を記録し、汎用的な再試行メッセージにフォールバックします。