Set Up Multi-Currency Display & Checkout on Your Online Store

E-commerce merchants don't play by the same rules as their retail peers do. The business' field of operation is the whole, diverse, connected world. The potential market is international, not bound to a geographical territory. Lots of opportunities appear when physical borders disappear. It's a thrilling endeavour indeed, but it also comes with its share of challenges.

Offering multiple currencies on your online store is one of them. And an important one at that.

Potential customers will come from different countries, with different reference points. And what you want is to provide international customers with a localized shopping experience. You want to them to deal with known variables and feel comfortable. To not only to see on your site the currency they usually transact with, but to also be able to pay with it. Why? Because:

• Avoiding currency conversion on their credit card statement will save them extra fees.

• Displaying pricing in their local currency before & after checkout will remove friction from their shopping experience.

Happier, more loyal customers.

As for merchants, well:

• It'll reduce shopping cart abandonment rate & chargebacks.

• It'll boost conversion rates, and sales.

Healthier, more efficient e-commerce operation.

The good news is our latest feature supports that exact multi-currency scenario.

Multi-currency on your e-commerce site with Snipcart

Snipcart now allows you to accept payments from multiple currencies directly on your online store. If for instance, you need to support online payments in CAD, EUR & USD on your site, we have you covered. This multi-currency configuration section of our documentation will show you the three simple steps to do so:

1. Setting your different cart currency

2. Defining currency-specific product prices

3. Adding supported currencies in your merchant dashboard

In this post, we'll focus on showing how to display and accept multiple currencies on your site with Snipcart. To keep things simple, the demo website in this post will only have:

• One buy now product button to trigger our shopping cart

• One multi-currency dropdown button to choose a specific currency

Let's get to it.

1. Adding a multi-currency dropdown button

First step will be to create a dropdown button to allow customers to select the local currency they want to use for their transactions. Simple HTML can be used to do so:

<select id="currency">
  <option value="cad">CAD</option>
  <option value="usd">USD</option>
  <option value="eur">EUR</option>
</select>

For this demo, we'll set up three currencies: CAD, USD and EUR.

2. Defining our product with currency-specific pricing

Like all Snipcart products, this one will be defined using our simple HTML markup. The only difference is that we'll need to set different prices options depending on the currency. Again, our documentation can show you how. See this snippet for reference:

<button type="button" class="snipcart-add-item"
  data-item-name="Item"
  data-item-price='{"usd": 20.00, "cad": 30.00, "eur": 25.00}'
  data-item-id="ITEM"
  data-item-url="/multi-currency">
  Buy now
</button>

We now have to pass a JSON object to the data-item-price value. Each key of the JSON object is the currency code, and the value is the price. The price must be a number, and it's important to pass a valid JSON object with the double quotes (") around the keys.

3. Changing the shopping cart currency

So we have: a dropdown button to select multiple currencies and a product. We now need to use Snipcart's JavaScript API to match the cart currency with the dropdown option selected. More specifically, we'll use the setCurrency method of the JS API:

$(function() {
  $('#currency').change(function() {
    Snipcart.api.setCurrency($(this).val());
  });
});

With this method set up, whenever the dropdown value changes, the cart will also update to the right currency.

4. Setting default selected currency in the dropdown button

We also need to select the right currency by default. If customers added items to their cart after changing the currency, we must also keep updating the dropdown value to offer a coherent shopping experience. We will use our JavaScript events and the getCurrentCurrency method to do so.

First let's subscribe to the cart.ready event.

Snipcart.subscribe('cart.ready', function() {
});

In the callback, we're going to update the dropdown value with the current currency:

Snipcart.subscribe('cart.ready', function() {
  $('#currency').val(Snipcart.api.getCurrentCurrency());
});

To make sure that the dropdown value is always in sync with the cart currency, we can also subscribe to the currency.changed event.

Snipcart.subscribe('currency.changed', function (currency) {
  $('#currency').val(curency);
});

Conclusion

Completing this setup will step your e-commerce game up. You'll end up with a global e-commerce site offering tailored shopping experiences to customers. Both merchants and international customers will benefit from such an online store supporting multiple currencies.

Again, you can watch the functional parts of this come into play on our GitHub demo.

You can also have a look at our Guides & tutorials section to inspire you to push Snipcart's limits!

Thanks for reading, folks! :)

If you found this post valuable in any way, please, go ahead and send a tweet our way. We'd love that. And if you have questions or comments regarding this multi-currency setup, hit the comments or shoot us an email. We'd love to know more about your e-commerce projects!