🚀 Payments with Stripe

🛒 Buy now 🔗

⏳ Save 9 hours with this add-on!

📜 Description

Easily set up payments with Stripe! Includes library files, API routes, and pre-built components for a seamless and secure transaction experience. 💳🚀

🎯 What's Inside:

✅ Prisma ORM Stripe model configured (0.5h saved)
✅ Stripe lib file with 7 useful functions (2h saved)
✅ 7 API routes (including webhook) configured (3h saved)
✅ useStripeExpress react hook (0.5h saved)
✅ 5 UI components (CheckoutForm, ManageSubscription, PayWithBlik, PayWithButton, SubscribeButton) configured (2.5h saved)
✅ Dashboard user billing page (0.5h saved)

🛠️ How to Use:

📥 Purchase & Get Files
You will find a link to download your files inside the dashboard.
📂 Add Files to Project
Place the files in the appropriate project folders and update imports. Follow the README file (check ./readmes folder) or documentation for more details.
🚀 Enjoy New Features
Spend your saved hours working on your awesome project while we handle the boring features!

Let's set up payments for your app

Useful links: stripe webhooks stripe dashboard

Scopes for webhooks are

checkout.session.completed
invoice.payment_succeeded

Set stripe products/subscriptions (or both): open /config/products.ts , /config/subscriptions.ts and edit array's objects: set priceIds, names, descriptions for items. For products you can use line items instead of creating product in Stripe dashboard. Don't forget to set Stripe secrets in the .env file:

STRIPE_WEBHOOK_SECRET=
STRIPE_WEBHOOK_SECRET_TEST=
STRIPE_SK=
NEXT_PUBLIC_STRIPE_PK=
STRIPE_SK_TEST=
NEXT_PUBLIC_STRIPE_PK_TEST=

Use any Pricing component from /components/lib/pricing/Pricing.tsx | /components/lib/pricing/Pricing2.tsx | /components/lib/pricing/Pricing3.tsx
They differ only by design.

Inside Pricing component pass subscription or pricing object to PricingItem: <PricingItem {...stripeSubscriptionPlans[0]} mode='subscription' period='mo' />
Use as many PricingItem components, as many products / subscription you want to sell.

Last step. Open /api/webhooks/stripe/route.ts and write after-purchase logic there. For subscriptions it's already configured, for 1-time payments you should write your code:

if (session.mode === 'payment' && session.payment_status === 'paid') {
      // if payment was 1-time for product
      // do some things here, e.g. update user in db, send email with product if you don't use users in app, etc.
 }