# How to build currency conversion in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Display real-time currency conversion in Bubble by connecting to a free exchange rate API through the API Connector, letting users select their preferred currency from a dropdown, and dynamically converting prices. This tutorial covers API setup, caching rates in a database to minimize calls, and displaying multi-currency prices.

## Overview: Currency Conversion in Bubble

Currency conversion lets your app display prices in multiple currencies — essential for international e-commerce and financial tools. This tutorial connects Bubble to a free exchange rate API, builds a currency selector, and converts amounts dynamically without excessive API calls.

## Before you start

- A Bubble account with an app
- A free API key from exchangerate-api.com or similar
- Basic understanding of the API Connector plugin

## Step-by-step guide

### 1. Set up the exchange rate API

Go to Plugins → API Connector → Add new API called 'ExchangeRate.' Add a GET call: https://v6.exchangerate-api.com/v6/YOUR_KEY/latest/USD. Set Use as Data. Mark the key as Private. Initialize the call to map the response.

```
GET https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/USD

Response:
{
  "result": "success",
  "conversion_rates": {
    "EUR": 0.92,
    "GBP": 0.79,
    "JPY": 149.50
  }
}
```

**Expected result:** The API returns exchange rates for all currencies.

### 2. Create a Currency Option Set

Go to Data → Option sets → Create 'Currency' with options: USD, EUR, GBP, JPY, CAD, AUD. Add a 'symbol' attribute for each ($, €, £, ¥, C$, A$).

**Expected result:** Currency Option Set available for dropdowns throughout the app.

### 3. Build the currency selector

Add a Dropdown on your header with data source: All Currencies. When selected, save to a custom state or User record. Default to USD.

**Expected result:** Users can pick their preferred display currency.

### 4. Convert and display prices dynamically

On Page is loaded, fetch the exchange rate for the user's selected currency and store in a custom state 'exchange_rate.' Display prices as: original_price × exchange_rate, formatted with the currency symbol.

> Pro tip: Cache rates in a database record to avoid API calls on every page load.

**Expected result:** Prices display in the selected currency with correct conversion.

### 5. Cache exchange rates daily

Create 'ExchangeRateCache' data type with base_currency, target_currency, rate, last_updated. Schedule a daily backend workflow to fetch rates and update the cache. Frontend reads from cache instead of the live API.

**Expected result:** Rates are cached and served without live API calls.

## Complete code example

File: `Workflow summary`

```text
CURRENCY CONVERSION — SETUP SUMMARY
=====================================

API CONNECTOR:
  Name: ExchangeRate
  Call: Get Rates (GET, Data type)
  URL: https://v6.exchangerate-api.com/v6/KEY/latest/USD

OPTION SET: Currency
  USD ($), EUR (€), GBP (£), JPY (¥), CAD (C$), AUD (A$)

DATA TYPE: ExchangeRateCache
  base_currency, target_currency, rate, last_updated

WORKFLOWS:
  Daily update (scheduled backend): fetch API → update cache
  Page load: read cache → set exchange_rate state
  Display: price × exchange_rate, prefix with symbol

USER PREFERENCE:
  Save preferred currency on User record
  Default: USD
```

## Common mistakes

- **Calling the API on every page load** — Free APIs allow ~1,500 requests/month — a busy app hits limits fast Fix: Cache rates in a database and update daily via scheduled backend workflow
- **Hardcoding currency symbols** — Difficult to maintain when adding new currencies Fix: Use a Currency Option Set with a symbol attribute
- **Not handling API errors** — If the API is down, prices show as 0 or NaN Fix: Fall back to cached rates when the API call fails

## Best practices

- Cache exchange rates and update once daily
- Use Option Sets for currencies for zero-WU dropdowns
- Store user's preferred currency on their User record
- Display both original and converted prices for transparency
- Format with correct decimal places per currency (0 for JPY, 2 for most others)
- Show a 'rates last updated' timestamp

## Frequently asked questions

### Which exchange rate API should I use?

ExchangeRate-API has a free tier. Open Exchange Rates ($12/mo) and Fixer.io are popular paid options.

### Can I convert prices inside Repeating Groups?

Yes. Reference the page-level exchange_rate custom state to multiply each item's price.

### How accurate are free API rates?

Free APIs update once daily. For real-time forex, use a premium API with minute-by-minute updates.

### How do I handle payment currency?

Display converted prices for reference but charge in your base currency via Stripe.

### Can users set a custom exchange rate?

Yes. Add a manual rate input that overrides the API rate for businesses with markup.

### Can RapidDev build multi-currency pricing?

Yes. RapidDev builds e-commerce with multi-currency display and international payment integration.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/display-a-currency-conversion-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/display-a-currency-conversion-feature-in-bubble