HTML data attributes
Use HTML data attributes to pass parameters to a checkout, rather than using JavaScript properties.
You can use HTML data attributes to open a checkout with settings, items, and customer information. They're typically used with overlay checkouts.
Data attributes support all the same properties as the Paddle.Checkout.open() method, letting you:
- Set the initial items list or transaction that this checkout is for
- Set checkout settings, like the theme
- Prefill checkout properties, like customer email and country
- Send custom data to Paddle
Set data attributes on the element that you've turned into a Paddle Checkout button to open a checkout with the properties.
You must include Paddle.js and call Paddle.Initialize() to use HTML data attributes, but you don't need to use any other JavaScript if you're working with an overlay checkout. This is ideal when working with a CMS that has limited customization options, or if you're not comfortable with JavaScript.
List of attributes
Display mode for the checkout.
Theme for the checkout.
Language for the checkout.
URL to redirect to on checkout completion.
Whether the user can change their email once on the checkout.
List of items for this checkout. You must pass at least one item.
Paddle ID of the price for this item.
Quantity for this line item.
Paddle ID of an existing transaction to use for this checkout. Use this instead of an data-items array to create a checkout for a transaction you previously created.
Paddle ID of the customer for this checkout. Use if you know the customer, like if they're authenticated and making a change to their subscription. You can't use if you're passing data-customer-email.
Email for this customer. You can't use if you're passing data-customer-id.
Paddle ID for the customer address for this checkout. You can't use if you're passing data-customer-address-country-code or data-customer-address-postal-code.
Two-letter ISO 3166 country code for this customer. You can't use if you're passing data-customer-address-id.
ZIP or postal code of this address. Required for countries with postal codes. You can't use if you're passing data-customer-address-id.
State, county, or region of this address. Required if data-business- properties are passed.
City of this address. Required if data-business- properties are passed.
First line of this address. Required if data-business- properties are passed.
Paddle ID for the customer business for this checkout. You can't use if you're passing data-business-name or data-business-tax-id.
Name of the customer business. You can't use if you're passing data-business-id.
Tax or VAT Number of the customer business. You can't use if you're passing data-business-id.
Whether the option to add a discount is displayed at checkout. Defaults to true.
Discount code to apply to this checkout. Use to pre-populate a discount. Pass either data-discount-code or data-discount-id.
Paddle ID of a discount to apply to this checkout. Use to pre-populate a discount. Pass either data-discount-code or data-discount-id.
Custom key-value data to include with the checkout. Must be valid JSON and contain at least one key.
Examples
This example includes checkout settings and items.
1234567891011121314151617181<a href='#'
2 class='paddle_button'
3 data-display-mode='overlay'
4 data-theme='light'
5 data-locale='en'
6 data-items='[
7 {
8 "priceId": "pri_01gm81eqze2vmmvhpjg13bfeqg",
9 "quantity": 1
10 },
11 {
12 "priceId": "pri_01gm82kny0ad1tk358gxmsq87m",
13 "quantity": 1
14 }
15 ]'
16>
17 Buy now
18</a>You can prefill checkout properties to speed up checkout.
This example includes customer, address, and business information. Checkout is opened with this information prefilled, so customers land on the payment screen.
12345678910111213141516171819201<a href='#'
2 class='paddle_button'
3 data-display-mode='overlay'
4 data-theme='light'
5 data-locale='en'
6 data-items='[
7 {
8 "priceId": "pri_01gm81eqze2vmmvhpjg13bfeqg",
9 "quantity": 1
10 },
11 {
12 "priceId": "pri_01gm82kny0ad1tk358gxmsq87m",
13 "quantity": 1
14 }
15 ]'
16 data-customer-email='weloveyourproduct@paddle.com'
17 data-customer-address-country-code='US'
18 data-customer-address-postal-code='92663'
19 data-customer-address-region='California'
20 data-customer-address-city='Newport Beach'
You can pass Paddle IDs for customers, addresses, and businesses to build upgrade workflows for logged-in customers.
This example includes a customer ID, address ID, and business ID. Checkout is opened with this information prefilled, so customers land on the payment screen.
data-allow-logout is false, hiding the option to change the customer on the opened checkout.
12345678910111213141516171819201<a href='#'
2 class='paddle_button'
3 data-display-mode='overlay'
4 data-theme='light'
5 data-locale='en'
6 data-allow-logout='false'
7 data-items='[
8 {
9 "priceId": "pri_01gm81eqze2vmmvhpjg13bfeqg",
10 "quantity": 1
11 },
12 {
13 "priceId": "pri_01gm82kny0ad1tk358gxmsq87m",
14 "quantity": 1
15 }
16 ]'
17 data-customer-id='ctm_01gm82kny0ad1tk358gxmsq87m'
18 data-customer-address-id='add_01gm82v81g69n9hdb0v9sw6j40'
19 data-business-id='biz_01gnymqsj1etmestb4yhemdavm'
20>
