The Client Side Encryption SDK is a JavaScript libarary 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.

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.

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 EncryptCardData function can be used.

copy
BuckarooClientSideEncryption.V001.encryptCardData(
	"5386860000000000", // Card Number
	"2020", 			// Card Expiration Year
	"12", 				// Card Expiration Month
	"123", 				// CVC
	"John Williams",	// Cardholder Name
	function (encryptedCardData) {
		// encryptedCardData like "001I0OZG50NLDrAa9Nnyo57FdDfiisjyypr2DcdD/uAqeDXpZqquJq4UFDjZ+XnsVr6D9xhR5jA8bVSdMGi5UQBFVaS8+NtRxpZWr0chAeGiJ8z9uvCsQ3NB0hKdy8kDRKNXpghcZJTNioRwRWsuUNV0ZBIlk7D3hYd7EFZ/xbWaO4t+e8mqCuk9pdbpO+jtcunAp8PvjzIUATHgmx0fu+4RaNByLz5dPXmnBnRYf4VAYsgQisxcnhyt5HJdUGhFMsa8L7A77PYKmRy2K/GqKoIOWbsKWQYqQC3xn5mc8sX2UJUM/JFZArkCpa4qbberA4zONekWvyB6tosvl+IJ8E0wQ=="
		// Create transaction request to Buckaroo with as EncryptedCardData the encryptedCardData
	}
);

Example site

This example site shows how all the functions in the CSE libary can be used.

copy
<!DOCTYPE html>
<html>
    <head>
        <title>Home Page - CSETest</title>
        <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" />
        <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>
            </div>
            <hr />
            <footer>
                <p>&copy; 2018 - CSETest</p>
            </footer>
        </div>
        <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>
$(function() {
    $(document).on('click', '.submit', submit);
    $("#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);
        });
}
        </script>
    </body>
</html>