How to Add Dynamic Pricing to Your Marketing Website
Hi, I'm Alex and welcome to the Boathouse paddle series where we look at everything concerning Paddle. In today's demo, I'm going to show you how to add dynamic pricing to your marketing website or any website that you want to display a product price on. Dynamic pricing means the data - the price - gets taken from your Paddle account directly instead of you manually having to type it or update it. It'll just use the information from Paddle. If you have price overrides for certain currencies in countries, or if you have automatic currency conversion enabled in Paddle, it will always show the local price for that user. Paddle knows where the user is coming from, which country based on their browser, so it will collect the information that's correct for that country.
Extending the Previous Paddle Checkout Button Example
To do that, I'm gonna extend the example that we used in the Paddle checkout button in the previous video. So go and have a look at that if you haven't done that already.
Adding a Text Field for Dynamic Pricing
What I'm going to do is add a text field just underneath the title here and I'm going to empty the text. I'm just going to put a dash here because we're going to replace this with the price later on. Then I'm going to go under settings and add an ID to this element.
Now why do I need an ID? Well, we’ll see in a JavaScript snippet that we use. I need to reference this element to be able to replace the text here with the price that Paddle returns.
Using JavaScript Snippets from Paddle
Once I've done that, I need this JavaScript that I spoke of. Now, on the Paddle developer documentation site, there are code snippets. You can see this build a pricing page which has a full example of adding multiple products and different country selectors, monthly yearly options. And you can see very complex code here on how to add those prices in. We're going to use a very, very simple example.
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script>
Paddle.Environment.set("sandbox");
Paddle.Initialize({
token: 'test_changeme',
pwCustomer: {}
});
Paddle.PricePreview({
items: [{
priceId: 'pri_changeme',
quantity: 1
}]
})
.then((result) => {
document.getElementById('price').innerHTML = result.data.details.lineItems[0].formattedTotals.total
})
</script>
In this snippet, we're referencing a product from my account, again asking it to give me the price for one quantity. This will call out to Paddle to get that information without needing to do anything specific to get the country information - that's all done automatically by Paddle. Here's the part where I replace the price text field that I added with the formatted total for this particular price.
Copying and Pasting into Your CMS
So I'm going to copy this and going into my CMS again. If you remember, we added an embed field here where we added the Paddle JS. This is the script and the setup, the environment. Now, just underneath the initialization, I'm going to paste this snippet and hit done.
And if I save this page now and view the site online, we'll see Paddle replaces the pricing text here with the price that's configured in Paddle.
Updating the Price
Just to show you that this is correct, we can go over here and edit this price and increase it to 129. Save that. And if we go back to refresh this page now, the updated price is here. So you're only managing your prices in one place, the Paddle account. No need to update all your pricing tables, the marketing websites, and so on. You can just dynamically load this information.
Conclusion
That's all for today. Adding dynamic pricing to your website can streamline your workflows and ensure that your customers always see the correct local pricing. Happy coding!
"Dynamic pricing automates price management, ensuring your website reflects real-time pricing dynamically."
For more details, refer to the Paddle developer documentation at Paddle Docs.
