Customize display currency

You can tailor the presentation of foreign currencies to suit your needs and preferences by customizing the currency display format in your JavaScript integration.

Currency display formats 

Hello supports the following currency display formats:

• symbol (default) - Display a localized currency symbol, e.g., €123.
• code - Use the ISO currency code, e.g., 123 USD.
• name - Display the localized currency name, e.g., 123 dollars.

You can override the currency display format by using the overrideCurrencyFormat property in the Zonos.init method. This property accepts one of the currency display formats listed above. Overriding the currency display format applies to both Hello and Zonos Checkout.

Zonos.init({
  overrideCurrencyFormat: "code",
});

Using a custom currency converter 

For cases when simply overriding the currency display format isn't sufficient for your site's needs, you can use a custom currency converter to handle the conversion and formatting of foreign currency amounts. This approach allows you to have full control over how currency amounts are displayed on your site.

To use a custom currency converter, you need to implement the currencyConverter function in the Zonos.init method. This function should accept the following parameters:

• convertAndFormat - A function that converts and formats the currency amount.
• originalAmount - The original currency amount.
• selector - The selector of the element containing the currency amount.

When present, the currencyConverter function will loop over all matching price selectors on your site and apply the custom currency conversion logic to each one.

One common use case for using a custom currency converter function is when you have prices displayed in a dropdown menu or other complex HTML elements. For example, if you have a dropdown menu with prices displayed next to each option, such as:

<select title="Option">
  <option className="money" data-select-option="Blue" value="option1">
    Blue - $1.99
  </option>
  <option className="money" data-select-option="Red" value="option2">
    Red - $2.00
  </option>
  <option className="money" data-select-option="Yellow" value="option3">
    Yellow - $3.59
  </option>
</select>

In cases like this, you can't simply select the price directly as there is additional text next to it. By using a custom currency converter, you can extract the price from the element and apply the currency conversion logic to it.

window.Zonos.init({
  currencyConverter: ({ convertAndFormat, originalAmount, selector }) => {
    const optionValue = selector.getAttribute("data-select-option");
    if (optionValue) {
      return `${optionValue} -  ${convertAndFormat(originalAmount)}`;
    }
    return convertAndFormat(originalAmount);
  },
});