Adyen hosted

In this case an Easy Encryption library is hosted by Adyen with your public key injected into JavaScript code. You retrieve this library from the unique URL provided to you by Adyen, and thus you don't need to download and host the adyen.encrypt.min.js on your own servers.

Log in the  Adyen Customer Area (CA) using your company-level account.
  1. Go to Settings → Users and filter the list of users by System in the drop-down box.
  2. Navigate to the Web Service (ws) user page.
  3. Go to Easy Encryption → Library location.
    If the library is not available yet, click Generate and then Save to create a new URL.

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. 

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

JavaScript

<script type="text/javascript" src="https://test.adyen.com/hpp/cse/js/{your Test WS user's library token}.shtml"></script>
<!-- For live: 
   <script type="text/javascript" src="https://live.adyen.com/hpp/cse/js/{your Live WS user's library token}.shtml"></script>
   Note that this token is not your public key, but a library token instead.
-->

Initialise the easy encryption form as in the normal HTML Form based integration. Note that the AMD style is not yet available for the hosted EE library.

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

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

// Create the form.
// Note that the method is on the adyen object, not the adyen.encrypt object.
adyen.createEncryptedForm(form, options); 
</script>


If you have implemented a single-page interface and do not want the form to reload the page when the payment gets submitted, implement the onsubmit option.

After including the JavaScript cryptographic library, you can use JavaScript or AJAX to customize the POST submission behaviour.

For example, you can:

  • Pass an additional options parameter in the createEncryptedForm method.
  • Change the name of the encrypted data container. Its default name is adyen-encrypted-data.
  • Submit the form using AJAX instead of the default submit action, as shown in this example:
var encryptedBloblFieldName = "myFieldName";

options.name = encryptedBlobFieldName;
options.onsubmit = function(e) {
    var encryptedData = form.elements[encryptedBlobFieldName].value;
    // ... Your AJAX code here ....
    e.preventDefault();
};

adyen.createEncryptedForm(form, options);