How can I extract the PaymentMethodId using Stripe’s new onConfirm API in ExpressCheckoutComponent?

Below is an explanation of the new workflow:

Why the Change?

In the previous integration you listened for a dedicated "paymentmethod" event that provided a PaymentMethod object (and its id) directly. The migration to the new onConfirm API means that the payment confirmation response now packages data in a different way. The PaymentMethod isn’t exposed directly in the onConfirm data since it’s now handled internally.

Options to Obtain a PaymentMethod ID

There are two common approaches if your backend requires an explicit PaymentMethod ID with your Payment Intent creation:

1. Use the Confirm Response
   When you confirm the Payment Intent (or Setup Intent) using the new flow, the response you receive from Stripe (e.g., after a successful call to stripe.confirmPayment) will include the PaymentIntent object. This object has an associated PaymentMethod. If you need the PaymentMethod ID, you can retrieve it by:

   • Extracting the PaymentIntent ID from the response.
   • Making a subsequent API call on your backend (or via the Stripe SDK) to retrieve the full PaymentIntent which will include the attached payment_method field.

   This is typically the recommended approach because it keeps your client code streamlined while leveraging Stripe’s built-in confirmation process.

2. Create the PaymentMethod Ahead of Confirmation
   If you must send the PaymentMethod ID as a parameter to your Payment Intent creation, consider explicitly creating the PaymentMethod before initiating onConfirm. You can do this by calling the appropriate Stripe SDK method (e.g. stripe.createPaymentMethod) to obtain a PaymentMethod object and its id. Then you can pass this id to your backend as needed.

   Example:

   JAVASCRIPTCopied
   // Create a PaymentMethod explicitly
   const { paymentMethod, error } = await stripe.createPaymentMethod({
     type: 'card',
     card: elements.getElement(CardElement),
   });
   
   if (error) {
     // handle error
   } else {
     // Now you have a paymentMethod.id which you can send to your backend.
     // Later, call onConfirm with the associated PaymentMethod.
   }

Final Considerations

• Streamlining the flow: The new onConfirm callback is designed to simplify the client-side by handling more of the payment confirmation internally. If retrieving the PaymentMethod ID on the front end isn’t absolutely critical, you might let Stripe handle the linkage and then work with the confirmed PaymentIntent on your backend.

• Backend retrieval: Since your API for creating a Payment Intent requires the PaymentMethod ID, using the first approach means you delay that extraction until after confirmation. Often, it is more robust to let your backend retrieve the PaymentIntent (and its associated PaymentMethod) by its ID once confirmation is complete.

Each method has trade-offs, so choose the one that best fits your application’s architecture. For most cases, letting Stripe complete the payment confirmation and then retrieving the PaymentIntent details (with the PaymentMethod attached) on your backend is the simplest long‑term solution.