DEV Community

Andrei Canta
Andrei Canta

Posted on • Edited on • Originally published at deiucanta.com

How to integrate Paddle.js with Next.js?

#nextjs #paddle #typescript

This article was originally posted on my personal blog.

First, you should add some variables into your .env file.

PADDLE_VENDOR_ID=... PADDLE_VENDOR_AUTH_CODE=... PADDLE_SANDBOX=true NEXT_PUBLIC_PADDLE_VENDOR_ID=$PADDLE_VENDOR_ID NEXT_PUBLIC_PADDLE_SANDBOX=$PADDLE_SANDBOX
Enter fullscreen mode Exit fullscreen mode

Next, create a component called PaddleLoader.

import Script from "next/script"; export function PaddleLoader() { return ( <Script src="https://cdn.paddle.com/paddle/paddle.js" onLoad={() => { if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) { Paddle.Environment.set("sandbox"); } Paddle.Setup({ vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID), }); }} /> ); }
Enter fullscreen mode Exit fullscreen mode

Next, include PaddleLoader in your page

import { PaddleLoader } from "..."; export default function Page() { return ( <> <PaddleLoader /> <button onClick={() => { Paddle.Checkout.open({ product: "...", }); }} > Buy </button> </> ); }
Enter fullscreen mode Exit fullscreen mode

If you use TypeScript, you should create a file called types.d.ts in the root of your project.

declare global { var Paddle: any; }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)