Currency Converter

A jQuery plugin that creates currency conversion widget

This is jQuery plugin that creates currency conversion widget. This widget is flexible customizable and easily integratable in any site working on different platforms. Your website visitors can convert currencies using latest exchange rates.

Features

Flexible customizable
Quick and easy integration
Support up to 156 currencies
6 built-in themes
Live currency updates
Localization ready
Compatible with all major browsers

Requirements

There are a few requirements you need to meet before you can utilise currency converter, the most obvious of which is the inclusion of the jQuery library. You can grab the latest version here.

Or include directly into HTML head from Google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

I recommend version 1.8.3

Browser Support


IE 8+	Chrome 4+	Firefox 3.5+	Opera 10.50+	Safari 4+

Installation

Installing currency convertion widget is relatively straight forward. Simply include the jQuery and currency converter library files with localization using script html element(s). Set one of 6 themes you like or include your own. Create DOM element and initialize widget. Like so:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.currency.js"></script>
<script type="text/javascript" src="js/jquery.currency.localization.en_US.js"></script>
<link type="text/css" rel="stylesheet" href="css/currency.default.css">
<title>Currency Converter - jQuery Plugin</title>
<script type="text/javascript">
$(document).ready(function(){
	$('#currency-widget').currency();
});
</script>
<style type="text/css">
#currency-widget {
	width:223px;
}
</style>
</head>
<body>
<div id="currency-widget"></div>
</body>
</html>

HTML structure

Once created, currency convertion widget have a common HTML structure in this form:

<div class="currency-wrapper">
<p class="currency-header">Currency Converter</p>
<div class="currency-content">
<div class="currency-error-container" style="display:none">
<span class="currency-error">Server temporary unvailabe</span>
<button class="currency-backBtn">New conversion</button>
</div><!-- End of currency-error-container -->
<div class="currency-loading" style="display:none;">
<span class="currency-loading-phrase">Loading...</span>
<img src="img/loader.gif" class="currency-loading-gif">
</div><!-- End of currency-loading -->
<div class="currency-back" style="display:none;">
<table class="currency-back-table">
<tbody>
<tr>
<td colspan="3" class="currency-result-from"></td>
</tr>
<tr>
<td colspan="3" class="currency-equals">=</td>
</tr>
<tr>
<td colspan="3" class="currency-result-to"></td>
</tr>
<tr>
<td class="currency-result-compare1"></td>
<td class="currency-back-gap"></td>
<td class="currency-result-compare2"></td>
</tr>
</tbody>
</table>
<button class="currency-backBtn">New conversion</button>
</div><!-- End of currency-back -->
<div class="currency-front">
<form class="currency-form">
<input type="text" class="currency-quantity" name="currency-quantity" placeholder="">
<span class="currency-from-label">From</span>
<select class="currency-from" name="currency-from"></select>
<span class="currency-to-label">To</span>
<select class="currency-to" name="currency-to"></select>
<button name="currency-convert" class="currency-convertBtn">Convert</button>
</form>
</div><!-- End of currency-front -->
</div><!-- End of currency-content -->
<div class="currency-footer">
<a href="http://currency-converter.php5developer.com">Add this widget to your website</a>
</div>
</div><!-- End of currency-wrapper -->

Examples

Example #1

Widget initialization with default parameters

HTML

<div id="currency-widget"></div>

JS

$(document).ready(function(){
	$('#currency-widget').currency();
});

Example #2

Currency converter has many options you can pass in at initialization. Let's have a look at some of them.

HTML

<div id="currency-widget"></div>

JS

$(document).ready(function(){
	$('#currency-widget').currency({
		// Set currencies quantity
		quantity: 20,
		// Currency exchange from
		from: 'GBP',
		// Currency exchange to
		to: 'RUB',
		// The number of digits after the decimal point
		decimals: 2,
		// Disable loading image
		loadingImage: false,
	});
});

Example #3

Currency converter has possibility to create own group of popular currencies displaying at the top of the select list. To create it, you need to pass list of currencies in popularFrom or popularTo parameter.

HTML

<div id="currency-widget"></div>

JS

$(document).ready(function(){
	var popular = [
		'USD', 'EUR', 'RUB', 'JPY', 'GBP',
	];
	$('#currency-widget').currency({
		// Popular currenices
		fromPopular: popular,
		// Popular currenices
		toPopular: popular,
		// Set default currency from
		from: 'USD',
		// Set default currency to
		to: 'EUR',
	});
});

Deploy own currency rate provider

By default, currency conversion plugin is using 3rd party services to pull currency rates, but it can affect performance of widget. We can't guarantee the trouble-free operation of external APIs. Widget comes with own PHP API to solve this issue.
The pros of using own server:

You can run widget over https
You can get rid of dependence using third-party services

Here is the instructions how to deploy your own server:

Make sure PHP version is greater than 5.0 and PDO extension is enabled.
Upload php_api/api_currency.php to FTP (For instance in HTML root folder: http://example.com/api_currency.php)
Create database and import dump: php_api/dump.sql

Setup MySQL credentials. You can find config array at the top of php_api/api_currency.php file.

    'db'=>array(
        'host'=>'localhost', // Mysql host
        'username'=>'root', // Mysql user
        'passwd'=>'', // Mysql password
        'dbname'=>'api_currency', // Database name
        'port'=>3306, // Database port
    ),

Currency converter has integration with 3 different API currency providers:

Register free account and paste API key into config array. You don't need to register three accounts, just choose one you like.

    'api'=>array(
        "fixer"=>"", // paste here Fixer API key
        "openexchangerates"=>"", // paste here OpenExchangeRates API key
        "currencylayer"=>"", // paste here CurrencyLayer API key
    ),

Set active API Provider.

	'provider'=>'CurrencyLayer', // Valid values: OpenExchangeRates | CurrencyLayer | Fixer

Route AJAX calls to local provider

$('#currency-widget').currency({
	localRateProvider: 'api_currency.php', // This is the same as http(s)://example.com/api_currency.php
});

Each currency provider support different currencies, but in general all they are same. Include appropriate localization file depending on you currency provider. Instead of:

<script type="text/javascript" src="js/jquery.currency.localization.en_US.js"></script>

Use one depending on your rates provider:

<script type="text/javascript" src="js/jquery.currency.localization.currencylayer.en_US.js"></script>
<script type="text/javascript" src="js/jquery.currency.localization.fixer.en_US.js"></script>
<script type="text/javascript" src="js/jquery.currency.localization.openexchangerates.en_US.js"></script>

Themes

Currency convertion widget comes with 6 built-in styles that are ready to go, all you have to do is specify the stylesheet with your theme of choice.

HTML Head

...
<link type="text/css" rel="stylesheet" href="css/currency.default.css">
<link type="text/css" rel="stylesheet" href="css/currency.blue.css">
<link type="text/css" rel="stylesheet" href="css/currency.lightblue.css">
<link type="text/css" rel="stylesheet" href="css/currency.green.css">
<link type="text/css" rel="stylesheet" href="css/currency.orange.css">
<link type="text/css" rel="stylesheet" href="css/currency.red.css">
...

Localization

Currency converter plugin contains only en_US localization, but you can easy create your own. Let's take a look how it must be done.

Step #1

Create new file jquery.currency.localization.your_LOCALE.js

Step #2

Open jquery.currency.localization.en_US.js file, copy all and paste into your newly created file.

Step #3

Change object's keys with chosen locale.

$(function () {
	$.currency.interface['your_LOCALE'] = {
		...
	},
	$.currency.isocode['your_LOCALE'] = {
		...
	}
});

and begin translation.

Step #4

Pass locale parameter at widget initialization.

$(document).ready(function(){
	$('#currency-widget').currency({
		locale: 'your_LOCALE', // Set widget locale
	});
});

All in one place

At the end of the localization process the code should look like this.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.currency.js"></script>
<script type="text/javascript" src="js/jquery.currency.localization.de_DE.js"></script>
<link type="text/css" rel="stylesheet" href="css/currency.default.css">
<title>Currency Converter - jQuery Plugin</title>
<script type="text/javascript">
$(document).ready(function(){
	$('#currency-widget').currency({
		locale: 'de_DE',
	});
});
</script>
</head>
<body>
<div id="currency-widget"></div>
</body>
</html>

Options

Property	Function	Example
locale (String. Default: 'en_US')	Currency convertion widget's localization	locale: 'en_US'
quantity (Float. Default: 100)	Currencies quantity	quantity: 20.99
placeholder (String. Default: '')	If the currencies quantity equals 0, then you can specify element placeholder	placeholder: 100
from (String. Default: 'USD')	Currency exchange from (See ISO codes)	from: 'GBP'
to (String. Default: 'EUR')	Currency exchange to (See ISO codes)	from: 'RUB'
fromPopular (Array. Default: [])	The group of popular currencies in "from" section	fromPopular: ['EUR', 'USD', 'RUB']
toPopular (Array. Default: [])	The group of popular currencies in "to" section	toPopular: ['GBP', 'JPY', 'LTL']
loadingImage (Mixed. Default: 'img/loader.gif')	Path to loading image or false to hide image	loadingImage: false
decimals (Integer. Default: 4)	The number of digits after the decimal point on the result page	decimals: 2
decSep (String. Default: '.')	Sets the separator for the decimal point	decSep: ","
thousandSep (String. Default: ',')	Sets the thousands separator	thousandSep: "."
separator (String. Default: '------')	Separator between popular currency group and other currencies	separator: '======='
rateProvider (String. Default: 'rateExchange')	The ID of currency rates provider. Can be: rateExchange (support HTTPS) php5dev (doesn't support HTTPS) The switching between providers can be useful when one of them has problems with uptime. Note! The currency rates are the same in all providers.	rateProvider: 'php5dev'
localRateProvider (String. Default: null)	Link to local rate provider. Read here how to deploy own currency rate provider.	localRateProvider: 'api_currency.php'
copyright (Boolean. Default: true)	Wheter to show copyright	copyright: true

Methods

Method	Function	Example
destroy	Destroy the widget	$(selector).currency("destroy");

Purchase

If you like this script and want to see it on your website, then you have possibility to purchase it. Click here for more information. Alternatively you can click here to hire PHP Developers at FreelanceMyWay