Skip to content

Payment Integration

Local Setup

Stripe CLI

You only need stripe cli for local development.
If you don’t need to test for webhook locally, trigger events manually or forward the stripe event trigger to localhost then you don’t need the stripe cli.

  1. Install Stripe CLI:

    Using Homebrew

    Terminal window
    brew install stripe/stripe-cli/stripe

  2. Log in to Stripe CLI:

    Terminal window
    stripe login

    Follow the prompt to authenticate and log in to your Stripe account.

Start Supabase Edge Functions

  1. Serve Edge Functions:

    Terminal window
    npm run supabase:webhook-serve

  2. Forward Stripe events to local webhook:

    Terminal window
    npm run stripe:listen

  3. Trigger stripe events: You can trigger stripe events locally like this

    Terminal window
    stripe trigger <EVENT>

    or you can trigger them directly from the stripe dashboard.

Deployment

For deploying the setup, ensure you update the environment variables to use the production environment. Follow these steps:

  1. Update Environment Variables:

    • Go to the supabase dashboard
    • Open your project
    • On the sidebar, click on Edge Functions
    • Click on Manage secrets
    • Add/Update your environmental variable used in the edge functions.
    • These envs are used by default:
      • BASE_SUPABASE_URL : supabase url
      • SERVICE_ROLE_KEY : supabase service role key
      • STRIPE_WEBHOOK_SIGNING_SECRET : stripe webhook signing secret
      • STRIPE_SECRET_KEY : stripe secret key
      • STRIPE_PUBLISHABLE_KEY: stripe publishable key

  2. Deploy Edge Function:

    Terminal window
    npm run supabase:webhook-deploy

Payment Initialization

To handle payment initialization, we have two Supabase edge functions:

  1. payment-data-native:

    • This function is designed to handle payment initialization for native applications.
    • It check if a customers exist , create if not exists.
    • Create an ephemeral key from stripe.
    • Create the payment intent in stripe.
    • return these values back to the client app.
    • It triggers the native api to call the stripe sdk and initialise the payment.

  2. payment-data-web:

    • This function is tailored for web applications.
    • It check if a customers exist , create if not exists.
    • We then use the stripe backend sdk and pass the price, product and customer details and get the payment url from stripe.
    • Then the web-client side is redirected to this url and the payment proceeds.

Products, Plans and Pricing management.

All the products, prices and their plans are managed on the stripe dashboard. Follow these docs to know more about stripe.