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.
ScaffoldHub configuration files
Stripe must be configured on both frontend and backend files.
For the frontend:
frontend/src/config/staging.tsx (For React and Vue)
Copy the Publishable key to the frontend config file.
3.
Save it on stripePublishableKey.
4.
Copy the Secret key to the backend config file.
5.
Save it on PLAN_STRIPE_SECRET_KEY.
Create the plans
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.
Name
Price
Recurring
Billing Period
Copy the Price Codes and save on the backend environment variables.
1
PLAN_STRIPE_PRICES_GROWTH ="price_..."
2
PLAN_STRIPE_PRICES_ENTERPRISE ="price_..."
Copied!
Enable the Customer Portal
Go to Settings > Billing > Customer Portal.
Enable the functionalities you want on the customer portal.