Web 上での完全なチェックアウト
完全なチェックアウトのために、サポートされている DEUNA Web 統合を選択し、廃止された initCheckout 表面から移行してください。
現在のDEUNA Web SDKは、以下の機能を公開していません。 initCheckout独自のチェックアウトページを構築し、支払い処理を組み込むか、モバイルアプリケーション内でチェックアウトを行う場合に、DEUNAのネイティブSDKを使用してください。 initPaymentWidget 互換性のあるページ
以下のいずれかを選択してください。#
フロー図
| 必要なもの | サポートされているインターフェース |
|---|---|
| 既存のWebチェックアウトに支払い方法を追加する | ウェブ用のDEUNA決済ウィジェット |
| カードを保存するか、Click to Payを開始する | 要素とカードの保存 |
| 3DSまたはAPMアクションを続行する | 次のアクション |
| ネイティブモバイルチェックアウトを構築する | iOS, Android、または React Native |
| 既存の商社向けウェブチェックアウトを統合 | モバイル WebView で利用可能な Web SDK、ドキュメントされた制限事項を含む |
推奨されるウェブアーキテクチャ#
01 · merchant UI
チェックアウトデータを収集
独自のカート、連絡先、配送、および同意フィールドをアプリケーションに実装。
02 · merchant backend
注文を作成
合計を検証し、サポートされている注文情報を送信。
03 · DEUNA widget
決済処理
返された注文トークンを使用して Payment Widget を開く。
04 · merchant backend
検証と実行
最終的な DEUNA の注文状態と Webhook を使用。
JavaScript
const {orderToken, merchantOrderId} = await createOrderFromServer(checkoutState);
await DeunaSDK.initPaymentWidget({
orderToken,
mode: 'target',
target: '#payment-step',
callbacks: {
onSuccess: () => renderVerifiedResult(merchantOrderId),
onError: showPaymentRecovery,
onClosed: () => returnToPaymentMethods(),
onResize: ({height}) => resizePaymentStep(height),
},
});移行元 initCheckout#
- カート、配送、請求、顧客、および同意の状態を商社アプリケーションに保持。
- クライアントサイドで行われた注文作成を、商社バックエンドに移動。
- 置き換え
initCheckout(...)～initPaymentWidget({orderToken, ...}). - 古いチェックアウト完了処理を、新しいプロセスにマッピングし、バックエンドで注文を取得。
onSuccess、その後、バックエンドで注文を取得。 - 古いライフサイクルアナリティクスを現在のものにマッピング SDK イベント.
- モバイル画面の幅、住所の編集、ブラウザのナビゲーション、3DS、APM リダイレクト、およびリフレッシュ後の復旧をテスト。
状態の所有権#
| 州 | 所有者 |
|---|---|
| カートの内容、価格、在庫、配送、税金 | 商社側のバックエンド |
| チェックアウトフォームとステップナビゲーション | 商社アプリケーション |
| 利用可能な決済方法と認証情報の入力 | DEUNA Payment Widget と設定された接続 |
| 決済処理と正規化された注文状態 | DEUNA API |
| 注文実行 | 決済処理後のバックエンド |
レスポンシブレイアウト#
小画面では、決済対象を1列に配置する。レイアウトのブレイクポイント以下の、注文概要と決済コンテンツを横並びにするのを避け、決済対象を維持する。 width: 100%に対応する。 onResize。 固定ヘッダーとフッターが、発行者からのチャレンジやウィジェットの操作を覆わないようにする。