Stripe Integration for Payments

This boilerplate allows you to easily set up subscription or one-time payments with Stripe. Follow these steps to get started:

Getting Started

Step 1: Create a Stripe Account and Products

First, create a Stripe account and set up your desired products. Here is an example screenshot of how your Stripe products might look:

Step 2: Add Your Stripe API Key and Price IDs

Add your Stripe API key and the product price IDs to your .env file:

STRIPE_SECRET_KEY=your-stripe-secret-key
NEXT_PUBLIC_PRICE_ID_1=your-monthly-price-id
NEXT_PUBLIC_PRICE_ID_2=your-annual-price-id

Step 3: Add the <Pricing> Component to Your Landing Page

Integrate the <Pricing> component into your landing page to display pricing tiers and handle user subscriptions.

import { Pricing } from "../components/Pricing"; // Adjust the import path as needed
 
<Pricing
  tiers={[
    {
      id: "premium",
      name: "Premium",
      paymentType: "subscription",
      description: "Unlock premium features",
      features: ["Unlimited creations", "Reliably fast, 24/7 support"],
      mostPopular: false,
      price: {
        monthly: {
          amount: "$20",
          stripePriceId: process.env.NEXT_PUBLIC_PRICE_ID_1!,
        },
        annually: {
          amount: "$100",
          stripePriceId: process.env.NEXT_PUBLIC_PRICE_ID_2!,
        },
      },
    },
  ]}
  title="Fair transparent pricing"
  subtitle="Get started now with one of our plans"
/>;

When your customers click the "Get Started" button, they will be redirected to sign up then redirected to appropriate checkout page on Stripe.

Summary

By following these steps, you can easily set up and manage Stripe payments in your project. Create your Stripe account and products, configure your environment variables, and integrate the <Pricing> component to provide a seamless payment experience for your customers.