THE
SHOP

Step 1 — Create a Stripe Account

Sign up at stripe.com. Go to Developers → API Keys. Copy your Publishable Key (starts with pk_live_ or pk_test_) and replace YOUR_PUBLISHABLE_KEY in this file’s script tag.

Step 2 — Backend (choose one)

Option A — Netlify Functions (easiest, free): Deploy this site to Netlify. Add a single serverless function at netlify/functions/create-checkout.js that creates a Stripe Checkout Session. Netlify handles hosting and the function runs serverlessly.

Option B — Vercel + Edge Functions: Same concept on Vercel. Create api/checkout.js as a Vercel Edge Function.

Option C — Node.js server: A simple Express app with one route POST /create-checkout-session using Stripe’s Node SDK. Can be hosted on Railway or Render for free.

Step 3 — Security

Your Secret Key never touches this frontend file — it lives only on the backend. Stripe.js handles all card data directly (PCI compliant). Add HTTPS (automatic on Netlify/Vercel), enable Stripe Radar for fraud detection, and set up webhook signature verification so no one can fake order confirmation events. All of this is built into Stripe.

Minimum Backend Function (Netlify example)

// netlify/functions/create-checkout.js
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.handler = async (event) => {
  const { items } = JSON.parse(event.body);

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: items.map(item => ({
      price_data: {
        currency: 'usd',
        product_data: { name: item.name },
        unit_amount: item.price * 100, // cents
      },
      quantity: item.qty,
    })),
    mode: 'payment',
    success_url: 'https://moltenvice.studio/success',
    cancel_url: 'https://moltenvice.studio/shop',
  });

  return {
    statusCode: 200,
    body: JSON.stringify({ url: session.url }),
  };
};