Setting Up Paddle With NextJs - Step By Step Guide [2022]

It is really easy to setup Paddle payments with NextJs. Here's your complete guide for doing that - step by step.

By the end of this guide - you will have Paddle checkout completely setup and ready to go live.

Step 1: Importing the Library

Go to the source code of your NextJs app. And then go to the page where you want the paddle checkout to be loaded.

In our case - let's consider we want paddle at the /payment route.

We will go ahead and create a file at pages/payment.js and paste the following code:

import Script from 'next/script';

export default function Payment() {
    return (
        <div>
            <Script
                onLoad={e => {
                    Paddle.Setup({ vendor: YOUR_VENDOR_ID });
                }}
                src='https://cdn.paddle.com/paddle/paddle.js'
            />
            <h1>Payment Page</h1>
            <a href='#!' className='paddle_button' data-product='YOUR_PADDLE_PRODUCT_ID'>
                Buy Now!
            </a>
        </div>
    );
}

Paddle recommends we keep the src as their hosted version at their CDN. As they can easily push out updates that will affect our version.

Which will not be ideal in case we decide to self-host the script ourselves. Because then we will not be able to capture the latest of the security updates at the earliest.

Now - Go ahead and replace the YOUR_VENDOR_ID with your actual vendor ID.

Where to find Paddle Vendor ID?

• Simply go to your Paddle dashboard.
• Once you're logged in - Check the left sidebar.
• Expand the "Developer Tools" dropdown.
• Select "Authentication"
• Check the text at the very top that says "Your Paddle vendor_id is xxxxxx"

Cool. Now you have the vendor id. Make sure to replace it in your code in the pages/payment.js file.

Step 2: Checkout Action

Now you want to have a button that can be pressed to activate the checkout flow.

Go ahead and create a link in the payment.js file. Like so...

<a href="#!" class="paddle_button" data-product="12345">Buy Now!</a>

Note: It doesn't have to be a link only. It can be a button or any card. Anything that is not disabled and a user can click on. Can be used here.

Only thing that matters is that you specify it's className as "paddle_button". And by passing the Product ID in the HTML attribute.

Where to find my Product ID?

You can find your Paddle product ID by going to your dashboard and selecting a product or subscription.

Now in our example we're going to be creating a subscription based model.

Step 3: Create Subscription Plan in Paddle

• Visit your paddle dashboard.
• In the left sidebar.
• Expand "Catalog" and select "Subscription Plans".
• Now in the top right hand corner you will see a button called "+ New Plan". Click on it.
• Fill in the details:
  • Your plan name (example: Professional)
  • Select taxable category as "Standard Digital Goods"
  • Set your Billing interval to "Monthly" if you're going for monthly plans.
  • Set your trial period as 7 days. Again change it as per your requirements. Or you can leave it empty as well.
  • Leave the "Enable quantity" disabled. We don't need that.
  • Check "Select all currencies"
  • Enter your price in the "USD" column.
  • Scroll down and select "Save Plan"

Step 4: Testing the setup (recommended)

Now that your plan is created. You can copy your Plan ID. And use it as the "product id" in your button's HTML attribute.

Like this:

data-product="YOUR_PLAN_ID"

Great. Now your setup is all ready to go. One final thing before we wrap this...

We want to test it to make sure it's setup properly.

Go ahead and spin up the server for your NextJs app if you haven't already.

Open the application at localhost:3000 or whatever port you have it on.

Go to localhost:3000/payment and click on the button that you just set up. If the button doesn't appear for some reason - make sure to check you don't have any CSS applied that might make it hard to find on the page.

Once you click on the button - a dialog will pop up. Containing your checkout display.

Now go ahead and make a temporary coupon from the Paddle dashboard - so that you can test what it's like making a real payment - without actually paying for anything.

Step 5: Troubleshooting (optional)

At any point in this guide - if you feel like a script isn't loading or a button isn't appearing. Or maybe clicking of the button isn't working as expected. Make sure to check your browser's console for any errors and warnings.

Also because you are using NextJs. There might be some issues with the paddle API working from the server side. So you might want to wrap your code in a client side only code.

That can be done by making use of the dynamic imports in NextJs.

Like:

import dynamic from 'next/dynamic';

... your import here ...

Conclusion

Hopefully you are able to follow through and setup the Paddle checkout properly.

In case of any queries - go ahead and hit the team at Paddle.com. They are very supportive and will guide you through.

That's all for this guide. We recommend reading more about our loading scripts guide in NextJs. Check out blog homepage for more details.

Cheers!