PaymentSheet

PaymentSheet は支払い情報の入力と Intent の確定を一度の表示で行います。カードを保留状態にして後から確定する必要がある場合は PaymentFlowを使用してください。

すぐに課金するには PaymentIntent、支払い方法を後で使うため保存するには SetupIntent を使用します。これらはサーバーで作成します。サーバー連携を参照してください。

プラットフォーム対応

Web はネイティブ PaymentSheet を表示しません。Web の createPaymentSheet は paymentIntentClientSecret と任意の withZipCode を使用し、現在 SetupIntent には対応していません。defaultBillingDetails、shippingDetails、enableApplePay、enableGooglePay、style、returnURL などのネイティブ専用オプションは無視されます。

1. createPaymentSheet

バックエンドからクライアントへ安全に渡せるシークレットを取得し、createPaymentSheet を呼びます。プラグインは Stripe のシークレット API を呼びません。HttpClient、fetch などを利用してください。

iOS と Android では paymentIntentClientSecret と setupIntentClientSecret のどちらか一方を、Web では paymentIntentClientSecret を渡します。customerId と customerEphemeralKeySecret は任意ですが、customerId を設定する場合は両方が必要です。Customer を持たない PaymentIntent も有効です。

const { paymentIntent, ephemeralKey, customer } = await firstValueFrom(
  this.http.post(environment.api + 'intent', {}),
);
await Stripe.createPaymentSheet({
  paymentIntentClientSecret: paymentIntent,
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  merchantDisplayName: 'rdlabo',
});

2. presentPaymentSheet

createPaymentSheet が成功した後だけ呼び出します。

const result = await Stripe.presentPaymentSheet();
if (result.paymentResult === PaymentSheetEventsEnum.Completed) {
  // UIだけを更新します。注文確定前にWebhookでIntentを確認してください。
}

Canceled は利用者がシートを閉じた状態、Failed はエラーです。どちらの結果だけでも注文を確定できません。

3. addListener

結果リスナーはシートを表示する前に、アプリケーション起動時に一度だけ登録します。Android Activity の再生成後は Promise よりイベントを優先してください。イベントリスナーを参照してください。

await Promise.all([
  Stripe.addListener(PaymentSheetEventsEnum.Completed, () => console.log('Completed')),
  Stripe.addListener(PaymentSheetEventsEnum.Canceled, () => console.log('Canceled')),
  Stripe.addListener(PaymentSheetEventsEnum.Failed, (error) => console.log(error)),
]);

参考資料

• 支払いを受け付ける（iOS）
• 支払いを受け付ける（Android）