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

UPDATE 2025

In general, Paddle, In production & sandbox environment allows only public access domain name, aka by typing : localhost -> WONT WORK.

How did I solve it? in short I used Ngrok.

HOW-TO:

step one install ngrok ( I am using Mac):

 brew install ngrok

run ngrok the <> (3000) should be the localhost:<> u are using

ngrok http 3000

Next, now ngrok will bring you a public domain for you app:

<<somthing>>.ngrok-free.app

go in sandbox dashboard to website approval (under checkout) and add this domain.

last step but dont forget it! (I was 1 hour searching for it), go to checkout (same as the one before and choose , checkout settings and add the domain name under : Default payment link

that's it!

this is how you can run "locally" sandbox and check full flow of transactions.