Preview transactions using Paddle.js

What's new?

We added a new Paddle.TransactionPreview() method to Paddle.js that you can use to get a transaction preview for items and location information.

It's ideal for building cart-style pricing pages and other pages in your app that present overall totals for items and location information.

How it works

You can use the transaction preview operation in the Paddle API to return a transaction preview for a list of prices given location information. It's typically used for previewing overall totals for a list of items without creating a transaction entity.

The new Paddle.TransactionPreview() method lets you use Paddle.js to get a transaction preview. It accepts a parameter for a request that shares the same request body as the preview a transaction operation in the API, except field names must be camelCase. It returns a promise that contains an object that matches the response from the preview a transaction operation, with camelCase field names.

This means you can get transaction previews using Paddle.js only. You don't need to make any server-side requests to the Paddle API. It's especially useful for creating more advanced, dynamic pricing pages where users can build their own plans by picking items and adjusting quantities.

What about Paddle.PricePreview()?

The Paddle.PricePreview() method is specifically designed for building simple pricing pages, using the preview prices operation. Paddle.TransactionPreview() can be used to build pricing pages, but is typically better for more advanced, cart-style pricing pages where users can build their own plans.

Examples

This example includes a request with two items where the country code is the United States and the currency code is USD. One of the items is excluded from the totals using the includeInTotals field. It also passes a discount.

The request is passed to Paddle.TransactionPreview(), which returns a promise. It prints the response to the console.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1var request = {
2  items: [
3    {
4      quantity: 20,
5      priceId: "pri_01gsz8z1q1n00f12qt82y31smh"
6    },
7    {
8      quantity: 1,
9      priceId: "pri_01gsz98e27ak2tyhexptwc58yk",
10      includeInTotals: false
11    }
12  ],
13  discountId: "dsc_01gtgztp8fpchantd5g1wrksa3",
14  address: {
15    countryCode: "US"
16  },
17  currencyCode: "USD"
18}
19
20Paddle.TransactionPreview(request)

Next steps

This change is live in Paddle.js now, so you can start using Paddle.TransactionPreview() 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.

Learn more