Mkdirs Docs

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 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.
# .env
# [only required if you want to support paid submissions]
STRIPE_API_KEY=your_stripe_api_key
  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.

Stripe Key

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.
# .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
  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.

Stripe Price

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.

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

Stripe Webhook

Video tutorial

Further Reading

Last updated on

On this page