ウェブチェックアウトで決済を受け付け
バックエンドで注文を作成し、CDNから配信されるWeb SDKを使用してDEUNA Payment Widgetを開きます。
概要#
この統合には4つの部分があります。サーバーが注文と秘密鍵を所有し、ブラウザは注文トークンと公開鍵のみを受け取ります。
server
注文を作成
バックエンドで注文を作成し、トークン化します。
browser
Payment Widget の起動
顧客が支払い方法を選択し、決済を行います。
deuna
ルーティングと処理
DEUNAは、ルーティング、プロバイダ、およびフォールバックルールを適用します。
server
確認
検証済みのWebhookが最終状態を確認します。
開始する前に#
- サンドボックス用のプライベートおよびパブリックキー – 詳細は参照してください。 APIキー.
- 次の Web SDK DEUNA CDNからロードされます。
- バックエンドエンドポイントが、
PAYMENT-LINK注文を作成し、注文トークンを返します。 - DEUNA のウェブフック用の公開 HTTPS エンドポイント。
1. 注文の作成とトークンの生成#
プライベート API キーを使用して、バックエンドで注文を作成します。 注文トークンのみをブラウザに返します。
server.jsJavaScript
app.post('/api/deuna/checkout-session', async (request, response) => {
const cart = await carts.get(request.session.cartId);
const order = await createDeunaOrder({
orderType: 'PAYMENT-LINK',
currency: cart.currency,
items: cart.items,
totalAmount: cart.totalAmount,
});
response.json({orderToken: order.token});
});2. Web SDKのロードと初期化#
HTML
<script crossorigin src="https://cdn.deuna.io/web-sdk/v1.7/index.js"></script>
<script type="module">
await DeunaSDK.initialize({
publicApiKey: 'YOUR_PUBLIC_API_KEY',
env: 'sandbox',
});
</script>3. Payment Widgetを開く#
checkout.jsJavaScript
const {orderToken} = await fetch('/api/deuna/checkout-session', {
method: 'POST',
}).then((response) => response.json());
await DeunaSDK.initPaymentWidget({
orderToken,
callbacks: {
onSuccess: async (order) => {
await DeunaSDK.close();
showConfirmation(order);
},
onError: (error) => showRetry(error),
onClosed: () => showCart(),
},
});現在のWeb SDKは、以下の機能を公開していません。 initCheckoutPayment Widgetは、既存のウェブチェックアウト内で決済を受け付けるための、サポートされているSDKフローです。
4. Webhook による確認#
ブラウザコールバックを使用してインターフェースを更新しますが、対応するwebhookを受信し、検証した後にのみ注文を完了させてください。詳細は、 Webhook の署名を確認する.