DEV Community

Cover image for How to Add Currency Conversion to Your App in 5 Minutes
allratestoday
allratestoday

Posted on

How to Add Currency Conversion to Your App in 5 Minutes

I recently needed to add currency conversion to a project. After trying several APIs that were either too expensive or required a credit card for the "free" tier, I decided to build my own.

Here's how you can add currency conversion to your app in under 5 minutes.

## Get Your Free API Key

Head to allratestoday.com/developers and sign up. You'll get:

  • 100 free requests/day
  • 150+ currencies
  • Real-time and historical rates
  • No credit card required

## JavaScript Example


javascript
  const API_KEY = 'your_api_key';

  async function convertCurrency(amount, from, to) {
    const response = await fetch(
      `https://allratestoday.com/api/v1/rates?source=${from}&target=${to}`,
      {
        headers: {
          'Authorization': `Bearer ${API_KEY}`
        }
      }
    );

    const data = await response.json();
    const rate = data[0].rate;

    return {
      amount,
      from,
      to,
      rate,
      result: amount * rate
    };
  }

  // Usage
  const result = await convertCurrency(100, 'USD', 'EUR');
  console.log(`$100 = €${result.result.toFixed(2)}`);
  // Output: $100 = €92.00

  Python Example

  import requests

  API_KEY = 'your_api_key'
  BASE_URL = 'https://allratestoday.com/api/v1'

  def convert_currency(amount, source, target):
      response = requests.get(
          f'{BASE_URL}/rates',
          params={'source': source, 'target': target},
          headers={'Authorization': f'Bearer {API_KEY}'}
      )

      data = response.json()
      rate = data[0]['rate']

      return {
          'amount': amount,
          'from': source,
          'to': target,
          'rate': rate,
          'result': amount * rate
      }

  # Usage
  result = convert_currency(100, 'USD', 'EUR')
  print(f"$100 = €{result['result']:.2f}")
  # Output: $100 = €92.00

  Getting Historical Rates

  Need the exchange rate from a specific date? Just add the time parameter:

  // Get USD to EUR rate from January 1st, 2024
  const response = await fetch(
    'https://allratestoday.com/api/v1/rates?source=USD&target=EUR&time=2024-01-01T00:00:00Z',
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    }
  );

  Getting Rate History

  For charts or analytics, you can fetch a range of historical rates:

  // Get daily rates for the past month
  const response = await fetch(
    'https://allratestoday.com/api/v1/rates?' + new URLSearchParams({
      source: 'USD',
      target: 'EUR',
      from: '2024-01-01',
      to: '2024-01-31',
      group: 'day'
    }),
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    }
  );

  const history = await response.json();
  // Returns array of daily rates

  Building a React Component

  Here's a simple currency converter component:

  import { useState } from 'react';

  function CurrencyConverter() {
    const [amount, setAmount] = useState(100);
    const [result, setResult] = useState(null);

    async function convert() {
      const response = await fetch(
        `https://allratestoday.com/api/v1/rates?source=USD&target=EUR`,
        {
          headers: {
            'Authorization': `Bearer ${process.env.REACT_APP_API_KEY}`
          }
        }
      );

      const data = await response.json();
      setResult(amount * data[0].rate);
    }

    return (
      <div>
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
        <button onClick={convert}>Convert USD to EUR</button>
        {result && <p>Result: €{result.toFixed(2)}</p>}
      </div>
    );
  }

  Supported Currencies

  The API supports 150+ currencies including:
  - Major: USD, EUR, GBP, JPY, CHF, CAD, AUD
  - Crypto: BTC, ETH, and more
  - Metals: XAU (gold), XAG (silver)

  Rate Limits

  The free tier includes 100 requests per day, which is enough for most side projects and MVPs.

  Links

  - Documentation: https://allratestoday.com/developers
  - GitHub: https://github.com/allratestoday/exchange-rates-api

  ---
  What are you building? Let me know in the comments if you have any questions!

  ---
Enter fullscreen mode Exit fullscreen mode

Top comments (0)