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
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),
});
}}
/>
);
}
Next, include PaddleLoader in your page
import { PaddleLoader } from "...";
export default function Page() {
return (
<>
<PaddleLoader />
<button
onClick={() => {
Paddle.Checkout.open({
product: "...",
});
}}
>
Buy
</button>
</>
);
}
If you use TypeScript, you should create a file called types.d.ts in the root of your project.
declare global {
var Paddle: any;
}
Top comments (0)