ScaffoldHub uses Stripe to accept payments for the workspaces plans.
For this tutorial, we will use the Test Mode. You will need to repeat this process for Live Mode.
Before we continue, make sure you have a staging backend server deployed. Stripe needs a publicly accessible URL to be able to notify successful payments.
Stripe must be configured on both frontend and backend files.
For the frontend:
frontend/src/config/staging.tsx (For React and Vue)
frontend/src/environments/environment.staging.ts (For Angular)
For the backend:
Go to stripe.com and create a new account.
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, ScaffoldHub uses Growth and Enterprise as the plan names. Feel free to change those names, add or remove a plan. This will require changing the code. See Architecture > Payments for more details.
Go to Products > Add Product.
Fill in the Product's information.
Copy the Price Codes and save on the backend environment variables.
PLAN_STRIPE_PRICES_GROWTH = "price_..."PLAN_STRIPE_PRICES_ENTERPRISE = "price_..."
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
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/webhook
Events you need to capture are:
Now, update the PLAN_STRIPE_WEBHOOK_SIGNIN_SECRET environment variable with the Signing Secret.
To test the webhooks on localhost, please follow this tutorial:
Done! You can now use payments on your application.