Paddle Billing
Search

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

data-display-modestring

Display mode for the checkout.

data-themestring

Theme for the checkout.

data-localestring

Language for the checkout.

data-success-urlstring<uri>

URL to redirect to on checkout completion.

data-allow-logoutboolean

Whether the user can change their email once on the checkout.

data-allow-discount-removalboolean

Whether the user can remove an applied discount at checkout. Defaults to true.

data-itemsarray[object]

List of items for this checkout. You must pass at least one item.

priceIdstring<Paddle ID>

Paddle ID of the price for this item.

quantitynumber

Quantity for this line item.

data-transaction-idstring<Paddle ID>

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.

data-customer-idstring<Paddle ID>

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.

data-customer-emailstring<email>

Email for this customer. You can't use if you're passing data-customer-id.

data-customer-address-idstring<Paddle 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.

data-customer-address-country-codestring

Two-letter ISO 3166 country code for this customer. You can't use if you're passing data-customer-address-id.

data-customer-address-postal-codestring

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.

data-customer-address-regionstring

State, county, or region of this address. Required if data-business- properties are passed.

data-customer-address-citystring

City of this address. Required if data-business- properties are passed.

data-customer-address-first-linestring

First line of this address. Required if data-business- properties are passed.

data-business-idstring<Paddle ID>

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.

data-business-namestring

Name of the customer business. You can't use if you're passing data-business-id.

data-business-tax-idstring

Tax or VAT Number of the customer business. You can't use if you're passing data-business-id.

data-show-add-discountsboolean

Whether the option to add a discount is displayed at checkout. Defaults to true.

data-discount-codestring

Discount code to apply to this checkout. Use to pre-populate a discount. Pass either data-discount-code or data-discount-id.

data-discount-idstring<Paddle 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.

data-custom-dataobject

Custom key-value data to include with the checkout. Must be valid JSON and contain at least one key.

Examples

Related pages