Paddle Billing
Search

Build pricing pages with Paddle.js

Build pricing pages without making server-side calls to the Paddle API using a new method in Paddle.js.

What's new?

We added a new Paddle.PricePreview() method to Paddle.js that you can use to get localized pricing for items and location information.

It's ideal for building pricing pages, and other pages in your app that present calculated totals for prices, including discounts, taxes, and currency conversion.

Short animation showing switching between countries. There is a country selector and when a country is chosen, prices in the pricing table change. There are options for USA, United Kingdom, Spain, India, and other.

How it works

You can use the preview prices operation in the Paddle API to get pricing calculations for a list of prices given location information. It's typically used to build pricing pages, letting you present customers with localized prices in the correct currency for a country, with estimated taxes and discount calculations too.

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

This means you can build pricing pages using Paddle.js only. You don't need to make any server-side requests to the Paddle API.

The Paddle.PricePreview() method requires a client-side token for authentication. If you're passing the older seller parameter to Paddle.Initialize(), replace this with the token parameter.

Examples

This example includes a request with two items where the country code is the United States.

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

Next steps

This change is live in Paddle.js now, so you can start using Paddle.PricePreview() when you're ready. We updated our build a pricing page tutorial and prepped a sample page that you can use to get started.

If you have an existing implementation that passes the seller parameter to Paddle.Initialize(), you'll need to replace this with the token parameter and a client-side token.

You don't need to do anything to get the latest version of Paddle.js — we serve the latest version automatically.

Learn more