React checkout

Checkout handles contact and address fields, shipping, the payment field and changes to the Quote. Your storefront supplies the Cart, wording and confirmation page. Use it from the source workspace after local setup.

Add the checkout

Pass the CommerceCart you created or reopened:

import type { CommerceCart, Order } from "@orbcart/client";
import { Checkout } from "@orbcart/react";
import "@orbcart/react/styles.css";
import { labels } from "./checkout-labels";

type Props = {
  cart: CommerceCart;
  onOrdered: (order: Order) => void;
};

export function CheckoutPage({ cart, onOrdered }: Props) {
  return <Checkout cart={cart} locale="en-GB" labels={labels} onOrdered={onOrdered} />;
}

When onOrdered runs, show your confirmation page. Save the Cart token in your storefront session so a reload can recover the same purchase. Don't create a new Cart on every render.

Supply your wording

locale formats amounts and selects built-in state messages. Today, the form's labels are supplied by your app. Default form labels are still being built.

This small English set works for a test shop shipping to Germany and Austria:

import type { CheckoutLabels } from "@orbcart/react";

export const labels = {
  contact: {
    heading: "Contact",
    email: "Email",
    phone: "Phone",
    optional: "(optional)",
  },
  address: {
    heading: "Delivery address",
    billingCountry: "Billing country",
    pickupCountry: "Country",
    name: "Full name",
    company: "Company",
    line1: "Street and number",
    line2: "Apartment, etc.",
    postalCode: "Postal code",
    city: "City",
    region: "Region",
    country: "Country",
    countries: { DE: "Germany", AT: "Austria" },
    billing: { sameAsDelivery: "Same as delivery address", heading: "Billing address" },
  },
  details: { submit: "Continue to payment" },
  shipping: { heading: "Delivery" },
  payment: { heading: "Payment", field: "Payment details" },
  summary: {
    heading: "Your order",
    subtotal: "Subtotal",
    discount: "Discount",
    shipping: "Delivery",
    tax: "Included tax",
    total: "Total",
    estimate: {
      total: "Estimated total",
      shipping: "Delivery",
      notice: "Final tax and delivery are confirmed at checkout.",
    },
  },
  resuming: { payment: "Checking your payment", review: "Review your order" },
  busy: { paying: "Placing order", confirming: "Confirming", waiting: "Checking payment" },
  ordered: { heading: "Thank you", number: "Order number" },
  legal: () => <p>Demo only. No real charge or shipment.</p>,
} satisfies CheckoutLabels;

The country list must match your Channel's destinations. This example uses gross prices, so the tax row says “Included tax”. The legal text is deliberately for a demo, not a production legal notice.

Resume after a redirect

Render the checkout on your configured payment return page with the saved Cart:

<Checkout cart={cart} locale="en-GB" labels={labels} start={{ from: "return" }} />

It resumes the existing payment. For a normal page reload, use the regular checkout above; it discovers the Cart's current purchase.

Build your own UI

Use useCheckout({ cart }) when you need different markup. It exposes the shared checkout state and actions; your components should display its amounts, not calculate their own.

For a Cart shared across your React storefront, wrap the app in CartProvider and use useShoppingCart(). Its add() operation creates a Cart when needed and moves to the next one after an Order. Use onCartChange to persist the new token.

Read an Order from your backend →