Stripe
How to manage the payment with Stripe.
Mkdirs uses Stripe as a payment processor.
Configuration
Create an account on Stripe
If you don't have an account on Stripe, follow their steps to signup.
Get the Stripe API key
- Go to your Stripe dashboard.
- Select
Developerson the top right navigation bar. - Select
API keyson the menu underDevelopers. - Click on the
Reveal live key(orReveal test keyif you are in test mode). - Copy the secret key and set it to the
.envfile.
# .env
# [only required if you want to support paid submissions]
STRIPE_API_KEY=your_stripe_api_key- Make sure you copy the secret key and not the public key.
- Make sure you set the different secret keys for live and test modes.

Get the product price id
- Go to your Stripe dashboard.
- Select
Product Catalogon the left sidebar. - Click on the
+ Create Productbutton. - Give your product a clear name and set the one-time fee for user submissions.
- Click on the
Add Productbutton to create it. - Go to the product detail page, click on the
...button in the pricing section. - Copy the price id and set it to the
.envfile.
# .env
# [only required if you want to support paid submissions and sponsor ads]
NEXT_PUBLIC_STRIPE_PRO_PRICE_ID=your_price_id
NEXT_PUBLIC_STRIPE_SPONSOR_PRICE_ID=your_price_id- Make sure you copy the price id and not the product id.
- Make sure you set the different price ids for live and test modes.
- Make sure you set the price id for the paid submissions and sponsor ads.
NEXT_PUBLIC_STRIPE_PRO_PRICE_IDis for paid submissions.NEXT_PUBLIC_STRIPE_SPONSOR_PRICE_IDis for sponsor ads.

Get the webhook secret
- Go to your Stripe dashboard.
- Select
Developerson the top right navigation bar. - Select
Webhookson the menu underDevelopers. - Click on the
Add an endpointbutton. - Enter the endpoint URL where Stripe will send events to, for example,
https://your-domain.com/api/webhook. - Choose the events you want to receive notifications for, common events include
checkout.session.completed. - Copy the webhook secret and set it to the
.envfile.
You can't set the webhook url to be like http://localhost:3000/api/webhook in test mode, and you need to use a local proxy to test it.
You may use ngrok or localtunnel to create a public URL for your local server, for example, https://mkdirs.loca.lt/api/webhook.
# .env
# [only required if you want to support paid submissions and sponsor ads]
STRIPE_WEBHOOK_SECRET=your_webhook_secret
Video tutorial
Further Reading
Last updated on
