3DS2 Client SDK

The 3DS2 Client SDK is a JavaScript library that enables the implementation of 3DS2 authentication following a PayEncrypted (or AuthorizeEncrypted) request. For more information on Client-Side Encryption, refer to the CSE SDK and the Credit Card documentation. You can use the SDK by referencing the following link: https://checkout.buckaroo.nl/api/3ds2/ClientSdk or by downloading the library and integrating it into your client code.

Currently, 3DS2 is available for the following card types:

• Visa
• MasterCard
• Maestro
• VisaElectron
• CarteBleue
• CarteBancaire
• VPAY
• Dankort
• Nexi.

Download Library here:

• ClientSdk.js

How to Use the 3DS2 Client SDK

After performing a PayEncrypted (or AuthorizeEncrypted) action, you will receive a response that includes a ThreeDsVersion parameter in the service-specific output parameters. If this parameter starts with "2" (e.g., "2.1.0"), you should call the Buckaroo3ds.Client.initiateAuthentication function on the client side. Otherwise, redirect the consumer to the RedirectUrl.

initiateAuthentication Function

The initiateAuthentication function requires a DOM element where an iframe will be rendered. This element must be visible to the consumer, as it will display a challenge from the issuing bank. The size of the iframe can be set using the challengeWindowSize property of the Buckaroo3ds.ClientRequestClasses.OptionalData object. Available sizes are:

• Small (250 x 400 pixels) or "1"
• Medium (390 x 400 pixels) or "2"
• LargeHeight (500 x 600 pixels) or "3"
• LargeWidth (600 x 400 pixels) or "4"
• FullScreen or "5"

The default size is Small.

After the initiateAuthentication function is called, the SDK will take care of the rest. It will request 3DS2 authentication and after the authentication is successful it will finalize (authorize at the acquirer) the transaction. At certain moments during the processing, the callbacks are given in the Buckaroo3ds.Client.Options object will be called. When the finalize step is performed, either the finalizeSuccesCallback or the finalizeFailedCallback will be called with a ThreeDsEvent object which will contain a ReturnUrl in its data, so the consumer may be redirected to this ReturnUrl. A more detailed explanation of the Buckaroo3ds.Client.Options object can be found below.

Buckaroo3ds.Client.initiateAuthentication function

The initiateAuthentication function has the following parameters:

payEncryptedRequestXhr.onload(function() {
	if (payEncryptedRequestXhr.status >= 200 && payEncryptedRequestXhr.status < 400) {
		var response = JSON.parse(payEncryptedRequestXhr.response);
		var threeDsVersion = response.Services[0].Parameters.filter(param => param.Name === "ThreeDsVersion")[0].Value;
		if (response.Status.Code.Code === 791 && threeDsVersion && threeDsVersion[0] === "2") {
			var browserAcceptHeader = document.querySelector("#browserAcceptHeader").value;
			var optionalData = null; // Create a new Buckaroo3ds.ClientRequestClasses.OptionalData object.
			var options = null; // Create a new Buckaroo3ds.Client.Options object.
			Buckaroo3ds.Client.initiateAuthentication(response.Key, "#iframeDiv", browserAcceptHeader, optionalData, options);
		}
	}
});

Buckaroo3ds.Client.Options object

This object can be filled with callback functions which will be triggered on the given events. All callback functions will be fed with Buckaroo3ds.Client.ThreeDsEvent object, which consists of a fail reason (failReason), some data (data) and a method completion indicator (methodCompletionIndicator).