{"title":"Hosting the CSE library","category":"default","creationDate":1776961627,"content":"<div class=\"sc-notice warning\"><div>\n<p><strong>The Client-Side Encryption (CSE) Web integrations are being phased out<\/strong><br \/>\nThis means we are:<\/p>\n<ul>\n<li>No longer developing the CSE integration.<\/li>\n<li>Not accepting new CSE integrations.<\/li>\n<\/ul>\n<p>Switch to one of our latest <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web\">Web integrations<\/a>, to accept payments on your website.<\/p>\n<p>Mobile integrations aren't affected.<\/p>\n<\/div><\/div>\n<p>We strongly recommend that you let Adyen host the Client-Side Encryption (CSE) library for you, <a href=\"\/pt\/online-payments\/classic-integrations\/classic-api-integration\/client-side-encryption\">while you are retrieving it from a unique URL<\/a>. However, you can optionally host this library by yourself or embed it into your form, as explained in this topic.<\/p>\n<h2 id=\"before-you-begin\">Requirements<\/h2>\n<ul>\n<li>Get the\u00a0<a href=\"\/pt\/online-payments\/classic-integrations\/classic-api-integration\/client-side-encryption\/cse-library-public-key-location-and-token\">Public key from your Customer Area<\/a>.\u00a0Save a copy\u00a0as you'll need it for\u00a0using the CSE library\u00a0to encrypt the payment details on the client side.<\/li>\n<\/ul>\n<h2 id=\"merchant-hosted\">Merchant hosted<\/h2>\n<p>This integration binds to existing HTML in the page, adding a hidden input containing the encrypted card data to the form\u00a0at\u00a0the 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\u00a0behavior.<\/p>\n<ol>\n<li>Download\u00a0<code>adyen.encrypt.min.js<\/code>\u00a0and\u00a0host it yourself. This supports both HTML-based and JavaScript-only integrations.<\/li>\n<li>Download\u00a0<code>adyen.encrypt.nodom.min.js<\/code>\u00a0and\u00a0host it yourself. Only supports JavaScript-only integration.<\/li>\n<\/ol>\n<h3 id=\"form-template\">Form template<\/h3>\n<p>Build your payment form using this template and add a way to reference to this form from JavaScript. For example, define a unique\u00a0<code>id<\/code>\u00a0attribute value for this form by adding\u00a0<code>id=\"adyen-encrypted-form\"<\/code>.<\/p>\n<pre><code class=\"language-xml\">&lt;form method=\"POST\" action=\"#handler\" id=\"adyen-encrypted-form\"&gt;\n    &lt;input type=\"text\" size=\"20\" autocomplete=\"off\" data-encrypted-name=\"number\" \/&gt;\n    &lt;input type=\"text\" size=\"20\" autocomplete=\"off\" data-encrypted-name=\"holderName\" \/&gt;\n    &lt;input type=\"text\" size=\"2\" maxlength=\"2\" autocomplete=\"off\" data-encrypted-name=\"expiryMonth\" \/&gt;\n    &lt;input type=\"text\" size=\"4\" maxlength=\"4\" autocomplete=\"off\" data-encrypted-name=\"expiryYear\" \/&gt;\n    &lt;input type=\"text\" size=\"4\" maxlength=\"4\" autocomplete=\"off\" data-encrypted-name=\"cvc\" \/&gt;\n    &lt;input type=\"hidden\" value=\"generate-this-server-side\" data-encrypted-name=\"generationtime\" \/&gt;\n    &lt;input type=\"submit\" value=\"Pay\" \/&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Also, do the following:<\/p>\n<ul>\n<li>\n<p>For the <code>form.action<\/code> attribute, replace #handler to the payment handler URL on your server.<\/p>\n<\/li>\n<li>\n<p>Card input fields should not have a\u00a0<code>name<\/code> attribute, but are annotated by the <code>data-encrypted-name<\/code>\u00a0attribute, to mark them for encryption.<\/p>\n<div class=\"sc-notice note\"><div>\n<p>Replacing name with <code>data-encrypted-name<\/code> restricts raw card data from being posted to your servers and avoids impact transaction security and violate <a href=\"https:\/\/en.wikipedia.org\/wiki\/Payment_Card_Industry_Data_Security_Standard\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">PCI regulations<\/a>.<\/p>\n<\/div><\/div>\n<\/li>\n<li>\n<p>Add a hidden\u00a0\u00a0<code>generationtime<\/code>\u00a0field\u00a0to include a server-side timestamp\u00a0in 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.<\/p>\n<ul>\n<li>Format:\u00a0<a href=\"http:\/\/www.w3.org\/TR\/NOTE-datetime\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">ISO 8601<\/a>;\u00a0\u00a0YYYY-MM-DDThh:mm:ss.sssTZD<a href=\"http:\/\/www.w3.org\/TR\/NOTE-datetime\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\"><\/a><\/li>\n<li>Example:\u00a0<em>2017-07-17T13:42:40.428+01:00<\/em><\/li>\n<\/ul>\n<div class=\"sc-notice note\"><div>\n<p>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.<\/p>\n<\/div><\/div>\n<\/li>\n<\/ul>\n<h3 id=\"javascript\">JavaScript<\/h3>\n<p>In addition\u00a0to the above the HTML template, there are two variants to including the library. The original plain JavaScript variant relies on a\u00a0global\u00a0<code>adyen.encrypt<\/code>\u00a0object, while on popular demand\u00a0an AMD\u00a0style module has been added.<\/p>\n<h3 id=\"plain-javascript\">Plain JavaScript<\/h3>\n<p>Include the Adyen encryption library to your page.<\/p>\n<pre><code class=\"language-xml\">&lt;script type=\"text\/javascript\" src=\"js\/adyen.encrypt.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Enrich\u00a0a form in your page with the library on submit and (optionally) validation behaviors.<\/p>\n<pre><code class=\"language-js\">\/\/ The form element to encrypt.\nvar form    = document.getElementById('adyen-encrypted-form');\n\n\/\/ The public key.\nvar key     =   \"your key as retrieved from the Customer Area Web Service user page\";\n\n\/\/ Form and encryption options. See adyen.encrypt.simple.html for details.\nvar options = {};\n\n\/\/ Bind encryption to the form.\nadyen.encrypt.createEncryptedForm(form, key, options);<\/code><\/pre>\n<h3 id=\"require-js\">Require.js<\/h3>\n<p>Make sure that you include require.js or an alternative AMD module loader in your page.<\/p>\n<pre><code class=\"language-xml\">&lt;script src=\"path\/to\/libs\/require.js\/2.1.17\/require.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>You can either rename the\u00a0<code>adyen.encrypt.min.js<\/code>\u00a0to\u00a0<code>adyen\/encrypt.js<\/code>,\u00a0or add a paths configuration:<\/p>\n<pre><code class=\"language-xml\">\/\/ Your paths config, or rename the adyen.encrypt.min.js to adyen\/encrypt.js require.config({ paths: { 'adyen\/encrypt' :\n'..\/simple\/js\/adyen.encrypt.min' } });<\/code><\/pre>\n<p>In the\u00a0<code>main.js<\/code> or a similar file, enrich the form using a\u00a0<code>require<\/code> call.<\/p>\n<pre><code class=\"language-js\">require(['adyen\/encrypt'], function(adyenEncrypt) {\n    \/\/ The form element to encrypt.\n    var form    = document.getElementById('adyen-encrypted-form');\n\n    \/\/ The public key.\n    var key     =   \"your key as retrieved from the Customer Area Web Service user page\";\n\n    \/\/ Form and encryption options. See adyen.encrypt.simple.html for details\n    var options = {};\n\n    \/\/ Bind encryption to the form.\n    adyenEncrypt.createEncryptedForm(form, key, options);\n});\n&lt;\/script&gt;<\/code><\/pre>\n<h2 id=\"javascript-only\">JavaScript only<\/h2>\n<p>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.<\/p>\n<p>Make sure that you encrypt the card data before sending to your server.<\/p>\n<pre><code class=\"language-xml\">&lt;script type=\"text\/javascript\" src=\"js\/adyen.encrypt.nodom.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n(function() {\n    var key     =   \"your key as retrieved from the Adyen Customer Area Web Service user page\";\n    var options = {}; \/\/ See adyen.encrypt.nodom.html for details\n\n    var cseInstance = adyen.encrypt.createEncryption(key, options);\n\n    function encryptMyData() {\n\n        var postData = {};\n\n        var cardData = {\n            number : cardNumber,\n            cvc : cvc,\n            holderName : holderName,\n            expiryMonth : expiryMonth,\n            expiryYear : expiryYear,\n            generationtime : generationtime\n        };\n\n        postData['adyen-encrypted-data'] = cseInstance.encrypt(cardData);\n\n        \/\/ AJAX call or different handling of the post data.\n    }\n\n})();\n&lt;\/script&gt;<\/code><\/pre>","url":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/classic-api-integration\/client-side-encryption\/hosting-the-cse-library","articleFields":{"description":"Host the Client-Side Encryption library on your server.","id":"28869686","type":"page","_expandable":{"operations":""},"status":"current","last_edit_on":"22-04-2019 23:28","sitemap":{"priority":0.3}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/classic-api-integration\/client-side-encryption\/hosting-the-cse-library","title":"Hosting the CSE library","content":"\nThe Client-Side Encryption (CSE) Web integrations are being phased out\nThis means we are:\n\nNo longer developing the CSE integration.\nNot accepting new CSE integrations.\n\nSwitch to one of our latest Web integrations, to accept payments on your website.\nMobile integrations aren't affected.\n\nWe 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.\nRequirements\n\nGet the\u00a0Public key from your Customer Area.\u00a0Save a copy\u00a0as you'll need it for\u00a0using the CSE library\u00a0to encrypt the payment details on the client side.\n\nMerchant hosted\nThis integration binds to existing HTML in the page, adding a hidden input containing the encrypted card data to the form\u00a0at\u00a0the 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\u00a0behavior.\n\nDownload\u00a0adyen.encrypt.min.js\u00a0and\u00a0host it yourself. This supports both HTML-based and JavaScript-only integrations.\nDownload\u00a0adyen.encrypt.nodom.min.js\u00a0and\u00a0host it yourself. Only supports JavaScript-only integration.\n\nForm template\nBuild your payment form using this template and add a way to reference to this form from JavaScript. For example, define a unique\u00a0id\u00a0attribute value for this form by adding\u00a0id=\"adyen-encrypted-form\".\n&lt;form method=\"POST\" action=\"#handler\" id=\"adyen-encrypted-form\"&gt;\n    &lt;input type=\"text\" size=\"20\" autocomplete=\"off\" data-encrypted-name=\"number\" \/&gt;\n    &lt;input type=\"text\" size=\"20\" autocomplete=\"off\" data-encrypted-name=\"holderName\" \/&gt;\n    &lt;input type=\"text\" size=\"2\" maxlength=\"2\" autocomplete=\"off\" data-encrypted-name=\"expiryMonth\" \/&gt;\n    &lt;input type=\"text\" size=\"4\" maxlength=\"4\" autocomplete=\"off\" data-encrypted-name=\"expiryYear\" \/&gt;\n    &lt;input type=\"text\" size=\"4\" maxlength=\"4\" autocomplete=\"off\" data-encrypted-name=\"cvc\" \/&gt;\n    &lt;input type=\"hidden\" value=\"generate-this-server-side\" data-encrypted-name=\"generationtime\" \/&gt;\n    &lt;input type=\"submit\" value=\"Pay\" \/&gt;\n&lt;\/form&gt;\nAlso, do the following:\n\n\nFor the form.action attribute, replace #handler to the payment handler URL on your server.\n\n\nCard input fields should not have a\u00a0name attribute, but are annotated by the data-encrypted-name\u00a0attribute, to mark them for encryption.\n\nReplacing name with data-encrypted-name restricts raw card data from being posted to your servers and avoids impact transaction security and violate PCI regulations.\n\n\n\nAdd a hidden\u00a0\u00a0generationtime\u00a0field\u00a0to include a server-side timestamp\u00a0in 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.\n\nFormat:\u00a0ISO 8601;\u00a0\u00a0YYYY-MM-DDThh:mm:ss.sssTZD\nExample:\u00a02017-07-17T13:42:40.428+01:00\n\n\nThe 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.\n\n\n\nJavaScript\nIn addition\u00a0to the above the HTML template, there are two variants to including the library. The original plain JavaScript variant relies on a\u00a0global\u00a0adyen.encrypt\u00a0object, while on popular demand\u00a0an AMD\u00a0style module has been added.\nPlain JavaScript\nInclude the Adyen encryption library to your page.\n&lt;script type=\"text\/javascript\" src=\"js\/adyen.encrypt.min.js\"&gt;&lt;\/script&gt;\nEnrich\u00a0a form in your page with the library on submit and (optionally) validation behaviors.\n\/\/ The form element to encrypt.\nvar form    = document.getElementById('adyen-encrypted-form');\n\n\/\/ The public key.\nvar key     =   \"your key as retrieved from the Customer Area Web Service user page\";\n\n\/\/ Form and encryption options. See adyen.encrypt.simple.html for details.\nvar options = {};\n\n\/\/ Bind encryption to the form.\nadyen.encrypt.createEncryptedForm(form, key, options);\nRequire.js\nMake sure that you include require.js or an alternative AMD module loader in your page.\n&lt;script src=\"path\/to\/libs\/require.js\/2.1.17\/require.min.js\"&gt;&lt;\/script&gt;\nYou can either rename the\u00a0adyen.encrypt.min.js\u00a0to\u00a0adyen\/encrypt.js,\u00a0or add a paths configuration:\n\/\/ Your paths config, or rename the adyen.encrypt.min.js to adyen\/encrypt.js require.config({ paths: { 'adyen\/encrypt' :\n'..\/simple\/js\/adyen.encrypt.min' } });\nIn the\u00a0main.js or a similar file, enrich the form using a\u00a0require call.\nrequire(['adyen\/encrypt'], function(adyenEncrypt) {\n    \/\/ The form element to encrypt.\n    var form    = document.getElementById('adyen-encrypted-form');\n\n    \/\/ The public key.\n    var key     =   \"your key as retrieved from the Customer Area Web Service user page\";\n\n    \/\/ Form and encryption options. See adyen.encrypt.simple.html for details\n    var options = {};\n\n    \/\/ Bind encryption to the form.\n    adyenEncrypt.createEncryptedForm(form, key, options);\n});\n&lt;\/script&gt;\nJavaScript only\nIn 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.\nMake sure that you encrypt the card data before sending to your server.\n&lt;script type=\"text\/javascript\" src=\"js\/adyen.encrypt.nodom.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n(function() {\n    var key     =   \"your key as retrieved from the Adyen Customer Area Web Service user page\";\n    var options = {}; \/\/ See adyen.encrypt.nodom.html for details\n\n    var cseInstance = adyen.encrypt.createEncryption(key, options);\n\n    function encryptMyData() {\n\n        var postData = {};\n\n        var cardData = {\n            number : cardNumber,\n            cvc : cvc,\n            holderName : holderName,\n            expiryMonth : expiryMonth,\n            expiryYear : expiryYear,\n            generationtime : generationtime\n        };\n\n        postData['adyen-encrypted-data'] = cseInstance.encrypt(cardData);\n\n        \/\/ AJAX call or different handling of the post data.\n    }\n\n})();\n&lt;\/script&gt;","type":"page","locale":"pt","boost":15,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Classic integrations for Ecommerce","lvl3":"Classic API integration","lvl4":"Client-Side Encryption (CSE)","lvl5":"Hosting the CSE library"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/online-payments","lvl2":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations","lvl3":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/classic-api-integration","lvl4":"https:\/\/docs.adyen.com\/pt\/online-payments\/classic-integrations\/classic-api-integration\/client-side-encryption","lvl5":"\/pt\/online-payments\/classic-integrations\/classic-api-integration\/client-side-encryption\/hosting-the-cse-library"},"levels":6,"category":"Online Payments","category_color":"green","tags":["Hosting","library"]}}