paddle not working in next 13
Hello everyone,
I'm trying to add paddle to my next 13 app project but I'm getting weird errors, soo I was wondering if maybe someone had similar issue
soo i have my client code, vendor id is used here just as example
in console I'm getting
and also
"use client";
import Script from "next/script";
import { createContext, useContext, useEffect, useState } from "react";
type PaddleContext = any;
const PaddleContext = createContext<PaddleContext>(null);
const usePaddleContext = () => {
const context = useContext(PaddleContext);
if (context === undefined) {
throw new Error("usePaddleContext was used outside of its Provider");
}
return context;
};
const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
const [paddle, setPaddle] = useState(null);
return (
<PaddleContext.Provider value={paddle}>
<Script
strategy="afterInteractive"
src="https://cdn.paddle.com/paddle/v2/paddle.js"
onLoad={() => {
Paddle.Environment.set("sandbox");
Paddle.Setup({ vendor: 123123 });
setPaddle(Paddle);
}}
/>
{children}
</PaddleContext.Provider>
);
};
export { PaddleProvider, PaddleContext, usePaddleContext };
"use client";
import Script from "next/script";
import { createContext, useContext, useEffect, useState } from "react";
type PaddleContext = any;
const PaddleContext = createContext<PaddleContext>(null);
const usePaddleContext = () => {
const context = useContext(PaddleContext);
if (context === undefined) {
throw new Error("usePaddleContext was used outside of its Provider");
}
return context;
};
const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
const [paddle, setPaddle] = useState(null);
return (
<PaddleContext.Provider value={paddle}>
<Script
strategy="afterInteractive"
src="https://cdn.paddle.com/paddle/v2/paddle.js"
onLoad={() => {
Paddle.Environment.set("sandbox");
Paddle.Setup({ vendor: 123123 });
setPaddle(Paddle);
}}
/>
{children}
</PaddleContext.Provider>
);
};
export { PaddleProvider, PaddleContext, usePaddleContext };
Uncaught Error: [PADDLE] You must specify your Paddle Seller ID within the Paddle.Setup() method. See: https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout
at t.Setup (paddle.js:1:30692)
at HTMLScriptElement.onLoad (webpack-internal:///(:3000/app-pages-browser)/./src/components/paddle/PaddleProvider.tsx:38:28)
at HTMLScriptElement.eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/script.js:99:24)
Uncaught Error: [PADDLE] You must specify your Paddle Seller ID within the Paddle.Setup() method. See: https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout
at t.Setup (paddle.js:1:30692)
at HTMLScriptElement.onLoad (webpack-internal:///(:3000/app-pages-browser)/./src/components/paddle/PaddleProvider.tsx:38:28)
at HTMLScriptElement.eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/script.js:99:24)
[Report Only] Refused to frame 'https://sandbox-buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".
[Report Only] Refused to frame 'https://sandbox-buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".
0 Replies