Tutorials > Payments

Payments

The flow is the same for one-time and subscription payments! 💸

Let's create a Stripe or LemonSqueezy Checkout for setting up subscriptions, and let our webhook work its magic to handle the logic and grant user access! 💳

You need to have Stripe or LemonSqueezy and a database set up.

Stripe Setup

1. In your Stripe dashboard, click [More +] > [Product Catalog] > [+ Add Product]. Set a catchy name and a monthly price (or customize based on your business model). Finally, hit [Save Product] to seal the deal! 💻

2. In the [Pricing] section, find the product price ID (it begins with price_) and paste it into the first plan in the stripe.plans array in the config.ts file.

3. In config.ts, change paymentProvider to stripe

4. In /dashboard/page.ts file, paste the code below: (we need the user to get authenticated so that is why we are using dashboard as an example)

/app/dashboard/page.tsx

    import { ButtonAccount, ButtonCheckout } from "@/components/landing-components";
    import config from "@/config";
    
    export const dynamic = "force-dynamic";
    
    export default async function Dashboard() {
      return (
        <main className="min-h-screen p-8 pb-24">
          <section className="max-w-xl mx-auto space-y-8">
            {/* Display the account button component */}
            <ButtonAccount />

            {/* Display a heading with a placeholder for your product name */}
            <h1 className="text-3xl font-extrabold md:text-4xl">
              Get <YOUR_PRODUCT>
            </h1>

            {/* Subscription with the first plan's price ID */}
            <ButtonCheckout
              mode={config.stripe.plans[0].mode}
              priceId={config.stripe.plans[0].priceId}
            />
          </section>
        </main>
      );
    }
    

5. Visit http://localhost:3000/dashboard in your web browser, log in, and then click the button to proceed with a payment using the credit card number 4242 4242 4242 4242.

6. Our webhook, located at /api/webhook/stripe/route.ts, keeps an ear out for Stripe events and takes care of the logic to grant or deny user access accordingly.

Stripe Local Endpoint

For this to function in development mode, it's essential to have Stripe local endpoint running on your computer.

7. Feel free to incorporate your custom logic within /api/webhook/stripe/route.ts, such as sending emails for abandoned carts or deducting credits as needed.

8. Users have the ability to handle their accounts using <ButtonAccount /> (cancel subscriptions, update credit card details, etc.). So no need to build custom user account page! 🚀

Lemon Squeezy Setup

1. In your Lemon Squeezy dashboard, click [Store] > [Products] > [+ New Product]. Set a catchy name and a monthly price (or customize based on your business model). Finally, hit [Save Product] to seal the deal! 💻

2. In the [Pricing] section, find the Variant ID and paste it into the first plan in the lemonsqueezy.plans array in the config.ts file.

Variant ID => lemonsqueezy.plans.[0].variantId

3. In config.ts, change paymentProvider to lemonsqueezy

4. In /dashboard/page.ts file, paste the code below: (we need the user to get authenticated so that is why we are using dashboard as an example)

/app/dashboard/page.tsx

    import { ButtonAccount, ButtonCheckout } from "@/components/landing-components";
    import config from "@/config";
    
    export const dynamic = "force-dynamic";
    
    export default async function Dashboard() {
      return (
        <main className="min-h-screen p-8 pb-24">
          <section className="max-w-xl mx-auto space-y-8">
            {/* Display the account button component */}
            <ButtonAccount />

            {/* Display a heading with a placeholder for your product name */}
            <h1 className="text-3xl font-extrabold md:text-4xl">
              Get <YOUR_PRODUCT>
            </h1>

            {/* Subscription with the first plan's price ID */}
            <ButtonCheckout
              mode={config.lemonsqueezy.plans[0].mode}
              variantId={config.lemonsqueezy.plans[0].variantId}
            />
          </section>
        </main>
      );
    }
    

5. Visit http://localhost:3000/dashboard in your web browser, log in, and then click the button to proceed with a payment using the credit card number 4242 4242 4242 4242.

6. Our webhook, located at /api/webhook/lemonsqueezy/route.ts, keeps an ear out for Lemon Squeezy events and takes care of the logic to grant or deny user access accordingly.

LemonSqueezy Local Endpoint

For this to function in development mode, it's essential to have Lemon Squeezy local endpoint running on your computer. For Lemon Squeezy webhook testing, you can use NGrok or an alternative for local development for Lemon Squeezy to hit your local environment for testing. See, Ngrok Docs

7. Feel free to incorporate your custom logic within /api/webhook/lemonsqueezy/route.ts, such as sending emails for abandoned carts or deducting credits as needed.

8. Users have the ability to handle their accounts using <ButtonAccount /> (cancel subscriptions, update credit card details, etc.). So no need to build custom user account page! 🚀