Pass a discount code to Paddle.js
We added a new parameter and HTML data attribute to Paddle.js to let you pass a discount code when opening a checkout.
What's new?
We added a new parameter to the Paddle.Checkout.open()
method that you can use to pass a discount code to Paddle.js when opening a checkout:
Discount code to apply to this checkout. Use to pre-populate a discount. Pass either discountCode
or discountId
.
We also added a corresponding HTML data attribute:
Discount code to apply to this checkout. Use to pre-populate a discount. Pass either data-discount-code
or data-discount-id
.
This complements the existing discountId
parameter and data-discount-id
HTML data attribute, which let you pass the Paddle ID of a discount when opening a checkout.
How it works
Previously, you could pass discountId
or use the data-discount-id
HTML data attribute to pre-populate a discount when opening a checkout. These fields accept the Paddle ID of a discount entity.
The new discountCode
parameter and data-discount-code
HTML data attribute let you pass a discount code instead. This means that if you know the discount code for a discount, you don't need to make an additional call to the API or use the Paddle dashboard to get its ID.
Discount codes are set against discount entities in Paddle. They're optional, letting you create a customer-facing code that customers can enter at Checkout, sometimes called "coupons."
Examples
This example shows a discount code passed to Paddle.Checkout.open()
.
There's no settings
object, so checkout settings must be included in Paddle.Initialize()
.
1234567891011121314151var itemsList = [
2 {
3 priceId: 'pri_01gm81eqze2vmmvhpjg13bfeqg',
4 quantity: 1
5 },
6 {
7 priceId: 'pri_01gm82kny0ad1tk358gxmsq87m',
8 quantity: 1
9 }
10];
11
12Paddle.Checkout.open({
13 items: itemsList,
14 discountCode: "BF20OFF"
15});
This example shows a discount code being passed as an HTML data attribute against a Paddle Checkout element.
It includes checkout settings and items.
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-discount-code='BF20OFF'
18>
19 Buy now
20</a>
Next steps
This change is live in Paddle.js now, so you can start using discountCode
or data-discount-code
when you're ready.
You don't need to do anything to get the latest version of Paddle.js — we serve the latest version automatically.