---
title: "Client-Side Encryption (CSE)"
url: "https://docs.adyen.com/online-payments/classic-integrations/classic-api-integration/client-side-encryption"
source_url: "https://docs.adyen.com/online-payments/classic-integrations/classic-api-integration/client-side-encryption.md"
canonical: "https://docs.adyen.com/online-payments/classic-integrations/classic-api-integration/client-side-encryption"
last_modified: "2026-05-24T12:54:31+02:00"
language: "en"
---

# Client-Side Encryption (CSE)

[View source](/online-payments/classic-integrations/classic-api-integration/client-side-encryption.md)

**The Client-Side Encryption (CSE) Web integrations are being phased out**\
This means we are:

* No longer developing the CSE integration.
* Not accepting new CSE integrations.

Switch to one of our latest [Web integrations](/online-payments/build-your-integration/sessions-flow?platform=Web), to accept payments on your website.

Mobile integrations aren't affected.

**Local payment methods**

If you want to learn how to accept local payment methods, see [Directory Lookup](/online-payments/classic-integrations/hosted-payment-pages/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.

## Requirements

Before you begin to integrate, make sure you have followed the [Get started with Adyen guide](/get-started-with-adyen) to:

* Get an overview of the steps needed to accept live payments.
* Create your test account.

After you have created your test account:

* Get your [API key](/development-resources/api-credentials#generate-api-key) or [basic authentication](/development-resources/api-credentials#basic-authentication) credentials. Save a copy as you'll need it for API calls you make to the Adyen payments platform.
* Get the [Library location from the Customer Area](/online-payments/classic-integrations/classic-api-integration/client-side-encryption/cse-library-public-key-location-and-token). This is a unique URL for you to retrieve the CSE library hosted by Adyen.

## Overview

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

![](/user/pages/docs/02.online-payments/60.classic-integrations/01.classic-api-integration/01.client-side-encryption/cards-flow-cse.png)

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

## Client side

Create 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](https://docs.adyen.com/api-explorer/#/Payment/latest/authorise).

You must implement [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) in your CSE integration before March 31, 2025, to comply with [PCI DSS v4.0.1](/development-resources/pci-dss-compliance-guide/).

To implement Subresource Integrity for your CSE integration:

1. In your [Customer Area](https://ca-test.adyen.com/), go to **Developers** > **API credentials**, and select your web service user (**ws\@Company.\[YourCompanyAccount]**) from the users list.
2. Under **Client side encryption**, copy the **Integrity hash**.
3. Include your integrity hash when loading the CSE library.

```xml
<script type="text/javascript" src="https://test.adyen.com/hpp/cse/js/[YOUR_UNIQUE_GENERATED_LIBRARY].shtml"
        integrity="[YOUR_INTEGRITY_HASH]"
        crossorigin="anonymous">
</script>
<form method="POST" action="[YOUR_PAYMENT_HANDLER_URL]" 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 on 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](http://www.w3.org/TR/NOTE-datetime);  YYYY-MM-DDThh:mm:ss.sssTZD[](http://www.w3.org/TR/NOTE-datetime)
* 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:

```js
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` ](https://docs.adyen.com/api-explorer/#/Payment/authorise) endpoint.

### Authorise request

**Test cards**

To test the payment request, use one of our [test credit cards](/development-resources/test-cards-and-credentials/test-card-numbers).

In this request, include `merchantAccount`, `reference`, 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](/development-resources/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

#### JSON

```json
{
   "additionalData":{
      "card.encrypted.json":"adyenjs_0_1_4p1$..."
   },
   "amount":{
      "value":20000,
      "currency":"EUR"
   },
   "reference":"YOUR_REFERENCE",
   "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
}
```

#### Soap

```xml
<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">YOUR_MERCHANT_ACCOUNT</merchantAccount>
            <reference xmlns="http://payment.services.adyen.com">YOUR_REFERENCE</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">YOUR_UNIQUE_SHOPPER_ID</shopperReference>
         </ns1:paymentRequest>
      </ns1:authorise>
   </soap:Body>
</soap:Envelope>
```

To know more about the required fields, see [PaymentRequest](https://docs.adyen.com/api-explorer/#/Payment/latest/authorise).

### Authorise response

If the message passes validation, Adyen performs a [risk analysis](/risk-management/configure-standard-risk-rules). 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.



```json
{
  "pspReference": "8814689190961342",
  "resultCode": "Authorised"
}
```

To make sure your integration can handle unhappy scenarios, you can [test getting different refusal reasons](/development-resources/testing/result-codes/classic-api) with your integration.

For other possible response codes and fields of the payment response, refer to [PaymentResult](https://docs.adyen.com/api-explorer/#/Payment/latest/authorise__section_resParams).







## Next steps

[required](/online-payments/capture)

[Capture a payment](/online-payments/capture)

[Capture approved authorisation when it is necessary to complete the payment.](/online-payments/capture)

[required](/development-resources/webhooks)

[Set up webhooks](/development-resources/webhooks)

[Receive confirmation when a payment is authorised or fails.](/development-resources/webhooks)

[required](/development-resources/pci-dss-compliance-guide#online-payments)

[Go live](/development-resources/pci-dss-compliance-guide#online-payments)

[Before going live, fill out the SAQ-A form and Adyen will add the Client-Side Encryption (CSE) role to your API credential.](/development-resources/pci-dss-compliance-guide#online-payments)