JS Client-Side Encryption SDK
JS Client-Side Encryption SDK
Samenvatting van het artikel
Vond je deze samenvatting nuttig?
Bedankt voor uw feedback
The Client Side Encryption SDK is a JavaScript library which makes it possible for you to request sensitive card data in your own webshop. This library consists of functions to encrypt the card data and card data validation functions. You can use the library by referencing the following link: https://static.buckaroo.nl/script/ClientSideEncryption001.js, or by downloading the library and adding it to your client code.
Download library here:
Client side
On the client side you have to make a form in which the consumer can enter its card data (like card number, expiry date, cvc and cardholder name). This data has to be fed to the ecryptCardData function (for cards that do not have a cvc code, like Maestro and Bancontact, you can provide the empty string) alongside with a function which sends the encrypted card data to the server side. We also have provided some validation functions to validate the consumer's input. You can find examples of how to use this SDK below.
Server side
With the received encrypted card data you can create a Creditcard or Bancontact PayEncrypted (or AuthorizeEncrypted) request (see respectively the Creditcard or Bancontact documentation on how to make such a request). After this request, the flow will continue like the consumer has entered its card data on our checkout, so we will return an URL when the consumer has to perform 3DSecure or we will return a success (or failed) status of the transaction.
Supported services
The following services are supported with Client Side Encryption:
- Bancontact
- All Creditcards
Next steps
Once you have performed some successful test transactions you can fill out the SAQ-A from PCI and Buckaroo will enable Client Side Encryption on your live channel.
EncryptCardData Example
This code example shows how the EncryptSecurityCode function can be used.
BuckarooClientSideEncryption.V001.encryptSecurityCode(
"123", // CVC
function (encryptedSecurityCode) {
// encryptedSecurityCode like " 001F3AJT7wkJa04zE8c78P7spOAgHSKH1YKgPlOwXhW049VfIXMwZO32RYna9xZRyUCtfODIoCL8GRQoaZbStlBT4rbF5e4PPvWFSKdvua4rq+GQDNAghfa+ZQz0BzBPfjS0WBdFape9n3zH2vC/0m+wI3QZiDpYYgyWC1/Y3udJDU7JRTVMq/BDHGet+IZ2CDnkeGl813kkYymzYon/QeuQRQ0Wsec5bmVQNYGx62fz70/vLgs0ffff+6DtZtnZWfByRkTwMNebJotlOsSkbhVR5FrHpAbNPCJI+LvJcJL7Eoo+ZuX5/LWGmsT6qnR/uLiIw1DI7mTKGy6/P7IljAE+g==
"
// Create transaction request to Buckaroo with as EncryptedSecurityCode the encryptedSecurityCode }
);
EncryptSecurityCode Example
This code example shows how the EncryptSecurityCode function can be used.
BuckarooClientSideEncryption.V001.encryptSecurityCode(
"123", // CVC
function (encryptedSecurityCode) {
// encryptedSecurityCode like " 001F3AJT7wkJa04zE8c78P7spOAgHSKH1YKgPlOwXhW049VfIXMwZO32RYna9xZRyUCtfODIoCL8GRQoaZbStlBT4rbF5e4PPvWFSKdvua4rq+GQDNAghfa+ZQz0BzBPfjS0WBdFape9n3zH2vC/0m+wI3QZiDpYYgyWC1/Y3udJDU7JRTVMq/BDHGet+IZ2CDnkeGl813kkYymzYon/QeuQRQ0Wsec5bmVQNYGx62fz70/vLgs0ffff+6DtZtnZWfByRkTwMNebJotlOsSkbhVR5FrHpAbNPCJI+LvJcJL7Eoo+ZuX5/LWGmsT6qnR/uLiIw1DI7mTKGy6/P7IljAE+g==
"
// Create transaction request to Buckaroo with as EncryptedSecurityCode the encryptedSecurityCode }
);
Example site
This example site shows how all the functions in the CSE libary can be used.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page - CSETest</title>
<environment include="Development">
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="/css/site.min.css" asp-append-version="true" />
</environment>
<script src="https://static.buckaroo.nl/script/ClientSideEncryption001.js"></script>
</head>
<body>
<div class="container body-content">
<br /><br /><br />
<div class="container pt-5">
<form id="cseTestForm">
<div class="row">
<div class="col-md-6">
<h3>Card Input</h3>
</div>
<div class="col-md-6">
<h3>Encrypted Data</h3>
</div>
<div class="col-md-3">
<label for="cardNumber">Card number:</label> <br />
<label for="cvc">CVC:</label><br />
<label for="cardHolderName">Cardholder Name:</label><br />
<label for="expirationYear">Expiration Year:</label><br />
<label for="expirationMonth">Expiration Month:</label><br />
</div>
<div class="col-md-3">
<input type="text" name="cardNumber" id="cardNumber" value="5386860000000000" /><br />
<input type="text" name="cvc" id="cvc" value="123" /><br />
<input type="text" name="cardHolderName" id="cardHolderName" value="John Williams" /><br />
<input type="number" name="expirationYear" id="expirationYear" min="2018" max="2028" value="2020" /><br />
<input type="number" name="expirationMonth" id="expirationMonth" min="1" max="12" value="12" /> <br />
<button type="button" class="submit btn btn-primary" style="float: left">SUBMIT</button>
</div>
<div class="col-md-6">
<label class="my-0"></label>
<textarea rows="15" id="encryptedData" class="my-3 form-control" readonly="readonly"></textarea>
</div>
</div>
</form>
<form id="cseSecurityCodeTestForm">
<div class="row">
<div class="col-md-6">
<h3>Card Input</h3>
</div>
<div class="col-md-6">
<h3>Encrypted Data</h3>
</div>
<div class="col-md-3">
<label for="securityCode">Security Code:</label><br />
</div>
<div class="col-md-3">
<input type="text" name="cvc" id="securityCode" value="123" /><br />
<button type="button" class="submit-security-code btn btn-primary" style="float: left">SUBMIT</button>
</div>
<div class="col-md-6">
<label class="my-0"></label>
<textarea rows="15" id="encryptedSecurityCode" class="my-3 form-control" readonly="readonly"></textarea>
</div>
</div>
</form>
</div>
<hr />
<footer>
<p>© 2020 - CSETest</p>
</footer>
</div>
<environment include="Development">
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="/js/site.min.js" asp-append-version="true"></script>
</environment>
<script>
$(function () {
$(document).on('click', '.submit', submit);
$(document).on('click', '.submit-security-code', submitSecurityCode);
$("#cardNumber").on('input', function (e) {
if (!BuckarooClientSideEncryption.V001.validateCardNumber(e.target.value)) {
$("#cardNumber").addClass("error");
} else {
$("#cardNumber").removeClass("error");
}
});
$("#cvc").on('input', function (e) {
if (!BuckarooClientSideEncryption.V001.validateCvc(e.target.value)) {
$("#cvc").addClass("error");
} else {
$("#cvc").removeClass("error");
}
});
$("#cardHolderName").on('input', function (e) {
if (!BuckarooClientSideEncryption.V001.validateCardholderName(e.target.value)) {
$("#cardHolderName").addClass("error");
} else {
$("#cardHolderName").removeClass("error");
}
});
$("#expirationYear").on('input', function (e) {
if (!BuckarooClientSideEncryption.V001.validateYear(e.target.value)) {
$("#expirationYear").addClass("error");
} else {
$("#expirationYear").removeClass("error");
}
});
$("#expirationMonth").on('input', function (e) {
if (!BuckarooClientSideEncryption.V001.validateMonth(e.target.value)) {
$("#expirationMonth").addClass("error");
} else {
$("#expirationMonth").removeClass("error");
}
});
});
var submit = function (e) {
var cardNumber = $("#cardNumber").val();
var cvc = $("#cvc").val();
var cardHolderName = $("#cardHolderName").val();
var expirationYear = $("#expirationYear").val();
var expirationMonth = $("#expirationMonth").val();
var cardNumberValid = BuckarooClientSideEncryption.V001.validateCardNumber(cardNumber);
var cvcValid = BuckarooClientSideEncryption.V001.validateCvc(cvc);
var cardHolderNameValid = BuckarooClientSideEncryption.V001.validateCardholderName(cardHolderName);
var expirationYearValid = BuckarooClientSideEncryption.V001.validateYear(expirationYear);
var expirationMonthValid = BuckarooClientSideEncryption.V001.validateMonth(expirationMonth);
if (cardNumberValid && cvcValid && cardHolderNameValid && expirationYearValid && expirationMonthValid) {
getEncryptedData(cardNumber, expirationYear, expirationMonth, cvc, cardHolderName);
}
}
var getEncryptedData = function (cardNumber, year, month, cvc, cardholder) {
BuckarooClientSideEncryption.V001.encryptCardData(cardNumber,
year,
month,
cvc,
cardholder,
function (encryptedCardData) {
$("#encryptedData").val(encryptedCardData);
});
}
var submitSecurityCode = function () {
var securityCode = $("#securityCode").val();
BuckarooClientSideEncryption.V001.encryptSecurityCode(securityCode,
function (encryptedSecurityCode) {
$("#encryptedSecurityCode").val(encryptedSecurityCode);
});
}
</script>
</body>
</html>
Was dit artikel nuttig?