Migrate your basic card integration

Make two changes to the endpoint on your server that creates the PaymentIntent:

1. Remove the error_on_requires_action parameter to no longer fail payments that require authentication. Instead, the PaymentIntent status changes to requires_action.
2. Add the confirmation_method parameter to indicate that you want to explicitly (manually) confirm the payment again on the server after handling authentication requests.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -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

Then update your “generate response” function to handle the requires_action state instead of erroring:

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

Next, update your client-side code to tell Stripe to show a modal if the customer needs to authenticate.

Use stripe.handleCardAction when a PaymentIntent has a status of requires_action. If successful, the PaymentIntent will have a status of requires_confirmation and you need to confirm the PaymentIntent again on your server to finish the payment.

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
  }
}

Using the same endpoint you set up earlier, confirm the PaymentIntent again to finalize the payment and fulfill the order. The payment attempt fails and transitions back to requires_payment_method if it is not confirmed again within one hour.

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

Use our test cards in test mode to verify that your integration was properly updated. Stripe displays a fake authentication page inside the modal in test mode 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.