Now, we have just done a revamp of our own HR Partner pricing page, which actually meets most of the suggestions of what they talked about in the podcast, i.e. offering multiple currencies, showing the user's local currency automatically upon loading, showing monthly vs annual pricing etc.

Our page is quite complex (but thankfully I have a great UX designer on my team who made it as easy to use as possible), but I thought I would expand upon a couple of things that we did on there in order to display pricing in various currencies, and most importantly, how we detected the user's location and showed them the relevant pricing in their own local currency (or else defaulting back to USD if they were in a location outside of our usual pricing).

What I have done is to put together a simple pricing page on Github which you are welcome to explore and dissect. My aim was to be able to achieve localised pricing with (a) minimal javascript code, (b) doing it all on one page and (c) for absolutely FREE - no calling upon expensive landing page or A/B testing services to generate different pricing pages at all!

Firstly, I am using a simple Bootstrap 4 page layout, which has a header block, then 4 columns for the pricing. If you look at each pricing column though, I have included the 4 currencies that I want to show:

But have a look at the `collapse` class used in all but the USD pricing in the source code. What this does is 'collapses' the other currencies so that they are not visible upon page load, instead showing you the USD pricing as a default.

I have also given all the pricing <h4> tags the class of `pricing` and `XXX_pricing` (where XXX is the 3 letter currency code for each locale). You will see how I use these later to both hide and show the relevant pricing via a simple javascript function.

Now lets look at the javascript code at the bottom of the page. There are two blocks we need to look at, namely:

This bit of code waits until the page is completely loaded, then goes off to the IPData.co free service to query the user's locale information, including the currency code associated with their locale.

This information is contained within the JSON response from the IPData service, and you can get to it via the response.currency.code variable.

Be warned that this call, even though it is done as a background asynchronous AJAX call, can take a few seconds to return a result - which is why we show the default USD pricing initially, rather than no pricing at all. This can cause a disconcerting flicker upon page load, so you may want to show NO pricing on your own page as a default, which you can do by adding the `collapse` class to ALL pricing lines initially. It is entirely up to you.

TIP: Just remember to replace the 'xxxxxxxxx' dummy API key above with your free one that you get from IPData.co!

The next bit of javascript is the one that manipulates the page DOM to show or hide the relevant currencies:

displayPrice=function(currency) {
// First, lets hide all the current pricing$(".pricing").hide();
// Is the currency within the valid range of currencies that we wish to show?if (currency!==null|| (["USD", "AUD", "GBP", "EUR"].indexOf(currency) >-1)) {
// If yes, then show the currency$("."+currency+"_pricing").show();
} else {
// If no, then just show USD pricing$(".USD_pricing").show();
}
}

This function takes just one parameter, the 3 letter currency code, and then it:

Hides ALL the pricing lines by default, then

Checks the currency code to see if it is one of the 4 allowed codes on our page, then

If it is allowed, shows the pricing which has the class of `[Currency Code]_pricing`, or

Shows the default USD pricing lines.

One last thing - I realise that sometimes users may want to see the pricing in other currencies themselves, rather than in their local currency. Most often when they want to compare the USD values against other services they use etc., so we should allow them the ability to do so.

Which is why I placed the button group between the header and the pricing boxes which asks for the currency they want to see. Clicking on any of the buttons will call the `displayPrice()` function to show that locale's currency.