How to prevent shopping cart alterations in another tab when paymentintent is already created

Has anyone figured out a solution to this? I seem to have gotten to the same conclusion with no solution.

If I were to go the my app's checkout page, the payintent is created in the backend (explained the process below). So no after the payIntent is created, if i open a new tab and go the menu and add a new menu item, firestore will show the new (correct) total, but since the payment intent is created stripe charges the old (wrong) total.

What I am doing is

1. Every time the page loads, I send a GET request to my backend which verifies the identity of the user (using firestore/firebase).

2. Checks if there is a payment intent (payement intents are stored in firestore corresponding to the user)

• A. if payintent does not exist under user create one
• B. if payintent does exist retrieve payintent from stripe and check if it has .status===succeeded. IF it has succeeded create a new one and if it has not succeeded update the old one. The amount for all payIntents is calculated using total in firestore

(and ofc if the users cart is empty a payintent is not created)

3. Send back to the frontend the payInent.clienSecret and cart items to populate page

4. From the front end using stripe elements and confirmPayment confirm the payment

(using ngrok the page loads in about 800-1200ms so not too bad i think)

Possible solutions are using webhooks, when payintent is processing check and update the pricing but that seems like duct taped solution (if it were to even work). OR using webhooks when payment has succeeded update the payment, again seems like a duct tape solution (if it were to even work).

EDIT: possible solution 3 cofirmPayment in the backend but according to documentation that takes away 3ds authentication which is the reason I am doing confirmPayment in the front end anyways

SOLUTION: The missing piece is that you need to update the Payment Intent's amount when something is added to their cart. Once you add that I think that will solve your issue.

So a function to create payment intent and update payment intent (when there is already a payment intent created) on add to cart. And then a final update paymentIntent on the checkout page whenever they delete an item or if they edit the item

Thank you Justin Michael

I'm not sure I completely understand your question. If you confirm a Payment Intent client-side using its client secret the Payment Intent will attempt to charge whatever the current amount set on it is. Stripe will never use a previous or "old" amount.

As far as a solution, I recommend you retrieve the Payment Intent client-side using Stripe.js when your customer clicks on your "pay" button and see if the currently-set amount on the Payment Intent matches what you're currently displaying to them. If it doesn't match abort the payment process, update your state client-side based on the latest version of the Payment Intent you just retrieved, prompt the customer to confirm the new amount, and ask them to click on "pay" again.