Tokenizing cards
Tokenization is the process where we take the card information, encrypt using the highest standards, and returning a code that only your API keys can read.
Param
Expected values
Description
<script src="https://cdn.simpleps.com/sandbox/inyo.js"
integrity="..." crossorigin="anonymous"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Inyo - Sample Payment Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css>"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-light">
<form id="_frm" class="needs-validation" novalidate>
<div class="container">
<div class="py-5 text-center">
<h2>Payment Details</h2>
</div>
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<h4 class="mb-3">Billing address</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required
autofocus>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="" placeholder="[email protected]"
required>
<div class="invalid-feedback">
Please enter a valid email address for updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" value="" placeholder="1234 Main St"
required>
<div class="invalid-feedback">
Please enter your billing address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div id="_pay">
<div class="d-block my-3">
<hr>
<h4 class="mb-3">Payment - Debit card (only)</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" data-field="cardholder" id="cc-name"
placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Debit card number</label>
<input type="text" pattern="[0-9]{4}[0-9]{4}[0-9]{4}[0-9]{4}" data-field="pan"
class="form-control" id="cc-number" placeholder="" maxlength="19" required>
<div class="invalid-feedback">
Debit card number is wrong
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" pattern="[0-9]{2}/[0-9]{2}" data-field="expirationDate"
class="form-control" id="cc-expiration" placeholder="mm/yy" maxlength="5"
required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-expiration">CVV</label>
<input type="text" pattern="[0-9]{3,4}" data-field="securitycode"
class="form-control" id="cc-cvv" placeholder="" maxlength="4" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<button class="btn btn-primary btn-lg btn-block" id="_btn" type="button">Confirm my
payment</button>
</div>
</div>
</div>
</div>
</div>
</form>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© Inyo.global</p>
</footer>
<script src="https://cdn.simpleps.com/sandbox/inyo.js"></script>
<script>
var tokenizer = null;
document.addEventListener('DOMContentLoaded', () => {
tokenizer = new InyoTokenizer({
targetId: '#_pay',
storeLaterUse: true,
publicKey: publicKey,
threeDSData: {
enable: true,
successUrl: "http://localhost/3ds/success",
failUrl: "http://localhost/3ds/fail",
},
successCallback: this.#successCallback.bind(this),
errorCallback: this.#errorCallback.bind(this)
});
document.getElementById('_btn').addEventListener('click', () => {
var f = document.getElementById('_frm');
if (f.checkValidity() !== false) {
tokenizer.tokenizeCard();
}
else {
f.classList.add('was-validated');
}
});
});
function errorCallback(responseObj) {
var elements = ['#cc-number', '#cc-expiration', '#cc-cvv'];
elements.forEach(function(selector) {
var element = document.querySelector(selector);
if (element) {
element.classList.remove('is-invalid');
}
});
if (responseObj.code == 'INVALID_PAN')
document.querySelector('#cc-number').classList.add('is-invalid');
else if (responseObj.code == 'INVALID_EXPIRY_DATE')
document.querySelector('#cc-expiration').classList.add('is-invalid');
else if (responseObj.code == 'INVALID_CVV')
document.querySelector('#cc-cvv').classList.add('is-invalid');
}
function successCallback(responseObj) {
console.log(responseObj);
if (responseObj.step == 'WAITING_TRANSACTION')
{
alert('Success tokenizing');
// send data to the backend server
}
else
{
alert('Couldnt process the request');
}
}
</script>
</body>
</html>Last updated