How to Change Price Based on Visitor Currency

In this tutorial, we will build a simple JavaScript-based currency converter that automatically displays prices in the visitor’s local currency. We’ll use two public APIs from apip.cc: one for detecting the visitor’s currency and another for fetching live exchange rates.

Final Working Example

Here’s the complete HTML code for our automatic price converter. You can copy and paste it directly into your website.

	
  <p>Normal price: 5 USD</p>
  <div>
    <p>Price based on visitor currency: <span id="price">Loading...</span></p>
  </div>

  <script>
    const normalPriceUSD = 5;

    async function loadPrices() {
      try {
        // Get visitor info (includes country and currency)
        const visitorRes = await fetch('https://apip.cc/json');
        const visitorData = await visitorRes.json();
        const userCurrency = visitorData.Currency;

        // Get currency rates (base: USD)
        const rateRes = await fetch('https://apip.cc/rates.json');
        const rateData = await rateRes.json();

        const rates = rateData.rates;
        const rate = rates[userCurrency];

        if (rate) {
          const converted = normalPriceUSD * rate;
          displayPrice(converted, userCurrency);
        } else {
          displayPrice(normalPriceUSD, "USD");
          console.warn("Currency not found:", userCurrency);
        }
      } catch (error) {
        console.error('Error fetching currency data:', error);
        displayPrice(normalPriceUSD, "USD");
      }
    }

    function displayPrice(price, currency) {
      const priceElement = document.getElementById('price');
      priceElement.textContent = `${price.toFixed(2)} ${currency}`;
    }

    loadPrices();
  </script>

Step-by-Step Explanation

1. Setting up the Base HTML Structure

We start with a simple HTML page that contains two main elements:

• <p>Normal price: 5 USD</p> — displays the base price in USD.
• <span id="price"> — where the converted price will appear once the script runs.

2. Defining the Normal Price

Inside the script, we define our base price in USD:

const normalPriceUSD = 5;

This value will later be multiplied by the exchange rate to calculate the equivalent price in the visitor’s currency.

3. Detecting Visitor’s Currency

We use the https://apip.cc/json API to automatically detect the visitor’s country and currency based on their IP address:

const visitorRes = await fetch('https://apip.cc/json');
const visitorData = await visitorRes.json();
const userCurrency = visitorData.Currency;

This returns data like {"Country": "Indonesia", "Currency": "IDR"}.

4. Getting Live Exchange Rates

Next, we fetch live exchange rates from https://apip.cc/rates.json. This API returns a large JSON object with currency rates relative to USD:

{
  "base": "USD",
  "rates": {
    "IDR": 16637.55,
    "JPY": 153.98,
    "EUR": 0.86,
    ...
  }
}

5. Converting the Price

After getting the user’s currency and the rate list, we look up their exchange rate and calculate the converted price:

const rate = rates[userCurrency];
const converted = normalPriceUSD * rate;

If the user’s currency is not found, the script simply falls back to USD.

6. Displaying the Result

The final price is displayed in the HTML using the displayPrice() function:

function displayPrice(price, currency) {
  const priceElement = document.getElementById('price');
  priceElement.textContent = `${price.toFixed(2)} ${currency}`;
}

7. Running the Script Automatically

Finally, the script calls loadPrices() as soon as the page loads:

loadPrices();

Result

When visitors open your page, they’ll instantly see the product price converted to their local currency — without needing to click anything. This provides a better user experience and makes your pricing globally friendly.

Key Benefits

• Automatic currency detection via IP
• Real-time exchange rates
• No need for external libraries
• Lightweight and easy to integrate

Conclusion

By combining apip.cc/json and apip.cc/rates.json, you can easily add automatic currency conversion to any website. This small script improves usability for international visitors and gives them a clear understanding of your prices in their own currency.

Demo: JsFiddle