Create your own currency converter page with Python (Flask)

4 min read • July 19, 2020

Introduction

Today, we will create a simple currency converter widget for our website. We will use Python and Flask together to build this simple widget. Let’s start.

HTTPS://GITHUB.COM/FINAGELTD/FINAGE-EXAMPLE-WIDGET

Flask Installation

Firstly, you need to create a folder and a venv folder inside this folder:

$ mkdir currencyconverter
$ cd currencyconverter
$ python3 -m venv venv

If you are using Windows, then you should use this command

$ py -3 -m venv venv

We will use Python3 for this project but if you want to continue with Python2, you need to use these commands;

$ python2 -m virtualenv venv

for Windows;

\Python27\Scripts\virtualenv.exe venv

After these steps, active your environment;

$ . venv/bin/activate

for Windows;

> venv\Scripts\activate

At least, install the Flask.

$ pip install Flask

Let’s start to build a currency converter

I’ll continue with MacOS, if you do not know how to use Flask on Windows. Please visit https://flask.palletsprojects.com/en/1.1.x/quickstart/

I’ll create an app.py and export it;

$ export FLASK_APP=app.py

Then, you should create a folder that named templates. Your architecture will look like this;

/app.py
/templates
    /index.html

app.py and the index.html files will look like this.

from flask import Flask
from flask import render_template
app = Flask(__name__)
 
@app.route('/convert/')
@app.route('/convert/<base>/<to>/<amount>')
def convert(base=None, to=None, amount=None):
  return render_template('index.html', base=base, to=to, value = value)

view raw app.py hosted with ❤ by GitHub

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
 
{{ base + to }}
 
</body>
</html>

view raw index.html hosted with ❤ by GitHub

Run,

flask run

and open the browser and go to http://127.0.0.1:5000/convert/gbp/usd/1 , you will see your index.html file here.

If you can see “gbpusd” in the output of this URL, then everything is okay.

Let’s continue. We will use the “Requests” library to make API requests. You can install “requests” with the given command below.

pip install requests

Also, we need to parse the requested JSON data. So, we need to import “json”.

import json

We are ready to make an API request to get latest currency value.

r = req.get('https://api.finage.co.uk/last?currencies='+currency+'&apikey=YOUR_API_KEY')

This line will make an API request. We will get “currency” from the URL and calculate the amount. URL will fill the link that given above and it will look like this.

https://api.finage.co.uk/last?currencies=USDGBP&apikey=YOUR_API_KEY

Response

{"currencies":[{"name":"GBPUSD","value":1.29303,"change":0.0053,"difference":0.41}],"lastUpdate":"2020-07-28T20:31:34","lastUpdate_Timestamp":"1595968294"}

In this project, we will get the base currency and the second currency from the URL. After that, our application will make an API request to get the latest values from the Finage. Also, we get the amount from the URL. Check the last status of the index.html and app.py below;

from flask import Flask
from flask import render_template
import requests as req
import json
app = Flask(__name__)
 
@app.route('/convert/')
@app.route('/convert/<base>/<to>/<amount>')
 
def convert(base=None, to=None, amount=None):
currency = base + to
r = req.get('https://api.finage.co.uk/last?currencies='+currency+'&apikey=YOUR_API_KEY')
response = json.loads(r.text)
calculation = "%.2f" % (response["currencies"][0]["value"] * float(amount))
value = response["currencies"][0]["value"]
change = "%.2f" % (response["currencies"][0]["change"])
difference = "%.2f" % (response["currencies"][0]["difference"])
last_update = response["lastUpdate"]
 
return render_template('index.html', base=base.upper(), to=to.upper(), value = value, calculation = calculation, amount=amount, change=change, difference = difference, last_update=last_update)

view raw app.py hosted with ❤ by GitHub

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Currency Page </title>
</head>
<body>
 
 
<style>
html, body { background-color: #2A2B2A; font-family: Helvetica; }
div { -webkit-box-shadow: -5px 2px 42px -4px rgba(0,0,0,0.75); -moz-box-shadow: -5px 2px 42px -4px rgba(0,0,0,0.75); box-shadow: -5px 2px 42px -4px rgba(0,0,0,0.75); }
.converter { position: relative; display: block; margin: 50px auto; background: #E5446D; color: #fff; padding: 40px 20px; border-radius: 10px; width: 325px; }
.converter #base, #to { text-align: center; display: inline-block; font-size: 18px; padding-top: 15px; }
.converter .item { width: 45%; }
.converter #amount, #calculation { display: inline-block; text-align: center; font-size: 34px; vertical-align: sub; }
.converter #last_update { position: absolute; right: 10px; bottom: 7px; font-size: 11px; }
.currency-information { background-color: #FF8966; width: 325px; color: #fff; min-height: 100px; margin: 0 auto; padding: 20px; border-radius: 10px;}
.currency-information h4 { font-size: 28px; width: 100%; text-align: center; margin: 0; padding-bottom: 10px;}
.currency-information span { display: block; padding: 5px 0; text-align: center; }
</style>
 
<div class="converter">
 
<span class="item" id="amount">{{amount}}</span>
<span class="item">→</span>
<span class="item" id="calculation">{{ calculation }}</span>
 
<span class="item" id="base">{{base}}</span>
<span class="item">→</span>
<span class="item" id="to">{{to}}</span>
<span id="last_update">{{last_update}}</span>
</div>
 
<div class="currency-information">
<h4> {{ base + to }} </h4>
<span>1 {{ base }} = {{ value }} {{ to }} </span>
<span><b>Daily Difference:</b> {{difference}}</span>
<span><b>Daily Change:</b> {{change}}%</span>
</div>
 
</body>
</html>

view raw index.html hosted with ❤ by GitHub

If you make a request like http://localhost:5000/convert/usd/gbp/100

You’ll see something like this;

You can check the available currency list from here

https://docs.finage.co.uk/#/symbols/

If you want to try Finage’s API, you can get your FREE API with the link given below.

Visit Github to access this project.

https://github.com/FinageLTD/finage-example-widget

If you have any questions, please feel free to ask. Also, you can contact with our support team on the live chat section.

flask phyton Stock API apis for stock finage api free stock api

Claim Your Free API Key Today

Access stock, forex and crypto market data with a free API key—no credit card required.

Start free trial

Stay Informed, Stay Ahead

Finage Blog: Data-Driven Insights & Ideas

Discover company news, announcements, updates, guides and more

8 min read • May 25, 2025

DEX vs CEX Data: Which One Should Your App Trust?

Web3

9 min read • May 24, 2025

Forex API Integration Tips: From Currency Pairs to Global Trends

Forex

8 min read • May 23, 2025

Building Your First Trading Bot with Real-Time Market Data

Real-Time Data

	from flask import Flask
	from flask import render_template
	app = Flask(__name__)

	@app.route('/convert/')
	@app.route('/convert/<base>/<to>/<amount>')
	def convert(base=None, to=None, amount=None):
	return render_template('index.html', base=base, to=to, value = value)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>

	{{ base + to }}

	</body>
	</html>

	from flask import Flask
	from flask import render_template
	import requests as req
	import json
	app = Flask(__name__)

	@app.route('/convert/')
	@app.route('/convert/<base>/<to>/<amount>')

	def convert(base=None, to=None, amount=None):
	currency = base + to
	r = req.get('https://api.finage.co.uk/last?currencies='+currency+'&apikey=YOUR_API_KEY')
	response = json.loads(r.text)
	calculation = "%.2f" % (response["currencies"][0]["value"] * float(amount))
	value = response["currencies"][0]["value"]
	change = "%.2f" % (response["currencies"][0]["change"])
	difference = "%.2f" % (response["currencies"][0]["difference"])
	last_update = response["lastUpdate"]

	return render_template('index.html', base=base.upper(), to=to.upper(), value = value, calculation = calculation, amount=amount, change=change, difference = difference, last_update=last_update)