4

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?

Improve this question
4
  • 1
    This question is not related to UX and is about back-end implementation. Using JS for checkout is not the safest way, you should not do that. If you decide to take the risk, you can use sessions in order to request the array of products that are in the cart from session.
    – Ivan Venediktov
    Commented Nov 29, 2017 at 11:49
  • I think it is. I wasn't probably clear enough in my question. I am using sessions of course, and using JS only for the very last step, just to send a token and make the payment from the server. The issue would be the same without any JS. I will edit my question to make it more clear.
    – sylbru
    Commented Nov 29, 2017 at 11:54
  • 2
    Now this is what I call a good edit. I will give this an answer and retract the flag.
    – Ivan Venediktov
    Commented Nov 29, 2017 at 12:01
  • Thanks! I should try to think of a better title as well. Also I'm not sure if it's better to edit the entire question or to add an edit part like I did. I'm thinking it might be wise to drop the second paragraph now.
    – sylbru
    Commented Nov 29, 2017 at 12:03

3 Answers 3

Reset to default
5

To protect user from such situation you will need two session records:

CART_ITEMS - Items that are currently in the cart.

CHECKOUT_ITEMS - Items the user is about to pay for.

Before you send the payment token to the server you need to compare CHECKOUT_ITEMS with CART_ITEMS and if there are any differences you inform the user of these changes.

Example scenario:

User is about to pay for the items, but another item was added to the cart. The item is not currently displayed on the payment page. When the "check out" button is clicked, the message appears stating that there is a new item in user's cart and an action is offered.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • As simple as that! Great idea, thank you for this (and for the title edit too). I think I might offer the user to reload the page instead of showing a modal (the problem is he will have to enter his payment information again).
    – sylbru
    Commented Nov 29, 2017 at 14:01
  • No problem, hope it works as anticipated. As of payment information, if you load the content of the cart through a java script request, you should be able to update the content without reloading the page.
    – Ivan Venediktov
    Commented Nov 29, 2017 at 15:36
1

In addition to Ivan Venediktov's answer, I would also add a differentiator (New Item) label on the new items to make sure the user knows what are the new items they have added in the cart.

Improve this answer
-1

You can upload the cart to the server and add another check-out step "confirm shopping cart" which shows what's in the server session. And btw: wouldn't you rather store the shopping cart in the server session from the beginning? The cart would survive browser restarts this way.

Improve this answer
1
  • 1
    I have flagged this question as off-topic, but as per your comment - when writing comments please try to give examples or better description of what you are suggesting. If you don't want to do that, you better submit your answer it as a comment instead.
    – Ivan Venediktov
    Commented Nov 29, 2017 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.