I'm implementing online payment on a website I'm working on. Everything is working on the technical side, but I have a UX question now.

Let's say the user added a product to his cart. It goes to the cart page that says what's in it and how much does it have to pay, and includes the checkout form as well. When the actual checkout is done (asynchronously via JS), the contents of the cart are checked again, and the total amount is recalculated. That means the user might have added a product to his cart in another tab, and this product will be included in the checkout even though it wasn't displayed in the cart page when it was generated.

How do you cope with that?

I'm implementing online payment on a website I'm working on. Everything is working on the technical side, but I have a UX question now.

Let's say the user added a product to his cart. It goes to the cart page that says what's in it and how much does it have to pay, and includes the checkout form as well. When the actual checkout is done (asynchronously via JS), the contents of the cart are checked again, and the total amount is recalculated. That means the user might have added a product to his cart in another tab, and this product will be included in the checkout even though it wasn't displayed in the cart page when it was generated.

EDIT: To be clearer, here is the problem step by step:

1. The cart page / checkout is generated and displayed to the user, with only product A in it.
2. The user, in another tab, adds product B to the cart.
3. Back to the tab opened on the cart page, when the actual checkout is done, the user pays for product A and product B, even though what was written was only product A, because the page hasn't been refreshed since (1).

How would you communicate to the user that this happened or can happen, or how would you prevent it from happening?