Checkout forms

Two-column checkout: contact + shipping + delivery + payment on the left, order summary on the right.

Preview

Contact information

Email address

Shipping information

First name

Last name

Company

Address

Apartment, suite, etc.

City

Country

State / Province

Postal code

Phone

Delivery method

Standard 4–10 business days $5.00

Express 2–5 business days $16.00

Payment

Credit card

PayPal

eTransfer

Card number

Name on card

Expiration date (MM/YY)

CVC

Order summary

Basic Tee

Black

Large

$32.00
Basic Tee

Sienna

Large

$32.00

Subtotal: $64.00
Shipping: $5.00
Taxes: $5.52
Total: $74.52

React preview

LiveView (HEEx)

alias DesignSystem.UI.CheckoutForms

<CheckoutForms.checkout_form
  products={@cart_items}
  delivery_methods={[
    %{id: 1, title: "Standard", turnaround: "4–10 business days", price: "$5.00"},
    %{id: 2, title: "Express", turnaround: "2–5 business days", price: "$16.00"}
  ]}
  payment_methods={[
    %{id: "credit-card", title: "Credit card"},
    %{id: "paypal", title: "PayPal"}
  ]}
  subtotal="$64.00"
  shipping="$5.00"
  tax="$5.52"
  total="$74.52"
/>

React (JSX)

import { CheckoutForm } from "../ui/index.mjs"

<CheckoutForm
  products={products}
  deliveryMethods={[
    { id: 1, title: "Standard", turnaround: "4–10 business days", price: "$5.00" },
    { id: 2, title: "Express", turnaround: "2–5 business days", price: "$16.00" },
  ]}
  paymentMethods={[
    { id: "credit-card", title: "Credit card" },
    { id: "paypal", title: "PayPal" },
  ]}
  subtotal="$64.00"
  shipping="$5.00"
  tax="$5.52"
  total="$74.52"
/>