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.
| Fact | Value |
|---|---|
| Tool | Bubble |
| Difficulty | Beginner |
| Time required | 20-25 min |
| Compatibility | All Bubble plans |
| Last updated | March 2026 |
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.
Prerequisites
- 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
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.
1GET https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/USD23Response:4{5 "result": "success",6 "conversion_rates": {7 "EUR": 0.92,8 "GBP": 0.79,9 "JPY": 149.5010 }11}Expected result: The API returns exchange rates for all currencies.
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.
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.
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.
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 working example
1CURRENCY CONVERSION — SETUP SUMMARY2=====================================34API CONNECTOR:5 Name: ExchangeRate6 Call: Get Rates (GET, Data type)7 URL: https://v6.exchangerate-api.com/v6/KEY/latest/USD89OPTION SET: Currency10 USD ($), EUR (€), GBP (£), JPY (¥), CAD (C$), AUD (A$)1112DATA TYPE: ExchangeRateCache13 base_currency, target_currency, rate, last_updated1415WORKFLOWS:16 Daily update (scheduled backend): fetch API → update cache17 Page load: read cache → set exchange_rate state18 Display: price × exchange_rate, prefix with symbol1920USER PREFERENCE:21 Save preferred currency on User record22 Default: USDCommon mistakes when building currency conversion in Bubble
Why it's a problem: Calling the API on every page load
How to avoid: Cache rates in a database and update daily via scheduled backend workflow
Why it's a problem: Hardcoding currency symbols
How to avoid: Use a Currency Option Set with a symbol attribute
Why it's a problem: Not handling API errors
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add multi-currency support to my Bubble.io app with a currency selector and automatic price conversion. Can you outline the API setup and caching strategy?
Add currency conversion. Connect to an exchange rate API, create a currency selector, convert prices to the user's currency, and cache rates daily.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation