Hosting the CSE library

We strongly recommend that you let Adyen host the Client-Side Encryption (CSE) library for you, while you are retrieving it from a unique URL. However, you can optionally host this library by yourself or embed it into your form, as explained in this topic.

Requirements

• Get the Public key from your Customer Area. Save a copy as you'll need it for using the CSE library to encrypt the payment details on the client side.

Merchant hosted

This integration binds to existing HTML in the page, adding a hidden input containing the encrypted card data to the form at the moment the form is submitted. The complete integration requires HTML markup to be present in the page, as well as accompanying JavaScript to enable the behavior.

1. Download adyen.encrypt.min.js and host it yourself. This supports both HTML-based and JavaScript-only integrations.
2. Download adyen.encrypt.nodom.min.js and host it yourself. Only supports JavaScript-only integration.

Form template

Build your payment form using this template and add a way to reference to this form from JavaScript. For example, define a unique id attribute value for this form by adding id="adyen-encrypted-form".

<form method="POST" action="#handler" id="adyen-encrypted-form">
    <input type="text" size="20" autocomplete="off" data-encrypted-name="number" />
    <input type="text" size="20" autocomplete="off" data-encrypted-name="holderName" />
    <input type="text" size="2" maxlength="2" autocomplete="off" data-encrypted-name="expiryMonth" />
    <input type="text" size="4" maxlength="4" autocomplete="off" data-encrypted-name="expiryYear" />
    <input type="text" size="4" maxlength="4" autocomplete="off" data-encrypted-name="cvc" />
    <input type="hidden" value="generate-this-server-side" data-encrypted-name="generationtime" />
    <input type="submit" value="Pay" />
</form>

Also, do the following:

• For the form.action attribute, replace #handler to the payment handler URL on your server.

• Card input fields should not have a name attribute, but are annotated by the data-encrypted-name attribute, to mark them for encryption.

  Replacing name with data-encrypted-name restricts raw card data from being posted to your servers and avoids impact transaction security and violate PCI regulations.

• Add a hidden  generationtime field to include a server-side timestamp in the data you submit with the form. It determines whether a payment request is valid or not: transactions submitted later than 24 hours from the timestamp value are refused.

  • Format: ISO 8601;  YYYY-MM-DDThh:mm:ss.sssTZD
  • Example: 2017-07-17T13:42:40.428+01:00

  The generation time value must be created server-side, because the client browser system clock may not be correctly synchronized, which would cause the payment transaction to fail.

JavaScript

In addition to the above the HTML template, there are two variants to including the library. The original plain JavaScript variant relies on a global adyen.encrypt object, while on popular demand an AMD style module has been added.

Plain JavaScript

Include the Adyen encryption library to your page.

<script type="text/javascript" src="js/adyen.encrypt.min.js"></script>

Enrich a form in your page with the library on submit and (optionally) validation behaviors.

// The form element to encrypt.
var form    = document.getElementById('adyen-encrypted-form');

// The public key.
var key     =   "your key as retrieved from the Customer Area Web Service user page";

// Form and encryption options. See adyen.encrypt.simple.html for details.
var options = {};

// Bind encryption to the form.
adyen.encrypt.createEncryptedForm(form, key, options);

Require.js

Make sure that you include require.js or an alternative AMD module loader in your page.

<script src="path/to/libs/require.js/2.1.17/require.min.js"></script>

You can either rename the adyen.encrypt.min.js to adyen/encrypt.js, or add a paths configuration:

// Your paths config, or rename the adyen.encrypt.min.js to adyen/encrypt.js require.config({ paths: { 'adyen/encrypt' :
'../simple/js/adyen.encrypt.min' } });

In the main.js or a similar file, enrich the form using a require call.

require(['adyen/encrypt'], function(adyenEncrypt) {
    // The form element to encrypt.
    var form    = document.getElementById('adyen-encrypted-form');

    // The public key.
    var key     =   "your key as retrieved from the Customer Area Web Service user page";

    // Form and encryption options. See adyen.encrypt.simple.html for details
    var options = {};

    // Bind encryption to the form.
    adyenEncrypt.createEncryptedForm(form, key, options);
});
</script>

JavaScript only

In case the HTML integration does not fulfill your setup requirements, the library has been split up into two parts. The newly introduced part is an HTML-independent encryption.

Make sure that you encrypt the card data before sending to your server.

<script type="text/javascript" src="js/adyen.encrypt.nodom.min.js"></script>
<script type="text/javascript">
(function() {
    var key     =   "your key as retrieved from the Adyen Customer Area Web Service user page";
    var options = {}; // See adyen.encrypt.nodom.html for details

    var cseInstance = adyen.encrypt.createEncryption(key, options);

    function encryptMyData() {

        var postData = {};

        var cardData = {
            number : cardNumber,
            cvc : cvc,
            holderName : holderName,
            expiryMonth : expiryMonth,
            expiryYear : expiryYear,
            generationtime : generationtime
        };

        postData['adyen-encrypted-data'] = cseInstance.encrypt(cardData);

        // AJAX call or different handling of the post data.
    }

})();
</script>