How to send custom form data from product page to Sanity and Stripe checkout?

Alright, let me break this down into simple steps for you! You're building an awesome customizable e-commerce shop, and you want to collect customer customization data (like text they want on products) and save it to Sanity. Let me explain this like you're five, then give you the technical details.

The Simple Explanation

Think of it like this: When someone orders a custom birthday cake, they need to tell the baker what text to write on it. You need to:

1. Give them a form to write their custom text
2. Save that text somewhere you can see it later (Sanity)
3. Only save it if they actually paid (successful Stripe payment)

How To Do This

You have two main approaches:

Approach 1: Collect data in your cart, send to Stripe, then save to Sanity (Recommended)

This is what the community answer you found suggests. Here's the flow:

1. Add form fields to your product page - Collect the custom text right where you are now (on the product detail page)
2. Attach that data to the product in your cart - When they click "Add to Cart", include the custom options
3. Send everything to Stripe - Pass the product info AND custom options to Stripe checkout
4. Use a Stripe webhook - When payment succeeds, Stripe tells your server
5. Save to Sanity - Your server then creates a document in Sanity with the order details

The key insight from that thread: You can add custom data to your product object before adding it to cart, like:

const [options, setOptions] = useState({optionOne: '', optionTwo: ''});
product.options = options; // Attach custom data to product

Approach 2: Use Sanity Functions (Modern, Recommended by Sanity)

Since you mentioned you're new to backend stuff, I should tell you about Sanity Functions - these are serverless functions that run on Sanity's infrastructure, so you don't need to manage your own server! This is actually easier than webhooks for your use case.

Step-by-Step Implementation

Here's what you need to do:

Step 1: Add form fields to collect custom data

On your product page, add text inputs:

<div>
  <label>Custom Text Line 1</label>
  <input 
    type='text' 
    onChange={(e) => setCustomText({...customText, line1: e.target.value})}
  />
  <label>Custom Text Line 2</label>
  <input 
    type='text' 
    onChange={(e) => setCustomText({...customText, line2: e.target.value})}
  />
</div>

Step 2: Attach this data to your cart items

When adding to cart, include the custom data with the product.

Step 3: Set up a Stripe webhook

Stripe webhooks notify your server when payments succeed. You'll need to:

• Create an API endpoint (like /api/stripe-webhook)
• Register this URL in your Stripe dashboard
• Listen for the checkout.session.completed event

Step 4: Create an order document in Sanity

When Stripe confirms payment, use the Sanity Client to create a document:

import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  token: 'your-write-token', // Keep this secret!
  apiVersion: '2024-01-01',
})

// In your webhook handler
await client.create({
  _type: 'order',
  customerEmail: session.customer_email,
  items: session.line_items,
  customizations: customData,
  stripeSessionId: session.id,
  status: 'paid'
})

Important Security Note

Never expose write tokens in your frontend code! The token that lets you create documents in Sanity must stay on your server. This is why you need the webhook approach - it runs on your server (or in a serverless function) where the token is safe.

You can create a token with write permissions in Sanity Manage under the API tab. Store it in environment variables.

Defining an Order Schema in Sanity

In your Sanity Studio, create a schema for orders:

export default {
  name: 'order',
  type: 'document',
  title: 'Order',
  fields: [
    {name: 'customerEmail', type: 'string'},
    {name: 'stripeSessionId', type: 'string'},
    {
      name: 'customizations',
      type: 'object',
      fields: [
        {name: 'line1', type: 'string'},
        {name: 'line2', type: 'string'},
      ]
    },
    {name: 'status', type: 'string'},
    // Add other fields as needed
  ]
}

Alternative: Sanity Functions Instead of Webhooks

If managing a webhook endpoint sounds complicated, consider using Sanity Functions. However, for Stripe integration specifically, webhooks are still the standard approach since Stripe needs to call YOUR endpoint when payment succeeds.

Resources

• Sanity's e-commerce guide with Stripe
• Sanity Client documentation
• Stripe webhook documentation
• Creating documents via Sanity's Mutation API

You're doing great tackling this as your first React project! The learning curve is steep but you're asking all the right questions. Good luck! 🎉