Paddle Checkout (Web)

The Paddle checkout is an 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 to get a basic checkout running on your store page.

Appearance

We recommend that you use 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 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>

Note: Your Paddle Vendor ID can be found on the settings page of your Paddle account, within the ‘Integrations’ tab.

Invoking the checkout

You can make any clickable element on your page into a buy button, either by adding the paddle_button CSS 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:

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

By default, a button with the paddle_button class will be styled green. You can reset the style by adding the property data-theme with the value none.

Invoking the checkout with a JavaScript click event makes it easier to flexibly and dynamically add custom parameters to a checkout:

Javascript

<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>

jQuery

<a href="#!" id="buy">Buy now!</a>
<script type="text/javascript">
	function openCheckout() {
		Paddle.Checkout.open({ product: 12345 });
	}
	$('#buy').click(openCheckout);
</script>

Passing parameters to the checkout

The checkout experience can be customized by passing in parameters, either as fields in the JavaScript object passed to the Paddle.Checkout.open() method or as data attributes if using the paddle_button class.

For example, you can collect a buyer’s email address as part of an earlier user flow and pass the value to the checkout so there is no need for the buyer to enter it a second time:

Javascript

<form id="pre-checkout">
	<input id="useremail" type="text" placeholder="Email address">
</form>
<a href="#!" id="buy">Buy Now!</a>

<script type="text/javascript">
	function openCheckout() {
		var form = document.getElementById('pre-checkout');
		Paddle.Checkout.open({
			product: 12345,
			email: form.useremail.value
		});
	}
	document.getElementById('buy').addEventListener('click', openCheckout, false);
</script>

jQuery

<form id="pre-checkout">
	<input id="useremail" type="text" placeholder="Email address">
</form>
<a href="#!" id="buy">Buy Now!</a>

<script type="text/javascript">
	function openCheckout() {
		Paddle.Checkout.open({
			product: 12345,
			email: $('#useremail').val()
		});
	}
	$('#buy').click(openCheckout);
</script>

If using the paddle_button class, you can also pass an email to the checkout by adding the data-email attribute to your button.

Sending additional user data

You may want to collect and pass through additional data about a user that is not needed to process the transaction, for example a user ID linked to your platform or information for marketing campaign lists.

If collecting personal data, please make sure that your data processing is compliant with necessary data protection regulation, including the GDPR.

These fields can be added to the passthrough string parameter. Any data added to this parameter will be saved and sent in any subsequent webhook alerts that you set up on your Seller Dashboard. While any string can be used as the passthrough value, you may find it easiest to handle the data by using an escaped JSON format as in the example below where a user ID and company affiliation are added:

Paddle.Checkout.open({
	product: 12345,
	passthrough: "{\"user_id\": 98765, \"affiliation\": \"Acme Corp\"}"
});

Next Steps

Questions about Paddle?

If you need any help regarding your Paddle integration, please get in touch with our Customer Success team using the form below.