Ishaan
Jan 21, 2023
Connect
Integrate Stripe Payments for Subscription Plans
Stripe must be configured on both frontend and backend files.
For the frontend:
- frontend/src/config/staging.tsx
- frontend/src/environments/environment.staging.ts
For the backend:
- backend/.env
Save the API keys
- Go to the Get your test API keys tab.
- Copy the Publishable key to the frontend config file.
- Save it on stripePublishableKey.
- Copy the Secret key to the backend config file.
- Save it on PLAN_STRIPE_SECRET_KEY.
By default, Growth and Enterprise as the plan names. Feel free to change those names, add or remove a plan. This will require changing the code.
- Name
- Price
- Recurring
- Billing Period
Copy the Price Codes and save on the backend environment variables.
PLAN_STRIPE_PRICES_GROWTH = "price_..."
PLAN_STRIPE_PRICES_ENTERPRISE = "price_..."
Enable the Customer Portal
Go to Settings > Billing > Customer Portal.Enable the functionalities you want on the customer portal.Read more about the customer portal here: https://stripe.com/docs/billing/subscriptions/customer-portal
Create a Webhook
The webhook is responsible for notifying the application when the plans' subscriptions have changed.Go to Developers > Webhooks > Add Endpoint. The backend URL must have this format: https://your_backend_url/api/plan/stripe/webhookEvents you need to capture are:
- checkout.session.completed
- customer.subscription.updated
- customer.subscription.deleted
Now, update the PLAN_STRIPE_WEBHOOK_SIGNIN_SECRET environment variable with the Signing Secret.
Testing the webhooks on localhost
To test the webhooks on localhost, please follow this tutorial:
https://stripe.com/docs/webhooks/test
