Paddle Checkout
The Paddle checkout is a simple and elegant interface to take payments for your products or subscription plans on your web store. The checkout is powered by our Paddle.js
JavaScript library, which is simple enough to integrate in a matter of minutes for simple applications, while being flexible enough to support highly customized setups.
Implementing Paddle for the first time? Try our 10 minute setup guide.
Appearance
The quickest way to implement is by using our Overlay Checkout. This is an iframe that is displayed over your own webpage when the checkout is triggered. The checkout is customized with your product logo and brand color, and the user experience is optimized by us for maximum conversion.
If you prefer not to use the Overlay Checkout, you can also use the Inline Checkout (embedded in your page) or go off-site with a direct checkout link.
Import Paddle.js
The paddle.js library can be imported by linking to Paddle’s CDN resource. Following the inclusion of the library, you must call the Paddle.Setup()
method with your Paddle Vendor ID.
Please do not self-host Paddle.js, this will prevent you from receiving bug fixes and new features.
<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
Paddle.Setup({ vendor: 1234567 });
</script>
Your Paddle Vendor ID can be found on the Authentication page in your Paddle dashboard.
Invoking the basic checkout
You can make any clickable element on your page into a buy button, either by adding the paddle_button
class or by calling the Paddle.checkout.open()
method on a click
event. Using a Paddle Button is the simplest way to trigger the checkout.
By default, the buy button will be styled green. You can disable the styling by adding the property data-theme
with the value none
.
<a href="#!" class="paddle_button" data-product="12345">Buy Now!</a>
Invoking the flexible checkout
Invoking the checkout with a JavaScript click event makes it easier to flexibly and dynamically add custom parameters to a checkout:
<a href="#!" id="buy">Buy now!</a>
<script type="text/javascript">
function openCheckout() {
Paddle.Checkout.open({ product: 12345 });
}
document.getElementById('buy').addEventListener('click', openCheckout, false);
</script>
Customize the Checkout by passing parameters such as a user’s email address.