Your Cart Page React component

Your Cart Page is a free three-step checkout flow in one component: a cart with quantity steppers, remove buttons, a promo code field and a totals panel; a contact, shipping and payment form next to an order summary; and an Order Confirmed screen with a check mark that draws itself in. A progress bar at the top shows Step 1 of 3 and moves as you go.

Subtotal, a 10% promo discount (codes in promoCodes, matched case-insensitively), flat shippingAmount and tax at taxRate are calculated from the digits in each item's price and shown with your currency symbol. Pay Now calls onPay with the items, amounts and form values; the component doesn't validate the form or charge a card itself. Steps change with a blur, slide, fade or scale animation (animation, animationDuration) that is switched off under prefers-reduced-motion, form fields carry autocomplete hints, and the layout goes to two columns when its container is 920px wide or more.

Use it as the cart and checkout screens of a storefront prototype, a headless commerce front end or a single-product shop, wiring onPay to your payment provider.

For the product page that feeds the cart, use Product Detail; for card number formatting on its own, use Credit Card Input.