🍀 Payments with Supabase

Navigate to the Product Catalog

Once inside your Stripe dashboard or Stripe test dashboard, you can navigate to your Product Catalog on the left-hand sidebar

Create a product

This is what users will pay for (like “Extension - Basic” and/or ”Extension - Advanced”).

Create a price for your product

By navigating inside your product, you now have the ability to create a price with the ’+’ sign next to “Pricing”.

This defines how much and how often users will pay (one-time or recurring). Make sure to note the price_id of this price (By clicking on the price after created and scrolling down), you will need it in your application to initiate the checkout.

Grab your API key

Go to the Developers > API keys or Developers > API keys (Test) section.

Copy the key

Copy your Secret key — you’ll need this for Supabase.

Create a Supabase Project (if you haven’t already)

1. Go to Supabase  and create a new project (or use your existing project).
2. Fill out your project name and database password (Make it a password you’ll remember).
3. Click “Create new project”.

Navigate to Edge Functions

1. In the Supabase Console, go to the left-hand side and click on Edge Functions.

Enable Edge Functions — this runs backend code.

1. Click on Deploy a new function.
2. Select the Via Editor option.
3. You will be presented with a basic index.ts file, replace the contents with this:

// Setup type definitions for built-in Supabase Runtime APIs
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
import Stripe from 'npm:stripe@12.0.0';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
const stripe = new Stripe(Deno.env.get('STRIPE_API_KEY'), {
apiVersion: '2024-11-20'
});
const cryptoProvider = Stripe.createSubtleCryptoProvider();
// Init Supabase client
const supabase = createClient(Deno.env.get("SUPABASE_URL"), Deno.env.get("SUPABASE_SERVICE_ROLE_KEY"));
console.log('Stripe Webhook Function booted!');
Deno.serve(async (request)=>{
const signature = request.headers.get('Stripe-Signature');
const body = await request.text();
let receivedEvent;
try {
  receivedEvent = await stripe.webhooks.constructEventAsync(body, signature, Deno.env.get('STRIPE_WEBHOOK_SIGNING_SECRET'), undefined, cryptoProvider);
} catch (err) {
  return new Response(err.message, {
    status: 400
  });
}
console.log(`🔔 Event received: ${receivedEvent.id}`);
if (receivedEvent.type === 'checkout.session.completed') {
  const session = receivedEvent.data.object;
  const email = session.customer_details?.email;
  const name = session.customer_details?.name;
  const paid = session.payment_status === 'paid';
  if (email) {
    const { error } = await supabase.from('customers').upsert({
      email,
      name,
      paid
    }, {
      onConflict: 'email'
    });
    if (error) {
      console.error('Error saving customer:', error);
      return new Response('Database error', {
        status: 500
      });
    }
    console.log(`✅ Saved customer: ${email} | Paid: ${paid}`);
  }
}
return new Response(JSON.stringify({
  ok: true
}), {
  status: 200
});
});
 

4. Click on Deploy function in the bottom-right.

Head Over to Stripe Webhooks

Go to the Developers > Webhooks or Developers > Webhooks (Test) section.

Creating a Webhook

1. Click on Create an endpoint.
2. Insert your endpoint URL you got from the Edge function.
3. Towards the bottom, you’ll select your event and add checkout.session.completed.
4. Save the event and add your endpoint.
5. You’ll receive a webook secret/signing secret, make sure to copy this for the next step.

Open the Supabase Edge Function

Head back to your Supabase Edge function.

Navigate and Insert your secrets

1. On the left-hand side, click on Secrets.
2. Add these two keys:

• “STRIPE_API_KEY” with your own Stripe API key from earlier.
• “STRIPE_WEBHOOK_SIGNING_SECRET” with the webhook secret we just got.

3. Save the new secrets.