Docs
Stripe configuration in web app

Stripe configuration in web app

How to configure Stripe in web app in development and production modes.

Payment is the most important feature for the web app. We use Stripe for the payment processing and we want to be sure that all payments are processed correctly not to loose any money. The following are the environment variables that are required for the Stripe payment processing.

We have .env.development.local and .env.production.local for the development and production environment.

Development

To test Stripe payments on local we need to save two keys: STRIPE_API_KEY and STRIPE_WEBHOOK_SECRET.

Create API keys

  1. Go to Stripe Dev Dashboard
  2. Select the API keys tab.
  3. In the Standard keys list, in the Secret key row, click Reveal test key.
  4. Copy the key value by clicking it.
  5. Save the key value in the .env.development.local file as STRIPE_API_KEY.

Recommended to check Stripe Key generation guide in the official Stripe documentation

  1. Return to Stripe Dev Dashboard
  2. Select the Webhooks keys tab.
  3. Press + Add local listener button.
  4. Find in Sample endpoint the key in code row const endpointSecret = "whsec_SUPER_SECRET_KEY";. Copy whsec_SUPER_SECRET_KEY value.
  5. Save the key value in the .env.development.local file as STRIPE_WEBHOOK_SECRET.

Install Stripe CLI

We need to install Stripe CLI to test the webhook locally.

  1. Install Stripe CLI with preferred method from the official Stripe CLI
  2. For examples for macOS we can use Homebrew
brew install stripe/stripe-cli/stripe
  1. Login in to Stripe CLI. More detailed steps in the official Stripe Log in to the CLI
stripe login
  1. We're done! Now we can test the webhook locally.

Testing purchase webhook and user registration locally

  1. Make sure that local Supabase docker containers are running. Check Supabase section in docs.
  2. Make sure that you logged-in to Stripe CLI.
  3. Run the following command to listen the webhook locally.
stripe listen --forward-to localhost:3000/api/webhooks/stripe

where localhost:3000 is the address where our NextJS app is running.

You should see similar to next output:

Ready! You are using Stripe API Version [2024-04-10]. Your webhook signing secret is whsec_SUPER_SECRET_KEY.
  1. Now go to sign-up page on local localhost:3000/sign-up and make a purchase.
  2. For test purchase enter any email and for Card Information use the following default test Stripe card details:
  • Card number (strict): 4242 4242 4242 4242
  • Expiration date (any date in future): 01/27
  • CVC (any 3 digits): 123

More info about Simulate payments to test your integration you can find in the official Stripe documentation

  1. After successful purchase you should see the next output in the terminal charge.succeeded:
  --> charge.succeeded [evt_3P9VkUAZ3LFLDFCm2VPtqlrO]
  --> checkout.session.completed [evt_1P9VkWAZ3LFLDFCmvmrOYwCG]
  --> payment_intent.succeeded [evt_3P9VkUAZ3LFLDFCm2vvpGaEx]
  --> payment_intent.created [evt_3P9VkUAZ3LFLDFCm2EBV0a7M]
  <--  [200] POST http://localhost:3000/api/webhooks [evt_1P9VkWAZ3LFLDFCmvmrOYwCG]
  <--  [200] POST http://localhost:3000/api/webhooks [evt_3P9VkUAZ3LFLDFCm2vvpGaEx]
  <--  [200] POST http://localhost:3000/api/webhooks [evt_3P9VkUAZ3LFLDFCm2EBV0a7M]
  <--  [200] POST http://localhost:3000/api/webhooks [evt_3P9VkUAZ3LFLDFCm2VPtqlrO]
   --> charge.updated [evt_3P9VkUAZ3LFLDFCm262dysQl]
  <--  [200] POST http://localhost:3000/api/webhooks [evt_3P9VkUAZ3LFLDFCm262dysQl]
Add productCoupon