カードの基本的な組み込みを移行する

PaymentIntent を作成するサーバー上のエンドポイントに 2 つの変更を加えます。

1. error_on_requires_action パラメーターを削除して、認証を必要とする支払いが再び失敗しないようにします。代わりに、PaymentIntent のステータスが requires_action に変化します。
2. confirmation_method パラメーターを追加して、認証リクエストを処理した後に、支払いを再度 (手動で) 明示的に確定することを示します。

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  -d payment_method_types[]=card \
  -d confirm=true \
  -d error_on_requires_action=true \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d confirmation_method=manual

次に、「レスポンス生成」関数を更新して、エラーを返すのではなく、requires_action 状態を処理します。

# If the request succeeds, check the
# PaymentIntent's `status` and handle
# its `next_action`.

次に、クライアント側のコードを更新し、Stripe に対して、顧客の認証が必要な場合にモーダルを表示するように指示します。

PaymentIntent のステータスが requires_action になったら、stripe.handleCardAction を使用します。成功すると、PaymentIntent のステータスが requires_confirmation になります。次にサーバーで PaymentIntent を再度確認して支払いを完了する必要があります。

const handleServerResponse = async (responseJson) => {
  if (responseJson.error) {
    // Show error from server on payment form
  } else if (responseJson.requiresAction) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(responseJson.clientSecret);

    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

前回使用したものと同じエンドポイントを使用し、PaymentIntent を再度確定して支払いを完了し、注文を処理します。1 時間以内に再度確定しないと、支払いの試行は失敗し、取引は requires_payment_method に戻ります。

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

Use our test cards in a sandbox to verify that your integration was properly updated. Stripe displays a fake authentication page inside the modal in a sandbox that lets you simulate a successful or failed authentication attempt. In live mode the bank controls the UI of what is displayed inside the modal.