Build a Paddle Checkout in 10 Minutes

It’s super quick to get a Paddle checkout up and running on your website with just 5 lines of code. Follow the walkthrough below to import the Paddle JavaScript library and open the overlay checkout on your own store page.

Make sure you’ve:

1 - Created a one-time product or subscription plan in your Paddle dashboard before continuing.

2 - Added your approved domains in your Paddle vendor dashboard under Checkout > Checkout Settings > Approved Domains. Please note, that you don’t need this if you’re just testing on your localhost. Learn more about approved domains here.

Import the Paddle JavaScript library

On your test store page add the following code just before the closing </body> tag to import the Paddle.js library and run the checkout setup method:

Please do not self-host Paddle.js, this will prevent you from receiving bug fixes and new features.

<script src=""></script>
<script type="text/javascript">
	Paddle.Setup({ vendor: 1234567 });

Your Paddle Vendor ID can be found in the Developer Tools > Authentication page within your Paddle dashboard.

Add a checkout button

Any clickable element on your page can be made into a buy button by adding the paddle_button class and specifying the ID of the product you wish to use in the checkout:

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

You can find the product ID of your one-time product or subscription plan in the listing table under the Catalog section of your Seller Dashboard

Test your checkout

Click the green buy button and you will see an overlay checkout displayed on top of your test store page. To test the whole checkout without making a real payment, you can create a product coupon.

If the checkout fails to display, check the browser console for any error messages. If you continue to have problems, get in touch with our support team or use our online chat.

An example of an overlay checkout
An example of an overlay checkout