Stripe

Configure stripe with a single click

Usage

npx next-inject add stripe

Setup Stripe Keys

Visit your stripe dashboard.
On your dashboard, you should be able to copy the live Publishable key and Secret key.
Toggle "test mode", and copy the test Publishable key and Secret key.
Copy both the live and test keys into your .env.local file as follows:

.env.local

# Stripe (local)
STRIPE_PUBLIC_TEST_KEY=TEST_PUBLIC_KEY
STRIPE_SECRET_TEST_KEY=TEST_SECRET_KEY
 
# Stripe (prod)
STRIPE_PUBLIC_KEY=PUBLIC_KEY
STRIPE_SECRET_KEY=SECRET_KEY

Create a Product

Visit the products section of stripe and create your first product.
Once created, click on your product, and click the three dots under the Pricing section to Copy price ID.
Inside your project, go to src/lib/stripe.ts and paste your price ID here:

src/lib/stripe.ts

export const prices = isLiveMode
  ? ({
      // ! Live Price Ids
      oneOff: "price_YOUR_PRICE",
      subscription: "price_YOUR_SUBSCRIPTION_PRICE",
    } as const)
  : ({
      // ! Test Price Ids
      oneOff: "price_YOUR_TEST_PRICE",
      subscription: "price_YOUR_TEST_SUBSCRIPTION_PRICE",
    } as const)

Configure Webhooks

Follow these instructions to setup and log in to the Stripe CLI
Now run the following command in your terminal:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

Copy the Signing Secret that appears in your terminal window into your .env.local file:

.env.local

STRIPE_WEBHOOK_TEST_SECRET=TEST_WEBHOOK_SECRET

Visit the stripe webhooks page and select "Add endpoint"
Set your production domain name as the endpoint URL appended with /api/webhooks/stripe:

E.g. https://example.com/api/webhooks/stripe

Copy the Signing Secret into .env.local:

.env.local

STRIPE_WEBHOOK_SECRET=WEBHOOK_SECRET

Here is how the final .env.local file should look:

.env.local

# Stripe (local)
STRIPE_PUBLIC_TEST_KEY=TEST_PUBLIC_KEY
STRIPE_SECRET_TEST_KEY=TEST_SECRET_KEY
STRIPE_WEBHOOK_TEST_SECRET=TEST_WEBHOOK_SECRET
 
# Stripe (prod)
STRIPE_PUBLIC_KEY=PUBLIC_KEY
STRIPE_SECRET_KEY=SECRET_KEY
STRIPE_WEBHOOK_SECRET=WEBHOOK_SECRET

Bonus Features

Seamless switching between live mode and test mode

Demo components for subscriptions and one-time payments

Any further questions?

Please do not hesitate to contact us by email or twitter

Also, If you are enjoying Next Inject, feel free to share a testimonial here!

Stripe

Usage

Setup Stripe Keys

Create a Product

Configure Webhooks

On this page