iFrame Integration
Sandbox JavaScript URL: https://sandbox.4levers.com/TokenizationApi/Scripts/fourlevers.js
Production environment JavaScript URL: https://tokens.4levers.com/Scripts/fourlevers.js
Integration Guidelines
1.Add script reference to your application HTML page and provide your personal API key
//add 4levers script reference with specified client api key
<script src= "https://sandbox.4levers.com/TokenizationApi/Scripts/fourlevers.js" data-4levers-key="[client apiKey]"
data-theme= "[css theme name]" >
</script>
2.Add container element to tokenization iFrame with id attribute specified as container
//div container for tokenization iframe
<div id="container">
</div>
3.Create a JavaScript function
4.Call fourlevers.createIframe method to create an iFrame.
$().ready(function () {
//create tokenization iframe on the page inside the element with id='container'
fourlevers.createIframe('container');
});
5.Call fourlevers.fetchTokenizedData method to subscribe for the callback function
to retirve the tokenized data in case of a successful validation or a response status code in case of an arror
fourlevers.fetchTokenizedData(tokenizationComplete);
6.After you receive the tokenized data, call the tokenizationComplete callback function.
Within this function you may implement any custom logic for processing tokenized data
(for example get tokenized data and post it to your server).
Response statuses:
200 – OK
400 – Bad Request or iFrame validation error
500 – Server Error
//tokenization complete callback function
function tokenizationComplete(tokenizationData) {
//check response status (200 - OK, 400 - Bad Request, 500 - Server Error)
if (tokenizationData.status === 200) {
//perform any operation that you need
alert(JSON.stringify(tokenizationData));
$.post('[some client url]', tokenizationData)
.done(function (data) {
});
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:mso="urn:schemas-microsoftcom:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Tokenization integration sample</title>
<!-- add 4levers script reference with specified client api key -->
<script src="https://sandbox.4levers.com/TokenizationApi/Scripts/fourlevers.js" data-4levers-key="[client apiKey]" data-theme='[css theme name]' ></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
/* iFrame Style*/
<style>
label, input, select {
display: block;
margin-left: 8px;
width: 170px;
}
.fourlevers-iframe {
border: none;
height: 200px;
width: 450px;
}
</style>
</head>
<body>
<!-- customer fields -->
<form>
<div>
<label for="addressLine">Address Line 1</label>
<input name="addressLine" id="addressLine" type="text" maxlength="50" />
</div>
<div>
<label for="addressLine2">Address Line 2</label>
<input id="addressLine2" name="addressLine2" type="text" maxlength="50" />
</div>
<div>
<label for="city">City</label>
<input id="city" name="city" type="text" maxlength="50" />
</div>
<div>
<label for="country">Country</label>
<select id="country" name="country">
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">United Kingdom</option>
</select>
</div>
<div>
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" maxlength="15" />
</div>
</form>
<!-- div container for tokenization iframe -->
<div id="container"></div>
<input type="button" value="submit" onclick=" submitData() " />
<input type="button" value="reset" onclick="reset()"/>
<script>
$().ready(function () {
//create tokenization iframe element on the page inside the element with
id='container'
fourlevers.createIframe('container');
});
//submit button handler
function submitData() {
//sending iframe data to 4levers to obtain token (if validation passed)
//tokenizationComplete - callback function
fourlevers.fetchTokenizedData(tokenizationComplete);
}
//reset button handler
function reset() {
fourlevers.resetIframe();
}
//tokenization complete callback
function tokenizationComplete(tokenizationData) {
//check response status (200 - OK, 400 - Bad Request, 500 - Server Error)
if (tokenizationData.status === 200) {
//perform any operation that you need
alert(JSON.stringify(tokenizationData));
$.post('[some client url]', tokenizationData)
.done(function (data) {
});
}
}
</script>
</body>
</html>