Stripe

Mkdirs uses Stripe as a payment processor.

Configuration

1. Create an account on Stripe

   If you don’t have an account on Stripe, follow their steps to signup.

2. Get the Stripe API key

   • Go to your Stripe dashboard.
   • Select Developers on the top right navigation bar.
   • Select API keys on the menu under Developers.
   • Click on the Reveal live key (or Reveal test key if you are in test mode).
   • Copy the secret key and set it to the .env file.

   Caution

   1. Make sure you copy the secret key and not the public key.
   2. Make sure you set the different secret keys for live and test modes.

   .env

   # [only required if you want to support paid submissions]
   STRIPE_API_KEY=your_stripe_api_key

   

3. Get the product price id

   • Go to your Stripe dashboard.
   • Select Product Catalog on the left sidebar.
   • Click on the + Create Product button.
   • Give your product a clear name and set the one-time fee for user submissions.
   • Click on the Add Product button 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 .env file.

   Caution

   1. Make sure you copy the price id and not the product id.
   2. Make sure you set the different price ids for live and test modes.
   3. Make sure you set the price id for the paid submissions and sponsor ads. NEXT_PUBLIC_STRIPE_PRO_PRICE_ID is for paid submissions. NEXT_PUBLIC_STRIPE_SPONSOR_PRICE_ID is for sponsor ads.

   .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

   

4. Get the webhook secret

   • Go to your Stripe dashboard.
   • Select Developers on the top right navigation bar.
   • Select Webhooks on the menu under Developers.
   • Click on the Add an endpoint button.
   • 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 .env file.

   Caution

   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

• Stripe - API Keys
• Stripe - Webhooks
• Stripe - Checkout Sessions