Paddle.com overlay checkout not working from localhost

Question

I am trying to get a simple paddle.com overlay checkout working from a local hosted Django site - I'm using the sandbox for now. Currently I am just getting a "something went wrong" dialog when I try and open the checkout.

I think I am following all the steps:

I am including the following js in the webpage that is trying to show the checkout:

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
Paddle.Environment.set('sandbox');
Paddle.Setup({
    vendor:  xxxx,
});
</script>

And then in the html later on in this page I have a button that I am pressing:

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

I have also set up the address in the sandbox checkout settings to be the url of the same page:

https://localhost:8000/account/subscription

When I press the "Buy Now" button I get the “something went wrong” dialog box coming up. I notice in Firefox developer console that it is trying to do an http get on:

https://sandbox-create-checkout.paddle.com/v2/checkout/product/pri_xxxxxxxx/?product=pri_xxxxxxxxx&parentURL=https://localhost:8000/account/subscription&parent_url=https://localhost:8000/account/subscription&referring_domain=localhost:8000 / localhost:8000&display_mode=overlay&apple_pay_enabled=false&paddlejs-version=2.0.72&vendor=xxxxx&checkout_initiated=1695581565275&popup=true&paddle_js=true&is_popup=true

And when I try and do a get on this link manually I get the following JSON back:

{"errors":[{"status":404,"code":"error-creating-checkout","details":"Error creating the checkout"}]}

I can also see a Cross-Origin Request Blocked error code in the console too – so I don’t know if that has something to do with it.

Also in case it is related: I installed mkcert and made a local ssl cert so that I could run the local site in https - otherwise I think it would try and send an http link and that I assume will not work.

Any pointers on what I can do to debug what is going on would be most welcome.

Answer 1

The issue was that I was using jsheaders generated by dj-paddle - looks like this is very out of date - the paddle js should read:

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>

removing dj-paddle and putting the correct code in diretcly solved the issue.