stripe-paymentsstripe-payments-js

Stripe's partner payment options redirect back to return_url if customer exits payment modal


For instance, on a Stripe web element, if the Affirm or Klarna payment options are used, it shows a payment modal for the customer to complete the process.

If the customer changes their mind and clicks the [X] icon to close the modal, then the Stripe element redirects back to the return_url value instead of taking the customer back to the payment form. This will cause the purchase payment to not go thru but will still send all the payment details to the return_url as if they did.

Is there a way change this behavior so that exiting a partner payment form just takes the customer back to the original form so they can choose a different payment method?

My setup uses this JS code to create the payment element:

elements = stripe.elements({
    clientSecret: token.client_secret
});
const paymentElement = elements.create('payment', {
    layout: {
        type: 'accordion',
        defaultCollapsed: false,
        radios: false,
        spacedAccordionItems: true
    },
    fields: {
        billingDetails: {
            name: 'never',
            email: 'never',
            phone: 'auto',
            address: 'auto',
        }
    }
});
paymentElement.mount('#payment-element');

And this code when the payment is confirmed:

const {error} = await stripe.confirmPayment({
    elements,
    confirmParams: {
        payment_method_data: {
            billing_details: {
                name: document.querySelector('#name').value.trim(),
                email: document.querySelector('#email').value.trim(),
            }
        },
        return_url: 'https://example.com/receipt',
    },
});

But obviously the payment is not actually confirmed...they just changed their mind on which payment method to use.

The payment intent is created on the server side and returned in the token variable.


Solution

  • It's normal. The return-url is not a success url, it's the only link your customer can be redirected to post confirm.

    The documentation clearly suggests that you don't know what status the payment is going to be when your customer is redirected:
    https://stripe.com/docs/payments/affirm/accept-a-payment?platform=web#web-collect-payment-method-details

    The return_url should correspond to a page on your website that provides the status of the payment, by verifying the status of the PaymentIntent when rendering the return page.

    You're supposed to either rely on webhooks or API polling to check on that status and perform appropriate actions - i.e. log purchase or prompt customer to try again.