Cart and checkout

Cart, checkout in one or more steps, express payment and the order confirmation.

2 components · 10 variants

Switch category

cart

Cart

The cart as a panel, a page, a popover, an empty state and with upsells.

Props and details

Slide-over

Slides in from the right with free shipping progress, undo on remove and suggestions.

Installv1.0.1

aiw add @ai-website/cart

Brings along utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="slide-over" items={items} freeShippingFrom={120} header={{ name }}>{page}</Cart>

Source

Full page

Lines on the left, a sticky summary with discount code and VAT on the right.

Installv1.0.1

aiw add @ai-website/cart

Brings along utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="full-page" items={items} promo={{ code: "WELCOME10", percent: 10 }} />

Source

Mini popover

A small preview under the cart button, closes on outside click and Escape.

Empty state

A friendly empty cart that leads back into the shop with popular products.

Installv1.0.1

aiw add @ai-website/cart

Brings along utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="empty-state" recommendations={products} />

Source

With upsell

A bundle with discount, gift wrapping, an order note and matching products.

Installv1.0.1

aiw add @ai-website/cart

Brings along utils, kit, button, icon, reveal, product-image

Usage

<Cart variant="with-upsell" items={items} bundle={{ title, products, price: 36.9 }} giftWrap={{ price: 3.5 }} />

Source

checkout

Checkout

From one page to step by step, express checkout and the confirmation after.

One page
Two columns
Multi-step
Express
Confirmation

Props and details

One page

Contact, delivery, shipping, payment and summary in one calm column.

Installv1.0.1

aiw add @ai-website/checkout

Brings along utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="one-page" items={items} shippingOptions={…} paymentOptions={…} />

Source

Two columns

Form left, summary right. On phones the summary folds out at the top.

Installv1.0.1

aiw add @ai-website/checkout

Brings along utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="two-column" items={items} shippingOptions={…} paymentOptions={…} />

Source

Multi-step

Four steps with progress, checks per step and a review with change links.

Installv1.0.1

aiw add @ai-website/checkout

Brings along utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="multi-step" items={items} values={customer} initialStep={0} />

Source

Express

Neutral express buttons first, email as the calm fallback.

Installv1.0.1

aiw add @ai-website/checkout

Brings along utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="express" items={items} expressOptions={[{ label, icon }]} />

Source

Confirmation

Thank you, order status, what was bought and where it goes.

Installv1.0.1

aiw add @ai-website/checkout

Brings along utils, kit, button, icon, reveal, product-image, cart

Usage

<Checkout variant="confirmation" items={items} order={{ number, firstName, email, delivery, steps, done }} />

Source

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Cart and checkout on a page.

Slide-over

Full page

Mini popover

Empty state

With upsell

One page

Two columns

Multi-step

Express

Confirmation

Similar components, Often combined with

Similar components

Often combined with