What customers see at checkout
Walk through the cart, checkout and thank-you page the way a customer does, on a computer and on a phone.
It helps to place a test order yourself, so you know what your customers see. This is the path for a store with Cart and checkout turned on (see Set up your store).
1. Add to cart
On a product page, the customer picks an option and clicks Add to cart. Depending on your settings, a short "Added to cart · View cart" message shows, the side panel opens, or the cart page opens. A cart button with the number of items stays on the screen.
Buy now → skips the cart and goes straight to checkout with that product.
2. The cart
The cart page (/cart/) lists the products with a Quantity box and Remove. If you have fewer in stock than the customer wants, the quantity is lowered and the cart says how many are left. Products that went out of stock or back to draft are removed with a message.
3. Checkout
The customer types their Name and Email (1), and if they like, Phone and Company.
They choose their Country (2). It decides tax and shipping. For physical products they also fill in the Shipping address.
If they have a coupon, they type it under the order summary (3) and click Apply. The discount shows in the summary.
They choose a Payment method and can add Order notes.
Payment method and order notes They click Place order (4).
The Order summary always shows the subtotal, discount, shipping, tax and total, and updates as the customer changes the country or coupon.
If something is missing, the checkout says so and keeps what was typed, for example "Please enter your name and a valid email address.", "Please choose a payment method." or "Please enter your shipping address." If you don't ship to the chosen country, it says "Sorry, we do not ship to that country yet."
4. Paying
- With PayPal, PayMongo or Stripe, the customer goes to that service's payment page and comes back to the thank-you page, which shows "✓ Payment received" and Download invoice (PDF) ↓. If they cancel, the page says the payment was canceled and offers Pay now → to try again, also with another method.
- With your own method, the thank-you page shows your instructions.
5. The thank-you page
The page shows the order number, "A confirmation was sent to …", How to pay with … with your instructions (the order number filled in), the amount and reference, your QR code or payment button, and the items with the total. Your Message after ordering shows here too.
If you ask for reference numbers, the customer types theirs after paying and clicks Send:
The page then says "✓ Reference received: … We will confirm your payment shortly." You get an email with the reference at your support email, and it shows next to the order in Store → Orders.
The emails
| Who | When | |
|---|---|---|
| Customer | Order received with the order number, your instructions and a View your order button | Right after ordering |
| You | New order … from … with Open orders | Right after ordering |
| You | Payment reference for … | When the customer sends a reference |
| Customer | Payment received with links to the invoice and their purchases | When the order is paid |