What This Screen Does
This is where you complete a purchase. Think of it like going through a real-world checkout line: first you review what is in your cart, then you pick a delivery address, and finally you choose how to pay. The process is split into three steps with a progress bar at the top so you always know where you are.
How to Get There
Open the dashboard.
In the left-hand menu, click Products.
Browse or search for items and add them to your cart.
Click the cart icon or navigate to the checkout screen.
You are now on the Checkout screen.
Step-by-Step Guide
The checkout is divided into three steps: Cart, Billing & Address, and Payment. A stepper bar at the top shows your current progress. Completed steps display a checkmark.
Step 1 — Cart
This is the first thing you see. It shows every item you have added to your cart.
1.1 Review Your Items
The left side displays a Cart card listing all products.
Each item shows its details and quantity.
The header shows the total number of items (e.g. “Cart (3 items)”).
Action | What It Does |
Increase quantity (+) | Adds one more of that product. |
Decrease quantity (−) | Removes one of that product. Quantity cannot go below 1. |
Delete | Removes the product from your cart entirely. |
1.2 Check the Order Summary
On the right side you will see the Order Summary panel.
It shows:
Line | Description |
Sub Total | The cost of all items before any discount. |
Discount | Any discount that has been applied. |
Total | The final amount you will pay (Sub Total minus Discount). |
To apply a discount, enter a discount value in the discount field and confirm it.
1.3 Continue Shopping or Proceed
To add more items, click the Continue Shopping link at the bottom-left. This takes you back to the product list.
When you are happy with your cart, click the Check Out button on the right side.
Note: The Check Out button is disabled if your cart is empty.
Step 2 — Billing & Address
Here you choose where the order should be delivered.
2.1 Select a Delivery Address
You will see up to four saved addresses displayed as cards.
Each card shows the address details.
Click Deliver to this Address on the card you want to use.
If an address is not your primary address, you will also see a Delete button to remove it.
2.2 Add a New Address (optional)
If none of the saved addresses are right, click the New Address button at the bottom-right.
A form dialog will open where you can enter a new address.
Fill in the required fields and save. The new address will be selected automatically.
2.3 Review the Order Summary
The right side shows the same Order Summary panel (Sub Total, Discount, Total) so you can keep an eye on costs.
2.4 Navigate
Click Back to return to the Cart step.
Selecting an address automatically advances you to the Payment step.
Step 3 — Payment
This is the final step. Choose how you want to pay and confirm your order.
3.1 Choose a Delivery Option
Pick one of the available shipping speeds:
Option | Cost | Delivery Time |
Free | $0 | 5–7 days |
Standard | $10 | 3–5 days |
Express | $20 | 2–3 days |
The shipping cost is added to your total automatically.
3.2 Choose a Payment Method
Select how you want to pay:
Method | Required | Description |
Pay with Paypal | Pick one | You will be redirected to PayPal to complete the purchase. |
Credit / Debit Card | Pick one | Supports Mastercard, Visa, Discover, and Stripe. If selected, choose a saved card. |
Cash | Pick one | Pay in cash when your order is delivered. |
You must select a payment method. The form will not submit without one.
If you select Credit / Debit Card, you will also need to pick one of your saved cards:
Saved Card |
**** **** **** 1212 - Jimmy Holland |
**** **** **** 2424 - Shawn Stokes |
**** **** **** 4545 - Cole Armstrong |
3.3 Review Billing Info
On the right side you will see a Billing Info panel showing the delivery address you selected in Step 2.
Below that is the full Order Summary including Sub Total, Discount, Shipping, and Total.
If something looks wrong, click the Edit link on the summary to jump back to the Cart step, or click Back to return to the Billing & Address step.
3.4 Complete the Order
Click the Complete Order button.
The system will validate that you selected a payment method.
If everything is valid, your order is placed.
Order Complete
After a successful purchase, a full-screen confirmation dialog appears.
You will see a “Thank you for your purchase!” message with your order number.
The system tells you that a notification will be sent within 5 days when the order ships.
You have two options:
Button | What It Does |
Continue Shopping | Resets the checkout and takes you back to start shopping again. |
Download as PDF | Downloads a PDF copy of your order confirmation. |
What Happens Behind the Scenes
You click "Check Out" (Step 1)
|
v
Cart items are synced via Redux (getCart)
|
v
You move to Step 2 — Billing resets automatically
|
v
You select or create a delivery address
|
v
Address is saved as billing info in Redux state
|
v
You move to Step 3 — Payment
|
v
You pick delivery speed and payment method
|
v
You click "Complete Order"
|
v
Form validates payment method (Yup schema — payment is required)
|
v
If valid: onNextStep() marks checkout as completed
|
v
Redux state resets (onReset)
|
v
Order Complete dialog appears with confirmation
|
v
You click "Continue Shopping" — entire checkout resets to Step 1
Troubleshooting
“The Check Out button is greyed out and I cannot click it”
The button is disabled when your cart is empty.
Go back to the product list and add at least one item to your cart.
Once there is at least one item, the button will become active.
“I do not see any saved addresses in the Billing step”
Addresses are loaded from a predefined address book. If none appear, the address data may not have been set up.
Click New Address to add one manually.
If the form does not open, try refreshing the page.
“I selected an address but nothing happened”
Clicking Deliver to this Address should move you to the Payment step automatically.
If the page does not advance, check your internet connection and try again.
Refresh the page and repeat the process if the issue persists.
“I get a ‘Payment is required!’ error when I click Complete Order”
You must select a payment method before completing the order.
Choose one of the three options: PayPal, Credit / Debit Card, or Cash.
The error message will disappear once you make a selection.
“I want to change my cart after reaching the Payment step”
On the Order Summary panel in the Payment step, click the Edit link. This takes you back to the Cart (Step 1).
Alternatively, click Back to return to the Billing & Address step.
You can navigate freely between steps without losing your selections.
“The shipping cost is not showing in my total”
Shipping is only added in the Payment step after you select a delivery option (Free, Standard, or Express).
If the total does not update after selecting an option, try selecting a different option and then switching back.
“My discount is not being applied”
Make sure you entered the discount value in the discount field on the Cart step and confirmed it.
Discounts can only be applied in Step 1 (Cart). If you are on a later step, go back to the Cart to apply it.
“The order complete screen appeared but I did not get a PDF”
The Download as PDF button triggers a PDF download. If nothing happens, check that your browser is not blocking pop-ups or downloads.
Try clicking the button again. If it still does not work, take a screenshot of the confirmation for your records and contact support.
“I refreshed the page and lost my checkout progress”
Checkout state is stored in your browser session via Redux. Refreshing the page may reset parts of the flow.
If your cart items are still saved, they will reload automatically. However, your billing and payment selections may need to be re-entered.
To avoid this, complete the checkout in one session without refreshing.