{"title":"Client-side authentication","category":"default","creationDate":1590760200,"content":"<p>We use your client key to authenticate requests from your payment environment. For example, <a href=\"\/online-payments\/drop-in-web\">Web Drop-in<\/a> and <a href=\"\/online-payments\/components-web\/\">Web Component<\/a> integrations need the client key to:<\/p>\n<ul>\n<li>Render input fields to securely collect and encrypt card details.<\/li>\n<li>Detect the card type from the number the shopper entered in the payment form.<\/li>\n<li>Do server-side barcode or QR code rendering for payment methods such as Swish or Boleto Banc\u00e1rio.<\/li>\n<\/ul>\n<p>The client key is not used when making requests to our APIs. For API requests, you need to <a href=\"\/development-resources\/api-credentials#generate-api-key\">get an API key<\/a>.<\/p>\n<p>With the client key, you have:<\/p>\n<ul>\n<li>A single key for all your <a href=\"\/development-resources\/client-side-authentication#allowed-origins\">allowed origins<\/a> in an environment.<\/li>\n<li>Flexibility to add and remove origins without having to generate a new client key.<\/li>\n<li>A human-readable prefix, <strong>test<\/strong> or <strong>live<\/strong>, so you can easily tell which environment a client key is linked to.<\/li>\n<\/ul>\n<h2 id=\"availability-compatibility\">Availability and compatibility<\/h2>\n<p>The client key is available for the following:<\/p>\n<table>\n<thead>\n<tr>\n<th>Online payments integration<\/th>\n<th>Version<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Web Drop-in and Components<\/td>\n<td>Available for 3.10.1 and later. Previous versions require <a href=\"\/development-resources\/how-to-get-an-origin-key\">origin keys<\/a> for client-side authentication. <br> Starting 4.0.0 the client key is the only way to do client-side authentication.<\/td>\n<\/tr>\n<tr>\n<td>iOS Drop-in and Components<\/td>\n<td>3.7.0 and later. <br> Previous versions require client encryption public keys. <br> Starting 4.0.0 the client key is the only way to do client-side authentication.<\/td>\n<\/tr>\n<tr>\n<td>Android Drop-in and Components<\/td>\n<td>3.7.0 and later. <br> Previous versions require client encryption public keys. <br> Starting 4.0.0 the client key is the only way to do client-side authentication.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th>In-person payments integration<\/th>\n<th>Solutions<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>POS Mobile SDK for iOS<\/td>\n<td>Tap to Pay on iPhone <br> Card reader&mdash;iOS<\/td>\n<\/tr>\n<tr>\n<td>POS Mobile SDK for Android<\/td>\n<td>Tap to Pay on Android <br> Card reader&mdash;Android<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"how-it-works\">How it works<\/h2>\n<p>The client key is a public key that uniquely identifies an API credential. Each API credential has a list of allowed origins, or domains from which we expect to get your requests. We make sure data cannot be accessed by unknown parties by using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CORS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Cross-Origin Resource Sharing<\/a>.<\/p>\n<p>A client key is linked to an API credential and its environment. The client key has two parts:<\/p>\n<ul>\n<li>A 32-character string encoding the API credential<\/li>\n<li>A human-readable environment prefix<\/li>\n<\/ul>\n<p>For example, <span translate=\"no\"><strong>test_870be2854add4f56b86778353010f36c<\/strong><\/span> is a client key for the test environment. When you switch to your live environment, you need to generate a client key in your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a>. The client key for your live environment will start with <span translate=\"no\"><strong>live_<\/strong><\/span>.<\/p>\n<h2 id=\"allowed-origins\">Allowed origins<\/h2>\n<p>Allowed origins are domains from which we expect to get your client-side requests.<\/p>\n<p>The allowed origins:<\/p>\n<ul>\n<li>Can include a wildcard, for example <code>https:\/\/*.example.org<\/code> includes both <code>https:\/\/blue.example.org<\/code> and <code>https:\/\/red.example.org<\/code>.<\/li>\n<li>Can be a <code>https<\/code> domain in the test environment or a <code>http<\/code> if it is a secure context, such as <code>http:\/\/127.0.0.1<\/code>, <code>http:\/\/localhost<\/code>, or <code>http:\/\/*.localhost<\/code>.<\/li>\n<li>Must have <code>https<\/code> in the live environment.<\/li>\n<\/ul>\n<p>Allowed origins are linked to the API credential, so you can <a href=\"#manage-allowed-origins\">add or remove allowed origins<\/a> without needing to generate a new client key.<\/p>\n<h2 id=\"get-your-client-key\">Get your client key<\/h2>\n<ol>\n<li>Log in to your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>.<\/li>\n<li>Go to <strong>Developers<\/strong> &gt; <strong>API credentials<\/strong>, and select the credential username for your integration, for example <strong>ws@Company.[YourCompanyAccount]<\/strong>.<\/li>\n<li>Under <strong>Client settings<\/strong> &gt; <strong>Authentication<\/strong> select the <strong>Client key<\/strong> tab.<\/li>\n<li>Select <strong>Generate client key<\/strong>.<\/li>\n<li>Select the copy icon <i class=\"adl-icon-copy\"><\/i> and store your client key securely in your system.<\/li>\n<li>Under <strong>Add allowed origins<\/strong>, enter your <a href=\"\/development-resources\/client-side-authentication#allowed-origins\">domains<\/a> and select <strong>Add<\/strong>.<\/li>\n<li>Select <strong>Save changes<\/strong>.<\/li>\n<\/ol>\n<p>If you generated a new client key, the old one expires after 24 hours.<\/p>\n<p>You now have a client key for your <span translate=\"no\"><strong>ws@Company.<\/strong><\/span><strong>[YourCompanyAccount]<\/strong> API credential, which is linked to your test environment. To get a client key for your live environment, follow the same steps in your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a>.<\/p>\n<h2>Manage allowed origins<\/h2>\n<p>You can add or remove allowed origins for an API credential without generating a new client key.<\/p>\n<ol>\n<li>Log in to your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a> .<\/li>\n<li>Go to <strong>Developers<\/strong> &gt; <strong>API credentials<\/strong>, and select the API credential for your Web Drop-in or Web Components integration, for example  <span translate=\"no\"><strong>ws@Company.<\/strong><\/span><strong>[YourCompanyAccount]<\/strong>.<\/li>\n<li>Under <strong>Allowed origins<\/strong>, enter a <a href=\"#allowed-origins\">domain<\/a> and select <strong>Add<\/strong>. To remove a domain select the remove origin icon <i class=\"adl-icon-bin\"><\/i> next to it.<\/li>\n<li>Select <strong>Save changes<\/strong>. It takes a few seconds for new allowed origins to become available for your application.<\/li>\n<\/ol>\n<h2 id=\"see-also\">See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/development-resources\/api-credentials\"\n                        target=\"_self\"\n                        >\n                    How to get the API key\n                <\/a><\/li><li><a href=\"\/online-payments\/drop-in-web\"\n                        target=\"_self\"\n                        >\n                    Web Drop-in\n                <\/a><\/li><li><a href=\"\/online-payments\/components-web\"\n                        target=\"_self\"\n                        >\n                    Web Components\n                <\/a><\/li><li><a href=\"\/development-resources\/client-side-authentication\/migrate-from-origin-key-to-client-key\"\n                        target=\"_self\"\n                        >\n                    Migrate from origin key to client key\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/development-resources\/client-side-authentication","articleFields":{"description":"Learn about the client key and how to generate it.","feedback_component":true,"parameters":{"web-version":"3.10.1","ios-version":"3.7.0","android-version":"3.7.0"},"last_edit_on":"20-10-2021 13:44","page_id":"74daaf11-dde4-406c-b4bf-3810a8f683ac","filters_component":false},"algolia":{"url":"https:\/\/docs.adyen.com\/development-resources\/client-side-authentication","title":"Client-side authentication","content":"We use your client key to authenticate requests from your payment environment. For example, Web Drop-in and Web Component integrations need the client key to:\n\nRender input fields to securely collect and encrypt card details.\nDetect the card type from the number the shopper entered in the payment form.\nDo server-side barcode or QR code rendering for payment methods such as Swish or Boleto Banc\u00e1rio.\n\nThe client key is not used when making requests to our APIs. For API requests, you need to get an API key.\nWith the client key, you have:\n\nA single key for all your allowed origins in an environment.\nFlexibility to add and remove origins without having to generate a new client key.\nA human-readable prefix, test or live, so you can easily tell which environment a client key is linked to.\n\nAvailability and compatibility\nThe client key is available for the following:\n\n\n\nOnline payments integration\nVersion\n\n\n\n\nWeb Drop-in and Components\nAvailable for 3.10.1 and later. Previous versions require origin keys for client-side authentication.  Starting 4.0.0 the client key is the only way to do client-side authentication.\n\n\niOS Drop-in and Components\n3.7.0 and later.  Previous versions require client encryption public keys.  Starting 4.0.0 the client key is the only way to do client-side authentication.\n\n\nAndroid Drop-in and Components\n3.7.0 and later.  Previous versions require client encryption public keys.  Starting 4.0.0 the client key is the only way to do client-side authentication.\n\n\n\n\n\n\nIn-person payments integration\nSolutions\n\n\n\n\nPOS Mobile SDK for iOS\nTap to Pay on iPhone  Card reader&mdash;iOS\n\n\nPOS Mobile SDK for Android\nTap to Pay on Android  Card reader&mdash;Android\n\n\n\nHow it works\nThe client key is a public key that uniquely identifies an API credential. Each API credential has a list of allowed origins, or domains from which we expect to get your requests. We make sure data cannot be accessed by unknown parties by using Cross-Origin Resource Sharing.\nA client key is linked to an API credential and its environment. The client key has two parts:\n\nA 32-character string encoding the API credential\nA human-readable environment prefix\n\nFor example, test_870be2854add4f56b86778353010f36c is a client key for the test environment. When you switch to your live environment, you need to generate a client key in your live Customer Area. The client key for your live environment will start with live_.\nAllowed origins\nAllowed origins are domains from which we expect to get your client-side requests.\nThe allowed origins:\n\nCan include a wildcard, for example https:\/\/*.example.org includes both https:\/\/blue.example.org and https:\/\/red.example.org.\nCan be a https domain in the test environment or a http if it is a secure context, such as http:\/\/127.0.0.1, http:\/\/localhost, or http:\/\/*.localhost.\nMust have https in the live environment.\n\nAllowed origins are linked to the API credential, so you can add or remove allowed origins without needing to generate a new client key.\nGet your client key\n\nLog in to your Customer Area.\nGo to Developers &gt; API credentials, and select the credential username for your integration, for example ws@Company.[YourCompanyAccount].\nUnder Client settings &gt; Authentication select the Client key tab.\nSelect Generate client key.\nSelect the copy icon  and store your client key securely in your system.\nUnder Add allowed origins, enter your domains and select Add.\nSelect Save changes.\n\nIf you generated a new client key, the old one expires after 24 hours.\nYou now have a client key for your ws@Company.[YourCompanyAccount] API credential, which is linked to your test environment. To get a client key for your live environment, follow the same steps in your live Customer Area.\nManage allowed origins\nYou can add or remove allowed origins for an API credential without generating a new client key.\n\nLog in to your Customer Area .\nGo to Developers &gt; API credentials, and select the API credential for your Web Drop-in or Web Components integration, for example  ws@Company.[YourCompanyAccount].\nUnder Allowed origins, enter a domain and select Add. To remove a domain select the remove origin icon  next to it.\nSelect Save changes. It takes a few seconds for new allowed origins to become available for your application.\n\nSee also\n\n\n                    How to get the API key\n                \n                    Web Drop-in\n                \n                    Web Components\n                \n                    Migrate from origin key to client key\n                \n","type":"page","locale":"en","boost":18,"hierarchy":{"lvl0":"Home","lvl1":"Development resources","lvl2":"Client-side authentication"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/development-resources","lvl2":"\/development-resources\/client-side-authentication"},"levels":3,"category":"Development Resources","category_color":"green","tags":["Client-side","authentication"]}}