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. Here, we provide a step-by-step guide to achieve this using HTML, JavaScript, and a currency API.

Step-by-Step Guide

1. HTML Structure

First, we need a simple HTML structure to display the price. This includes a paragraph for the normal price and a section where the converted price will be displayed.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Price Converter</title>
</head>
<body>
  <p>Normal price: 5 USD</p>
  <div>
    <p>Price based on visitor currency: <span id="price">5 USD</span></p>
  </div>
</body>
</html>

2. Fetch Visitor Information

Using the fetch API, we can get the visitor's currency information from a service like https://apip.cc/json. This API provides details including the exchange rate from USD to the visitor's local currency.


fetch('https://apip.cc/json')
  .then(response => response.json())
  .then(data => {
    changePrice(data);
  })
  .catch(error => console.error('Error fetching visitor information:', error));

3. Convert and Display the Price

To convert the price, we use the visitor's currency exchange rate provided by the API. We then update the price displayed on the webpage accordingly.


function changePrice(visitorData) {
  const normalPriceUSD = 5; // Normal price in USD
  const usdRate = parseFloat(visitorData.USDRate.replace(/,/g, '')); // Remove commas and convert to float
  if (!isNaN(usdRate)) {
    const convertedPrice = normalPriceUSD * usdRate;
    displayPrice(convertedPrice, visitorData.Currency);
  } else {
    console.error('Invalid USD rate');
  }
}
function displayPrice(price, currency) {
  const priceElement = document.getElementById('price');
  priceElement.textContent = `${price.toFixed(2)} ${currency}`;
}

Full Code

Combining the HTML and JavaScript, we get the complete solution as shown below:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Price Converter</title>
</head>
<body>
  <p>Normal price: 5 USD</p>
  <div>
    <p>Price based on visitor currency: <span id="price">5 USD</span></p>
  </div>
  <script>
    fetch('https://apip.cc/json')
      .then(response => response.json())
      .then(data => {
        changePrice(data);
      })
      .catch(error => console.error('Error fetching visitor information:', error));
    function changePrice(visitorData) {
      const normalPriceUSD = 5; // Normal price in USD
      const usdRate = parseFloat(visitorData.USDRate.replace(/,/g, '')); // Remove commas and convert to float
      if (!isNaN(usdRate)) {
        const convertedPrice = normalPriceUSD * usdRate;
        displayPrice(convertedPrice, visitorData.Currency);
      } else {
        console.error('Invalid USD rate');
      }
    }
    function displayPrice(price, currency) {
      const priceElement = document.getElementById('price');
      priceElement.textContent = `${price.toFixed(2)} ${currency}`;
    }
  </script>
</body>
</html>

Explanation

  1. HTML Structure: Defines a simple layout with a normal price and a placeholder for the converted price.
  2. Fetch Visitor Information: Retrieves visitor data from the API.
  3. Change Price: Converts the normal price from USD to the visitor's currency using the exchange rate.
  4. Display Price: Updates the HTML to show the converted price.

This method ensures that visitors see prices in their local currency, potentially improving their shopping experience and increasing conversions.

Demo: JsFiddle