How to integrate Supabase with Stripe?

 

Step 1: Set Up Supabase Project

 

1. Create a Supabase Account:
   Head over to Supabase and create an account if you haven't already.

2. Create a New Project:
   In your Supabase dashboard, create a new project by clicking the "New Project" button. Enter your project details, such as name and region, and then create it.

3. Access Your Project Settings:
   Once the project is created, go to the project's dashboard and access the "Settings" section to find your API keys and other relevant credentials.

 

Step 2: Set Up Stripe Account

 

1. Create a Stripe Account:
   Navigate to Stripe and sign up for an account if you do not have one.

2. Access Stripe Dashboard:
   Log in to your Stripe dashboard to access API keys, webhook settings, etc.

3. Obtain API Keys:
   Go to the "Developers" section, and then "API keys" to get your publishable and secret keys. Save these keys for later use.

 

Step 3: Create a Table in Supabase

 

1. Navigate to the Table Editor:
   Inside your Supabase project, go to the "Table Editor" to create a new table for storing Stripe payments or customer information.

2. Define Your Table:
   Create a table with relevant fields such as id, user_id, stripe_customer_id, amount, currency, status, etc., to store necessary information.

3. Save the Table:
   Once your table is defined, save it and note the table name for use in queries and functions.

 

Step 4: Set Up Stripe in Backend

 

1. Install Stripe SDK:
   In your backend or server, install the Stripe SDK. For Node.js, you can use npm:

   npm install stripe

2. Initialize Stripe Client:
   Using your secret API key, initialize the Stripe client in your backend:

const stripe = require('stripe')('your_secret_key');


1. Create a Payment Intent:
   Create a payment intent to process payments:

app.post('/create-payment-intent', async (req, res) => {
const { items } = req.body;

// Calculate total amount in cents
const amount = calculateOrderAmount(items);

const paymentIntent = await stripe.paymentIntents.create({
amount,
currency: 'usd',
automatic_payment_methods: {
enabled: true,
},
});

res.send({
clientSecret: paymentIntent.client_secret,
});
});


 

Step 5: Integrate Supabase with Stripe Webhooks

 

1. Set Up Webhook Endpoint:
   In your Stripe dashboard, set up a webhook endpoint that will be triggered upon specific events (e.g., "payment_intent.succeeded").

2. Create Webhook Handler in Your Server:
   Handle the incoming webhook by verifying the event and processing it:

const endpointSecret = 'your_endpoint_secret';

app.post('/webhook', express.raw({type: 'application/json'}), (request, response) => {
const sig = request.headers['stripe-signature'];

let event;
try {
event = stripe.webhooks.constructEvent(request.body, sig, endpointSecret);
} catch (err) {
response.status(400).send(Webhook Error: ${err.message});
return;
}

// Handle the event
if (event.type === 'payment_intent.succeeded') {
const paymentIntent = event.data.object;
// Process event
updateSupabaseTable(paymentIntent); // custom function to update Supabase
}

// Return a 200 response to acknowledge receipt of the event
response.send();
});


 

Step 6: Update Supabase Table with Stripe Data

 

1. Supabase SDK Installation:
   Install Supabase client library in your backend application to enable database interaction.

   npm install @supabase/supabase-js

2. Initialize Supabase Client:
   Initialize the client using the keys from your Supabase project:

const { createClient } = require('@supabase/supabase-js');

const supabaseUrl = 'https://xyzcompany.supabase.co'
const supabaseKey = 'public-anonymous-key'
const supabase = createClient(supabaseUrl, supabaseKey);


1. Create a Function to Update the Database:
   After verifying the Stripe event, update the Supabase table accordingly:

async function updateSupabaseTable(paymentIntent) {
const { id, amount, currency, status } = paymentIntent;
const { data, error } = await supabase
.from('payments')
.insert([{ stripe_payment_id: id, amount, currency, status }]);

if (error) console.error(error);
else console.log('Success:', data);
}


 

Step 7: Test Integration

 

1. Run Your Server:
   Ensure your backend server is running and can receive POST requests.

2. Test Payment Process:
   Use test card numbers provided by Stripe to simulate payment transactions and validate the integration.

3. Verify Database Updates:
   Check the Supabase database to confirm that payments are being recorded correctly and that all associated data is accurate.