I am new to Paddle and I am not able to get anywhere with implementing it as a demo. I have gone through its documentation but couldn't get anywhere, I have setted up this loader:
import Script from "next/script";
export function PaddleLoader() {
return ( <
Script src = "https://cdn.paddle.com/paddle/v2/paddle.js"
onLoad = {
() => {
if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
Paddle.Environment.set("sandbox");
}
Paddle.Setup({
token: process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID,
});
}
}
/>
);
}
... which is used on a button click and opens up this Paddle model:
What should I do next? Where to get transaction id? and is the domain required to be verified?

You do need a verified domain to use Paddle on a live / production website but not in the sandbox. The sandbox will let any domain use it.
It looks like your issue is more to do with Content Security Policy preventing the iframe from loading. You can read about that for Next.js here: https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy