Payment Collection

Payment processing is one of the most important component of a SaaS platform. By default, our boilerplate integrates with Stripe, and supports both subscription and onetime payment plans.

The boilerplate includes a prebuilt pricing component:

Alternatively, if you need more flexibility, you can also use the StripeButton component to create your own pricing section.

Get the Stripe secret key

To set up Stripe, first make sure you have a Stripe account.

During development, you should work inside a sandbox. The ensures whatever happens during development and testing will not mess up your production payment workflow.

Go to Developers -> API keys:

Copy and past the Secret key into your .env as the STRIPE_SECRET_KEY variable.

STRIPE_SECRET_KEY="sk_test_51R4XXXXXXXXXX"

Create a new product

Next, go to Product catalog and create a new product.

Set up the prices. You can have monthly subscription or onetime payment.

Click on the ... next to the price, and copy the price ID.

Copy and paste the monthly subscription price ID into your .env as the STRIPE_PRICE_KEY_MONTH variable.

Copy and paste the onetime payment price ID into your .env as the STRIPE_PRICE_KEY_ONETIME variable.

STRIPE_PRICE_KEY_MONTH="price_1RXXXXXXXXX"
STRIPE_PRICE_KEY_ONETIME="price_2CXXXXXXXXX"

Setting up webhook

Go to Developers -> Webhooks. Since we're currently working under dev environment, you should add a local listener.

Follow the instructions to set up everything on your machine.

Remember to replace the webhook URL into localhost:<port>/api/stripe/webhook.

Going to production?

If you are ready to move your SaaS app into production, exit the sandbox and repeat the same steps we discussed above.

In the webhook step, instead of adding a local listener, make sure you add the actual API endpoint where your SaaS is hosted, something like https://www.mysaas.com/api/stripe/webhook.