Client-Side Encryption (CSE)

This section describes the classic integration with the Adyen payments platform. To know more about a newer integration, refer to the Checkout documentation instead.

Local payment methods

If you want to learn how to accept local payment methods, see Directory Lookup.

The Client-Side Encryption (CSE) integration lets you accept payments on your website and mobile application while encrypting card data in your shopper's browser using the Adyen encryption library.

To help you encrypt all sensitive card data on a client side, Adyen can host the JavaScript library and your key. In addition, you can decide to host the library by yourself, or use only the JavaScript in the HTML page.

Before you begin

Overview

Your card payments go through many stages. The diagram below helps you understand the flow:

If you are integrating the Adyen payments platform with a third-party system, we strongly recommend you follow defensive programming best practices.

Client side

Start by creating a payment form integrated with the Client-Side Encryption (CSE) library, which you can retrieve using the unique URL provided to you by Adyen.

Ensure that your payment form includes the mandatory fields. To test the given code example, replace [payment request handler] with your payment handler URL of your server.

<script type="text/javascript" src="https://test.adyen.com/hpp/cse/js/[your unique generated library].shtml"></script>
<form method="POST" action="[payment request handler]" id="adyen-encrypted-form">
    <input type="text" size="20" data-encrypted-name="number"/>
    <input type="text" size="20" data-encrypted-name="holderName"/>
    <input type="text" size="2" data-encrypted-name="expiryMonth"/>
    <input type="text" size="4" data-encrypted-name="expiryYear"/>
    <input type="text" size="4" data-encrypted-name="cvc"/>
    <input type="hidden" value="[generate this server side]" data-encrypted-name="generationtime"/>
    <input type="submit" value="Pay"/>
</form>
<script>
// The form element to encrypt.
var form = document.getElementById('adyen-encrypted-form');
// See https://github.com/Adyen/CSE-JS/blob/master/Options.md for details on the options to use.
var options = {};
// Bind encryption options to the form.
adyen.createEncryptedForm(form, options);
</script>

You must encrypt card input fields by annotating them with the data-encrypted-name attribute. Do not use the name attribute.

This ensures that the call does not send unencrypted card data to your server.

The generationtime field is used to include a server-side timestamp in the data you submit the form. It determines whether a payment request is valid or not. Adyen refuses the transactions sent later than 24 hours from the timestamp. This value must be obtained on the server-side as the client’s system clock may not be correctly synchronized which can cause the payment transaction to fail.

generationtime:

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

Prevent payment form reload

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 encryptedBlobFieldName = "myFieldName";

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

adyen.createEncryptedForm(form, options);

Server side

From your server, make an HTTP POST request to the  /authorise  endpoint.

Authorise request

Test cards

To test the payment request, use one of our test credit cards.

In this request, include  merchantAccountreference, and the payment  amount. The amount's value is in minor units, e.g. 20000 is 200 euros. You can find the number of decimal points per currency in  Currency codes.



The additionalData object in the payment authorisation request needs to include card.encrypted.json, which you should set to the adyen.encrypted.data value. This value contains encrypted information about the shopper's credit card, as well as the timestamp:

  • Card holder
  • Card number
  • CVC
  • Expiry date
  • Generation time
{
   "additionalData":{
      "card.encrypted.json":"adyenjs_0_1_4p1$..."
   },
   "amount":{
      "value":20000,
      "currency":"EUR"
   },
   "reference":"Your Reference Here",
   "merchantAccount":"TestMerchant"
}
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <soap:Body>
      <ns1:authorise xmlns:ns1="http://payment.services.adyen.com">
         <ns1:paymentRequest>
            <additionalData xmlns="http://payment.services.adyen.com">
               <entry>
                  <key xsi:type="xsd:string">card.encrypted.json</key>
                  <value xsi:type="xsd:string">Your generated key string from the JavaScript encryption... adyenjs_0_1_1$eGcJxidHkg5LYQ...m2uZkto4PKRW4YCA8dZYQ ==</value>
               </entry>
            </additionalData>
            <amount xmlns="http://payment.services.adyen.com">
               <currency xmlns="http://common.services.adyen.com">EUR</currency>
               <value xmlns="http://common.services.adyen.com">2000</value>
            </amount>
            <merchantAccount xmlns="http://payment.services.adyen.com">TestMerchant</merchantAccount>
            <reference xmlns="http://payment.services.adyen.com">Your Reference Here</reference>
            <shopperEmail xmlns="http://payment.services.adyen.com">s.hopper@test.com</shopperEmail>
            <shopperIP xmlns="http://payment.services.adyen.com">61.294.12.12</shopperIP>
            <shopperReference xmlns="http://payment.services.adyen.com">Simon Hopper</shopperReference>
         </ns1:paymentRequest>
      </ns1:authorise>
   </soap:Body>
</soap:Envelope>

To know more about the required fields, see PaymentRequest.

Authorise response

If the message passes validation, Adyen performs a risk analysis. Depending on the outcome, we attempt authorisation, and you receive a payment response. The response includes a PSP reference that uniquely identifies each payment and can be used later for capture, cancel, or refund.



{
  "pspReference": "8814689190961342",
  "resultCode": "Authorised",
  "authCode": "83152"
}

For other possible response codes and fields of the payment response, refer to PaymentResult.







Next steps

Capture a payment

Capture approved authorisation when it's necessary to complete the payment.

link

Set up notifications

Receive confirmation when a payment is authorised or fails.

link

Go live

Before going live, fill out the SAQ-A form and Adyen will add the Client-Side Encryption (CSE) role to your web service user.

link