Back to Docs

Stripe and Commerce

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

Quick links

FeaturesSchema Browser

Quick setup: connect Stripe to your site

Do this once to unlock Stripe data and checkout flows.

  1. Open your site in `/build`.
  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.

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. Test both empty-cart and populated-cart states.
  4. Note any known search/rate-limit constraints in your release notes.