Price Converter

How to Change Price Based on Visitor Currency Changing the price on your website based on the visitor's currency can enhance user experience by providing localized pricing

by apipcc

HTML

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

JavaScript

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();