Guides
StatusPlazaCreate Account

JS Client Side Encryption SDK

Suggest Edits

The Client-Side Encryption (CSE) SDK is a JavaScript library that enables you to securely request and encrypt sensitive card data in your webshop. This library includes functions to encrypt card data and validate card data. 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:


Client Side Implementation

On the client side, you need to create a form where the consumer can enter their card details (such as card number, expiry date, CVC, and cardholder name). This data is then fed into the encryptCardData function. For cards that do not have a CVC code (like Maestro and Bancontact), you can provide an empty string for the CVC parameter. The SDK also includes validation functions to validate the consumer's input. You can find examples of how to use this SDK below.


Server Side Implementation

Once you have received the encrypted card data from the client, you can use it to create a Creditcard or Bancontact PayEncrypted (or AuthorizeEncrypted) request. Refer to the respective Creditcard or Bancontact documentation for details on making such requests. The process will continue as if the consumer entered their card data directly on our checkout page. Depending on the outcome, you will either receive a URL for 3DSecure authentication or a success/failure status for the transaction.


Supported Services

The following services are supported with Client-Side Encryption:

  • Bancontact
  • All Creditcards

Next Steps

After performing some successful test transactions, you need to fill out the SAQ-A form from PCI. Once this is completed, Buckaroo will enable Client-Side Encryption on your live channel.


Examples

EncryptCardData

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

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>&copy; 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>

Updated about 1 month ago