CODEWITHSUNDEEP
javascriptreactjsstripe-payments
fifibaf974
fifibaf974

Reputation: 11

Stripe js + React/JS accessing data after stripe redirect

In Netherlands, the popular payment method is Bancontact, and this method redirects the user to bank page where the user can either open bank app to pay or input credit card information

My question is the following in this example of code (this code will automatically push user to bank page):

stripe
  .confirmBancontactPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href,
  })
  .then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error.
    }
  });

After redirect, they access data inside following code:

.then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
  }
});

Which doesn't make much sense because this is a refreshed page after user comes back from paying and JS state is refreshed since the

// Return URL where the customer should be redirected after the authorization.
return_url: window.location.href,

Did I miss a lesson in JS?

(code automatically redirects to bank page and brings user bank to your return url but .then() promise no longer exists)

How do they access data after the user has been redirected and returned to refreshed page?

Stripe page: https://stripe.com/docs/js/payment_intents/confirm_bancontact_payment

Upvotes: 1

Views: 1517

Answers (1)

Justin Michael
Justin Michael

Reputation: 6495

When using stripe.confirmBancontactPayment the .then at the end is used to catch errors that happen prior to the customer being redirected to their bank (such as the redirect failing). The .then code will not be called after a successful redirect.

How do they access data after the user has been redirected and returned to refreshed page?

When calling stripe.confirmBancontactPayment you specify a return_url your customer will be sent to after the authorize the payment at the bank's website. The return_url will have the following query parameters added:

  • payment_intent
  • payment_intent_client_secret

These values allow you to link the redirect back to the original Payment Intent.

For example, if you specify a return_url of https://example.com/return the customer will be sent to https://example.com/return?payment_intent=pi_123&payment_intent_client_secret=pi_123_456

This entire flow is covered in more detail in Stripe's Bancontact Payments Guide.

Upvotes: 3

Related Questions