バウチャーウィジェット
ウェブ、iOS、Android、およびReact NativeでDEUNAのクーポンと現金支払い手順を表示し、その後非同期で確認。
クーポンウィジェットは、サポートされているクーポンまたは現金支払い方法に対して生成された指示または参照を表示します。既存の注文トークを使用し、新しい注文を作成または支払いません。
クーポンライフサイクル#
order_token to the platform SDK.ウィジェットを開く#
await DeunaSDK.initVoucherWidget({
orderToken,
language: 'en',
callbacks: {
onSuccess: (data) => showVoucherInstructions(data),
onError: (error) => showRecovery(error),
onClosed: () => showPaymentMethods(),
onPaymentProcessing: () => disableDuplicateActions(),
},
});await deunaSDK.initVoucherWidget({
orderToken,
mode: 'modal',
language: 'en',
callbacks: {
onSuccess: showVoucherInstructions,
onError: showRecovery,
onClosed: showPaymentMethods,
onDownloadFile: ({type, data}) => saveVoucher({type, data}),
},
});let callbacks = VoucherCallbacks()
callbacks.onSuccess = { data in showVoucherInstructions(data) }
callbacks.onError = { error in showRecovery(error) }
callbacks.onClosed = { _ in showPaymentMethods() }
deunaSDK.initVoucher(
orderToken: orderToken,
callbacks: callbacks,
language: "en"
)val callbacks = VoucherCallbacks().apply {
onSuccess = { data -> showVoucherInstructions(data) }
onError = { error -> showRecovery(error) }
onClosed = { showPaymentMethods() }
}
deunaSDK.initVoucherWidget(
context = this,
orderToken = orderToken,
callbacks = callbacks,
language = "en"
)パラメータ#
| パラメータ | プラットフォーム | 必須 | 目的 |
|---|---|---|---|
orderToken | すべて | はい | 既存のクーポンの利用可能な注文に対応するためのトークン。 |
callbacks | すべて | はい | 成功、エラー、クローズ、イベント、およびサポートされている決済処理ハンドラ。 |
language | すべて | なし | サポートされているウィジェットの言語。Web タイプは現在、 en, es、または pt. |
mode | React Native | はい | modal またはサポートされている埋め込みレンダラーモードを受け入れます。 |
fraudCredentials | ネイティブ + React Native | なし | プロバイダーの認証情報は、設定された不正行為フローがそれらを必要とする場合にのみ使用します。 |
customUserAgent | iOS + Android | なし | 承認された統合に必要な、アプリ固有のWebViewユーザーエージェント。 |
domain | すべて | なし | 制御されたテスト用の環境のオーバーライド。通常のプロ덕ション統合では省略します。 |
完了と支払い状態#
onSuccess は、Voucherエクスペリエンスがサポートされているクライアントアクションを完了したことを意味します。Voucherの決済は通常、アプリ外で行われます。インターフェースで「処理中」の状態を維持し、バックエンドが検証されたWebhookまたはAPIリトリーブを通じて最終状態を認識するまで待機します。
| 状況 | 顧客メッセージ | 加盟店の対応 |
|---|---|---|
| 表示される指示 | 「これらの指示を使用して支払い完了」 | 商人の注文IDを保持し、状態の変更を待機します。 |
| ウィジェットが閉じられました | 「後でこの注文に戻ることができます」 | 自動でキャンセルまたは再作成しないでください。まず、照合してください。 |
| ネットワークエラー | 「Voucherを読み込めませんでした」 | 同じ注文トークンを使用した再試行を提供します。 |
| Voucherが支払われた | 「支払いを確認しました」 | バックエンドでの検証後にのみ実行します。 |
| Voucherが期限切れまたは拒否されました | サポートされている次の手順を説明します。 | API応答からターミナルまたは再試行可能な状態に移動します。 |
領収書とファイル配信#
参照決済の応答には、以下が含まれることがあります。 reference_processors 配列。利用可能な各プロセッサのエントリには、バーコード、有効期限、プロセッサ名、およびホストされたHTMLまたはPDFレシートのURLを提供できます。このフィールドが配列であるため、処理された支払いによって複数の参照プロセッサが返される場合、ホストされたVoucher機能は複数のレシートを表示できます。
プロセッサは、どのレシートフィールドが存在するかを決定します。バーコードからPDF URLを生成したり、すべての参照方法がHTMLとPDFの両方の形式を持っていると仮定したりしないでください。
| プラットフォーム | 所有権のダウンロード | 統合時の動作 |
|---|---|---|
| Web | ホストされたウィジェットとブラウザ | ウィジェットは、利用可能なレシートアクションを表示します。現在のWebコールバック契約には、専用のファイルコールバック機能はありません。 |
| React Native | 商社アプリケーション | onDownloadFile 受信 {type, data}. type 経由で提供されます。 url プロセッサがレシートURLを供給した場合、または base64 SDKが現在のバウチャーの表示をキャプチャした場合。 |
| Android | ネイティブSDK | SDKは、供給されたレシートURLをダウンロードするか、ウィジェットが保存アクションを送信した場合に代替として現在の表示を保存します。サポートされているAndroidバージョンで、保存および共有の動作をテストしてください。 |
| iOS | ネイティブSDK | SDKは、供給されたレシートURLをダウンロードするか、現在の表示をキャプチャします。サポートされているiOSバージョンで、結果の保存/共有体験をテストしてください。 |
React Nativeの場合、ペイロードが常にファイルボディであると仮定するのではなく、ディスクリミネータで分岐してください。
import {DownloadType} from '@deuna/react-native-sdk';
const onDownloadFile = async ({type, data}) => {
if (type === DownloadType.URL) {
await openTrustedReceiptUrl(data);
return;
}
await saveBase64VoucherImage(data);
};URLを開いたり、取得したりする前に、必ず検証してください。HTTPSを使用し、ダウンロードしたファイルを適切な保護された場所に保存するか、ユーザーが選択した場所に保存し、レシートの内容をログに記録しないでください。保存されたレシートは、顧客向けの証拠であり、支払い確定の公式な確認ではありません。
モバイルとアクセシビリティ#
- Voucherを、バックグラウンドコールではなく、表示される画面から提示します。
- ダウンロード、コピー、およびクローズのアクションを200%のテキストサイズで利用可能にしてください。
- React Native で、保存の実装に必要なストレージまたは共有機能のみをリクエストしてください。
- モーダルを開いたコントロールにフォーカスを戻し、プラットフォームのアクセシビリティ API を通じてロードエラーを通知します。
- 長い商社名、長いローカライズされた指示、および狭いデバイスで参照をテストしてください。
トラブルシューティング#
ウィジェットは無効な注文トークンを報告
文字列が空でないこと、選択された環境に属していること、および表示する注文と同じものであることを確認してください。 秘密の API キーや生の注文ボディをクライアントと交換しないでください。
割引に関する指示が表示されない
割引フロー用に注文と支払い方法が設定されていることを確認してください。 このウィジェットを開くだけで、通常のカード注文は割引注文にはなりません。
成功コールバックが発火したが、注文はまだ保留中
これは現金と割引方法の場合に該当します。 コールバックは UI 操作を完了し、決済ではありません。 検証されたバックエンドの状態を継続的に監視してください。