Stripe and Commerce

Launch Stripe faster with a setup flow that covers product data, cart, and checkout.

Quick setup: connect Stripe to your site

Do this once to unlock Stripe data and checkout flows.

  1. Open your site in the editor (Design on your site's dashboard).
  2. Go to Site Settings -> Connectors.
  3. Add Stripe using either your secret API key or Stripe Connect account.
  4. Save, then refresh the editor so connector data can load for bindings.

Quick setup: product grid from Stripe data

Show live Stripe products without manual copy/paste.

  1. Add or select the section container that should repeat products.
  2. Set that container data source provider to `stripe`.
  3. Set collection to `products`.
  4. Set filters/sort/limit for the exact catalog slice you want.
  5. Inside that same container, bind text/image/button fields to `{{item.*}}` variables.
  • Use `{{item.title}}` for product name.
  • Use `{{item.price.formatted}}` for display price.
  • Use `{{item.image}}` or `{{item.images.0}}` for product image.
  • Keep connector data in bindings; do not copy catalog data into static text fields.
{
  "provider": "stripe",
  "collection": "products",
  "limit": 8,
  "sort": "newest"
}

Quick setup: cart + checkout

Turn product cards into a complete buying flow.

  1. Add commerce UI components (for example CartBadge and CartDrawer) to your layout.
  2. Wire purchase actions (add-to-cart / toggle-cart / checkout) on product CTAs.
  3. Verify checkout routes are configured and reachable from the cart UI.
  4. Run one full purchase in test mode before publish.
  • Connector product fetch is not the same thing as cart/checkout behavior.
  • If product cards render but checkout fails, debug cart/checkout routes first.
  • If checkout works but cards are empty, debug the container data source/bindings.

Shipping, tax, and promo codes

Set these once per site on the Shop page in your dashboard.

  1. Open your site in the dashboard and go to Commerce -> Shop.
  2. Under Checkout, shipping & tax, turn on shipping and list the countries you ship to as two-letter codes (US, CA).
  3. Add up to 5 shipping rates. Each has a name, a price, and an optional delivery estimate in business days.
  4. Optional: set an amount for free shipping. Your cheapest rate becomes free once the items you ship reach it, after promo codes.
  5. To charge sales tax, turn on Stripe Tax. Set up Stripe Tax in your Stripe account first, or checkout goes through without tax and the Shop page shows a warning.
  • Buyers only give a shipping address when the cart has something to ship. Gift cards and subscriptions never ask for one.
  • To mark a Stripe product as digital, add the metadata `digital` = `true` on the product in Stripe.

Stock counts

Stop selling items you don't have.

  • Set an `inventory` count in the product's (or price's) metadata in Stripe, then click Refresh products on the Shop page.
  • Each paid order lowers the count. Checkout refuses a cart that asks for more than is left and tells the buyer how many remain.
  • Products with no `inventory` count never run out.

Orders

Ship and refund orders without opening Stripe.

  • Commerce -> Orders lists every paid order for the site, newest first. Search by the buyer's full email address.
  • Mark an order shipped with an optional carrier and tracking number. The buyer gets an Order shipped email, which you can edit under Emails.
  • Refund an order from its row. Subscription refunds still happen in Stripe.
  • Site owners get an email for every new order.

Pre-release checklist

Run this before publish to catch checkout issues early.

  1. Verify product listing/search returns the expected Stripe items.
  2. Test add-to-cart, quantity changes, subtotal, and checkout end-to-end.
  3. In test mode, place one order that needs shipping and check the rate, the tax line, and that the order shows up on the Orders page.
  4. Test both empty-cart and populated-cart states.
  5. Note any known search/rate-limit constraints in your release notes.