Get Paid with Paddle + Next.js

Introduction

This tutorial will guide you through integrating Paddle with a Next.js application. You'll learn how to create a Next.js app, set up Paddle for payment processing, handle webhooks, and test your checkout process. This is particularly useful for developers looking to monetize their applications or services.

Step 1: Create Next App

Start by setting up your Next.js application.

1. Open your terminal.
2. Run the following command to create a new Next.js app:

   npx create-next-app@latest my-next-app
   

3. Navigate into your project directory:

   cd my-next-app
   

4. Start your development server:

   npm run dev
   

Step 2: Paddle Overview

Understand the basics of Paddle and its functionalities.

• Paddle is a payment processor that manages subscriptions and payments.
• You need a Paddle account to get your Vendor ID and access API keys.

Step 3: Get Paddle Vendor ID

Obtain your Vendor ID from the Paddle dashboard.

1. Log in to your Paddle account.
2. Navigate to the Developer section to find your Vendor ID.
3. Keep this ID handy for later use in your application.

Step 4: Create Paddle Component

Set up a component to handle Paddle's checkout process.

1. Inside your Next.js app, create a new file called PaddleCheckout.js.
2. Import necessary libraries and set up your component:

   import React from 'react';
   
   const PaddleCheckout = () => {
       const handleCheckout = () => {
           window.Paddle.Checkout.open({
               product: YOUR_PRODUCT_ID,
               vendor: YOUR_VENDOR_ID,
           });
       };
   
       return (
           <button onClick={handleCheckout}>Buy Now</button>
       );
   };
   
   export default PaddleCheckout;
   

3. Replace YOUR_PRODUCT_ID and YOUR_VENDOR_ID with your actual IDs.

Step 5: Use Paddle Component

Integrate your Paddle component into your application.

1. Open the index.js file in the pages directory.
2. Import the PaddleCheckout component:

   import PaddleCheckout from '../components/PaddleCheckout';
   

3. Add the component to your JSX:

   export default function Home() {
       return (
           <div>
               <h1>Welcome to My Next.js App</h1>
               <PaddleCheckout />
           </div>
       );
   }
   

Step 6: Test Paddle Checkout

Verify that the Paddle checkout process is functioning.

1. Run your Next.js app using npm run dev.
2. Open your browser and navigate to http://localhost:3000.
3. Click the "Buy Now" button and ensure the Paddle checkout window appears.

Step 7: Paddle Webhooks

Learn how to handle Paddle webhooks for real-time payment updates.

1. Webhooks allow your application to receive notifications from Paddle when certain events occur (e.g., successful payment).
2. Install the verify-paddle-webhook package:

   npm install verify-paddle-webhook
   

Step 8: Use LocalTunnel

Use LocalTunnel to expose your local server to the internet for webhook testing.

1. Install LocalTunnel globally:

   npm install -g localtunnel
   

2. Run LocalTunnel to expose your app:

   lt --port 3000
   

3. Note the provided URL; you'll use it when configuring your webhooks in Paddle.

Step 9: Create Webhook API

Set up an API route in your Next.js app to handle incoming webhooks.

1. Create a new file webhook.js in the pages/api directory.
2. Set up the webhook handler:

   import { verifyPaddleWebhook } from 'verify-paddle-webhook';
   
   export default async function handler(req, res) {
       const isValid = verifyPaddleWebhook(req.body, YOUR_VENDOR_ID);
       if (isValid) {
           // Handle the webhook event
           res.status(200).json({ message: 'Webhook received' });
       } else {
           res.status(400).json({ message: 'Invalid webhook' });
       }
   }
   

3. Replace YOUR_VENDOR_ID with your actual Vendor ID.

Step 10: Test Webhook

Test your webhook setup to ensure everything is working correctly.

1. Use a tool like Postman or Curl to send a test POST request to your webhook URL.
2. Check that your webhook handler responds appropriately.

Conclusion

You have successfully integrated Paddle with your Next.js application. You've created a checkout component, set up webhooks for payment notifications, and tested everything locally. Next steps could include deploying your application and refining your payment handling logic based on user feedback.