The checkout page is the page where customers can complete the shipping and payment information, and place an order with the items in their cart. By default, it is a 3-step process:
It can be seen after clicking the checkout button in the cart in the checkout route.
There are 2 possibilities: one-step checkout or 2-step checkout (default). But in both cases designs should represent shipping aka personal information part, billing step which includes payment part and billing address part. After successfully completing all information and placing an order there should be a success page that should be represented in the designs.
<aside> ℹ️ Usually, styling this element takes from-to: 3-5h
</aside>
<aside> ➡️ To open the checkout page, click on the cart icon, then "secure checkout".
</aside>
The Checkout route renders the checkout.
All related elements were styled in the scope of checkout organisms. Mainly we need to adjust element placement, distance, spacing and elements, which are not included in the scope of organisms and molecules.
<aside> ➡️ Additionally, adjustments for smaller elements may be needed.
</aside>
The stepMap object is responsible to store information regarding each checkout step, like:
stepMap = {
[<STEP>]: {
number: ..., // the number to be displayed at the title
title: ..., // the step title
mobileTitle: ..., // the title to be shown on the mobile header
url: ..., // the step url
render: ..., // the method responsible for render the step
areTotalsVisible: ..., // if the totals should be visible on this step
}
}
<aside> ➡️ If the mobile title is not specified, the title will be taken instead. So, it should only be added if you want the mobile title to be different.
</aside>
The stepsCount variable store the number of steps present on the checkout page. It’s used when rendering the steps count on the title. By default, its value is 2, change it if you’re adding more steps.
If designs are providing one-step checkout usually functionality is performed in the epic of additional scope before the start of organisms and layout.