iFrame Testing
Follow this URL: https://sandbox.4levers.com/TokenizationIframe/
Sandbox Environment JavaScript Reference: https://sandbox.4levers.com/TokenizationApi/Scripts/fourlevers.js
Test API Key: e9d0242db35c4a59a74cf48fe5a92da0
Test Input Data:
Test credit card number: 4111111111111111
Name on card: Eleanor Johnson
Credit card expiration date: 11/2025
CVV: 123
<!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="e9d0242db35c4a59a74cf48fe5a92da0" data-theme='sample' ></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: 400px;
width: 250px;
}
</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>