How to Integrate Stripe with Your Headless CMS

What is Stripe?

Stripe is a payments platform for accepting card payments, wallets, bank transfers, subscriptions, invoices, and marketplace payouts. Commerce teams use Stripe to create Products, Prices, Checkout Sessions, Payment Links, coupons, tax settings, and customer records through APIs and dashboards. It’s widely used by SaaS companies, marketplaces, retailers, and digital product businesses that need payment infrastructure without building it from scratch.

Why integrate Stripe with a headless CMS?

Commerce teams usually split product work across two systems. Stripe handles the money side, like Prices, subscriptions, tax, coupons, and Checkout Sessions. Your headless CMS handles the product story, like names, descriptions, images, comparison tables, feature lists, FAQs, and localized launch copy. When those systems don’t talk, someone ends up copying product names into Stripe, pasting Price IDs into frontend code, and checking two dashboards before every launch.

Architecture overview

A typical Sanity and Stripe integration starts when an editor publishes a product, plan, or bundle in Sanity Studio. The published document is written to the Content Lake as structured JSON. A Sanity webhook fires on the publish mutation, or a Function runs server-side on the same content event. The handler receives the document ID, uses GROQ to fetch only the Stripe-ready fields, such as title, slug, description, image URL, price, currency, billing interval, and any existing Stripe IDs, then calls Stripe’s API with the Stripe Node SDK. For a new product, it calls stripe.products.create() and stripe.prices.create(). For an existing product, it calls stripe.products.update(), and if the amount changed, it creates a new Price because Stripe Prices can’t be edited after creation. The handler writes stripeProductId and stripePriceId back to Sanity so the frontend can query one content source and build product pages, pricing tables, and Checkout links. When the user clicks buy, your frontend creates a Stripe Checkout Session using the stored Stripe Price ID and redirects the user to Stripe-hosted checkout.

Common use cases

Step-by-step integration

1. 1

   Set up Stripe

   Create a Stripe account, switch to test mode, and copy your secret key from Developers > API keys. Install the Stripe SDK with npm install stripe. If you’re using webhooks from Stripe back into your app, create an endpoint in Developers > Webhooks and save the signing secret.

2. 2

   Model commerce content in Sanity Studio

   Create a product or plan schema with fields like title, slug, description, images, price, currency, billingInterval, active, stripeProductId, and stripePriceId. Keep Stripe IDs read-only for editors so they don’t accidentally break checkout.

3. 3

   Create the sync trigger

   Use a Sanity webhook filtered to published product documents, or use a Function to run server-side logic when a product is created, updated, or deleted. Filter out drafts so Stripe only receives approved content.

4. 4

   Fetch exactly what Stripe needs

   In the handler, use GROQ to fetch the product document and resolve references, such as primary image asset URLs or plan groups. Don’t send whole documents to Stripe. Send the fields Stripe accepts.

5. 5

   Call Stripe’s API

   Use stripe.products.create() or stripe.products.update() for product metadata. Use stripe.prices.create() for amounts, currencies, and recurring intervals. Save the returned Product and Price IDs back to Sanity.

6. 6

   Test checkout from the frontend

   Query Sanity for the product page and stripePriceId, create a Stripe Checkout Session from your backend, and test with Stripe’s test cards, such as 4242 4242 4242 4242. Check update cases too, especially price changes and unpublished products.

How Sanity + Stripe works

CMS approaches to Stripe

Keep building

Explore related integrations to complete your content stack.