As you can see below I am using async await promise function below, so I expect the api call to '/stripe/update_shipping' take place first and then "$stripe.confirmCardPayment" to take place second, but for some reason in production, I see sometimes the charge taking place first and then the update_shipping taking place second.

Is this an issue on my end? or is it something that happens on Stripe? How can I make sure confirm Card Payment is only called after payment intent is updated?

async processCardPayment() {

     this.stripeFailed = '';
     if ( this.validateCreditCardDetails() ) {

                // Updating Amount using Payment Intent api (data sent to backend)
                let updateShipping = await this.$axios.$post('/stripe/update_shipping', {
                    payment_id: this.paymentRef,
                    amount: this.total   this.shipping_options[this.shipping_option_selected].amount,
                });
                
                //charging customer
                this.$stripe.confirmCardPayment(
                    this.secret,
                    {payment_method: {
                        card: this.cardPaymentElement,
                        billing_details:    {
                            address:    {
                                line1: this.address.line1,
                                line2: this.address.line2,
                                city: this.address.post_town,
                                country: this.address.country,
                                postal_code: this.address.postcode,
                            },
                            name: this.first_name   ' '   this.last_name,
                            email: this.emailAddress,
                            phone: this.phoneNumber,
                        }
                    }},
                    {handleActions: false}
                ).then(function(confirmResult) {
                        if (result.error) {
                            // The payment failed
                            this.stripeFailed = 'Your payment failed to complete. '   (result.error.message || '') ;
                        } else {
                            // The payment has succeeded.
                            this.uploadCardOrder();
                            this.processing_payment = false;
                        }
                 }.bind(this));
     }else {
         this.stripeFailed = 'Please complete the highlighted fields.' ;
         this.processing_payment = false;
     }

CodePudding user response：

You should put an awaits keyword in front of the stripe.confirmCardPayment to make the code execution sequential. So that stripe.confirmCardPayment will be called after the network request completes.

const { error, paymentIntent } = await $stripe.confirmCardPayment(...
if (error) {
...
} else {
...
}