Stripe

ShipAIFast makes managing your subscriptions, payments, and invoices a breeze with Stripe!

Our prebuilt template includes Stripe checkout functionality, allowing you to effortlessly integrate Stripe into your own system.

Setup Stripe

Stripe provides a sandbox environment, called Test mode, specifically designed for building and testing your payment integration before going live. This way, you can simulate real-world transactions without any risk of processing actual payments or moving real money.

Head to Stripe

Visit Stripe website (opens in a new tab) and create an account if you don't have one already.

Test mode

Stripe defaults to Test mode, providing a secure sandbox for you to experiment and refine your integration without any risk of real charges.

Create Stripe Webhook

Configure Stripe webhook in your project to receive notifications about product price updates and subscription changes.

Create endpoint

Go to the [Developers] ⮕ [Webhooks] section of your Stripe dashboard

Then click [Add endpoint].

In the URL field, enter the following, replacing <your-ai-saas-domain> with your actual domain (or a temporary domain if you don't have one yet):

https://<your-ai-saas-domain>/api/webhooks/stripe

You can change the webhook URL later if needed.

Select events

Select events to listen to:

product.created
product.updated
product.deleted
price.created
price.updated
price.deleted
checkout.session.completed
customer.subscription.created
customer.subscription.updated
customer.subscription.deleted

Click [Add ednpoint] to create Stripe webhook endpoint.

Update `.env.local`

💡

Make sure to keep your Stripe secret key confidential and avoid sharing it publicly.

Stripe secret key

Go to the [Developers] ⮕ [API keys] section of your Stripe dashboard.

Copy the [Secret key], this key is used to securely communicate with Stripe's API.

Paste the copied secret key into the .env.local file.

STRIPE_SECRET_KEY=<your-secret-key>

Stripe secret

Stripe webhooks signing secret

Go to the [Developers] ⮕ [Webhooks] section of your Stripe dashboard.

Click [Reveal] and copy the signing secret key.

Paste the copied signing secret key into the .env.local file.

STRIPE_WEBHOOK_SECRET=<your-webhook-signing-secret-key>

Stripe webhook

Listen to Webhook Events

Go to your project directory, run:

# Ask you to open Stripe window and allow CLI to login Stripe
pnpm stripe:login
# Listen to any events configured in previous step
pnpm stripe:listen

Create Products & Prices

To test your integration thoroughly, create corresponding products and prices within Stripe's Test mode and link them to your project.

Create a product in your Stripe Dashboard

Go to [More] ⮕ [Product Catalogue].

Click [+ Add Product].

Enter a descriptive name for your product.

Set the pricing details according to your business model (e.g., monthly subscription, one-time fee).

Click [Save Product] button to finalize the process.

💡

If you have completed previous steps, you should see new products and prices in Supabase Local.

Setup Stripe payment URL to your project

Please follow Stripe instructions here (opens in a new tab) to create a payment link for each price.

Copy Stripe payment link to Stripe config in ./src/configs/stripe.ts. Ensure that you match price and plan correctly.

export const PLANS: Plan[] = [
  {
    // Ensure this matches Stripe price URL
    priceUrl: '...',
    name: 'Basic'
    ...
  }
  {
    // Ensure this matches Stripe price URL
    priceUrl: '...',
    name: 'Pro'
    ...
  }

Supabase OpenAI