How to show a summary on the checkout page for multiple orders?

Question

I am working on the checkout flow(system) for tablet devices which has "three" steps:

1. A list with existing orders (which were previously saved from another flow). The User should be able to select multiple orders from the list to proceed to the next step.

2. Next step is Order Details. Here we can see the products(items) of each selected order.

3. Pay

My question is about the 2nd step:

Can we show a summary for each order separately? Since it is important for us that at the step with Payment(3rd step), we can pay a different amount for each of them and choose different types of payment in terms of best practices and UI patterns.

Thanks!

Answer 1

The best way is to take in mind what is most important for your user.

If it's important to him to know before payment step that you offer these options - you should definitely show a summary for each order separately. But if only total amount does matter for user at Order Datails step you may just warn him that he will be able to select payment method for each order separately.

In other words you need to know where is user's decision point in your process to provide all needed information in time.

Answer 2

You could explore different design approaches. Keep in mind what is most important to the customers in the checkout. I'd recommend to do some research first and check benchmarks / best practices.

I'd like to refer to this link showing the reasons for cart and checkout abandonment baymard.com

You could try this approach to have for each order an own sub total and calculate the total at the bottom of the page. You could offer to pay for each order separately, check bigger platforms like eBay to get an idea how it works.

Order 1
item
item
item
summary
sub total
shipping fees
taxes
Total order 1

Order 2
item
item
item
summary
sub total
shipping fees
taxes
Total order 2

Total all orders incl. taxes