Skip to main content

Checkout

In the current storefront, checkout happens inside the cart surface. That means the customer reviews the order, enters guest details or uses their signed-in profile, selects a collection location and pickup time, and then continues into payment.

What this flow covers​

  • Reviewing cart contents and totals
  • Confirming contact details
  • Selecting collection location and pickup timing
  • Reviewing payment method availability
  • Completing payment and reaching the order-created page

Review the cart before payment​

1. Open the cart with items already added​

The cart shows item count, total, and the active checkout form state.

Live screenshotCart with line items and totals
Cart with line items and totals
static/img/storefront/checkout/placeholder.svg

2. Confirm the checkout contact section​

For guests, the cart displays contact fields directly in the checkout flow. For signed-in customers, profile-linked information may already be present.

Live screenshotCheckout contact details section
Checkout contact details section
static/img/storefront/checkout/placeholder.svg

Confirm collection details​

3. Review the collection-location card​

The checkout flow uses the selected collection location as part of the order snapshot.

Customers should verify the branch name, address, and map link before completing payment.

Live screenshotCheckout collection location review
Checkout collection location review
static/img/storefront/checkout/placeholder.svg

4. Choose ASAP or schedule pickup​

The pickup selector exposes immediate and scheduled collection windows. The ready time shown here carries forward into the order summary and update messages.

Live screenshotASAP and scheduled pickup options
ASAP and scheduled pickup options
static/img/storefront/checkout/placeholder.svg

Confirm payment​

5. Review the Payment Method panel​

The cart shows whether checkout is available and which gateway is active.

On the reference storefront, payment messaging includes Yoco support and wallet-friendly methods like Apple Pay and Google Pay where available.

Live screenshotPayment method panel
Payment method panel
static/img/storefront/checkout/placeholder.svg

6. Watch for checkout-blocked messaging​

If the cart is empty or the order cannot proceed, the checkout area explains why payment is unavailable.

Live screenshotCheckout unavailable state
Checkout unavailable state
static/img/storefront/checkout/placeholder.svg

7. Complete payment and return to the storefront success page​

After successful payment or order creation, the customer lands on the order-created page rather than staying in the cart.

Live screenshotReturn from hosted payment or checkout completion
Return from hosted payment or checkout completion
static/img/storefront/checkout/placeholder.svg

Review the order-created page​

8. Confirm the order number and success state​

The order-created page saves the order and shows the order number clearly.

Live screenshotOrder created page
Order created page
static/img/storefront/checkout/placeholder.svg

9. Review the WhatsApp message preview​

The success page includes a WhatsApp message preview so the customer can see the initial pickup update shape.

Live screenshotWhatsApp message preview on success page
WhatsApp message preview on success page
static/img/storefront/checkout/placeholder.svg

10. Review guest account-linking actions when applicable​

Guest checkout can expose follow-up actions such as creating an account or linking to an existing account without blocking the order itself.

Live screenshotGuest post-checkout account-linking actions
Guest post-checkout account-linking actions
static/img/storefront/checkout/placeholder.svg

Good practice​

  • Test empty-cart, valid-cart, and blocked-checkout states separately.
  • Verify that the chosen location and ready time are reflected on the success page.
  • Keep screenshots for payment, success, and guest-link prompts separate because they are different states in the same flow.