{"title":"API only with encrypted card data","category":"default","creationDate":1776961628,"content":"<p>To ensure PCI compliance when you build your own cards payment form, use our client-side solutions to help encrypt card details.<\/p>\n\n<div id=\"tabgUfnd\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Web&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Build your own UI for the card payment form, and then use our Custom Card Web Component to collect, validate, and encrypt your shopper&#039;s card details. The Component renders card input fields in iframes served by Adyen.&lt;\\\/p&gt;\\n&quot;,&quot;altTitle&quot;:&quot;web&quot;,&quot;oldTabId&quot;:&quot;introweb_1&quot;,&quot;relation&quot;:&quot;web&quot;},{&quot;title&quot;:&quot;Mobile (iOS or Android)&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Build your own UI for the card payment form, collect the shopper&#039;s card details, and then use Adyen classes to validate and encrypt the data in your client app.&lt;\\\/p&gt;\\n&quot;,&quot;altTitle&quot;:&quot;ios&quot;,&quot;oldTabId&quot;:&quot;intromobile_2&quot;,&quot;relation&quot;:&quot;ios&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<div class=\"notices green\">\n<p>If you prefer not to build your own card payment form, use Drop-in or Card Component for <a href=\"\/pt\/payment-methods\/cards\/web\">web<\/a>, <a href=\"\/pt\/payment-methods\/cards\/ios\">iOS<\/a>, <a href=\"\/pt\/payment-methods\/cards\/android\">Android<\/a>, <a href=\"\/pt\/payment-methods\/cards\/react-native\">React Native<\/a>, or <a href=\"\/pt\/payment-methods\/cards\/flutter\">Flutter<\/a> instead.<\/p>\n<\/div>\n<h2>Requirements<\/h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\">Make sure that you have built an <a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow?platform=Web&amp;integration=API%20only\">API-only integration<\/a>. <\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Setup steps<\/strong><\/td>\n<td style=\"text-align: left;\">Before you begin, <a href=\"\/pt\/payment-methods\/add-payment-methods\">add the cards that you want to support in your test Customer Area<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Show the available cards in your payment form<\/h2>\n<div class=\"additional-info-block output-inline\">\n<div class=\"additional-info-block__body\"><p>For information about the supported locations and currencies for each card, refer to <a href=\"https:\/\/www.adyen.com\/payment-methods\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Payment methods<\/a>.<\/p><\/div><\/div>\n\n<p>Specify in your  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/paymentMethods<\/a> request a combination of  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">countryCode<\/a> and  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods#request-amount\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">amount.currency<\/a>, and use the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/paymentMethods<\/a> response to determine which cards are available to the shopper. For more information, refer to our <a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow\/?platform=Web&amp;integration=API%20only&amp;version=71#get-available-payment-methods\">API-only integration guide<\/a>.<\/p>\n<p>Next, use our client-side solutions to validate and encrypt your shopper's card details. Select the platform below:<\/p>\n\n<div id=\"tabg2Vfp\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Web&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;The &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-web\\\/tree\\\/main\\\/packages\\\/lib\\\/src\\\/components\\\/CustomCard\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Custom Card Component&lt;\\\/a&gt; renders card input fields in iframes served by Adyen. Use this to collect, validate, and encrypt your shopper&#039;s card details.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the Custom Card Component. Either install the Adyen Web Node package or use a &lt;code&gt;&amp;lt;script&amp;gt;&lt;\\\/code&gt; tag:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;npm (recommended)&lt;\\\/p&gt;\\n&lt;p&gt;a. Install the &lt;a href=\\&quot;https:\\\/\\\/www.npmjs.com\\\/package\\\/@adyen\\\/adyen-web\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Adyen Web Node package&lt;\\\/a&gt;:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;bash\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;npm install @adyen\\\\\\\/adyen-web --save\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;b. Import Adyen Web into your application:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenCheckout } from &#039;@adyen\\\\\\\/adyen-web&#039;;\\\\nimport &#039;@adyen\\\\\\\/adyen-web\\\\\\\/styles\\\\\\\/adyen.css&#039;;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Script&lt;\\\/p&gt;\\n&lt;p&gt;a. Include the following script in the\\u00a0&lt;code&gt;&amp;lt;body&amp;gt;&lt;\\\/code&gt;\\u00a0above any other JavaScript in your checkout page:&lt;\\\/p&gt;\\n&lt;p&gt;We recommend that you also validate the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/web-best-practices#implement-subresource-integrity-hashes\\&quot;&gt;Subresource Integrity (SRI) hash&lt;\\\/a&gt;, which we provide for each version of our JavaScript and CSS files. You can find the SRI hashes in our &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes\\&quot;&gt;release notes&lt;\\\/a&gt;, under &lt;strong&gt;Updating to this version&lt;\\\/strong&gt;.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-html\\&quot;&gt;&amp;lt;script src=\\&quot;https:\\\/\\\/checkoutshopper-test.adyen.com\\\/checkoutshopper\\\/sdk\\\/{VERSION}\\\/adyen.js\\&quot;\\nintegrity=\\&quot;sha384-KF6Y8NQXGnIuzqJn5rcqCe6dMy7gBWobcIKr1BmIaz6pOeBAV0hrHBBMbHC\\\/inHu\\&quot;\\ncrossorigin=\\&quot;anonymous\\&quot;&amp;gt;&amp;lt;\\\/script&amp;gt;\\n&amp;lt;!-- Adyen provides the SRI hash that you include as the integrity attribute.--&amp;gt;\\n&amp;lt;!-- Refer to our release notes to get the SRI hash for the specific version: https:\\\/\\\/docs.adyen.com\\\/online-payments\\\/release-notes --&amp;gt;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;p&gt;b. Use the following CSS file:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-html\\&quot;&gt;&amp;lt;link rel=\\&quot;stylesheet\\&quot; href=\\&quot;https:\\\/\\\/checkoutshopper-test.adyen.com\\\/checkoutshopper\\\/sdk\\\/{VERSION}\\\/adyen.css\\&quot;\\nintegrity=\\&quot;sha384-uwMmo3xJR0e9jI+Oi5kzu43ShY0pXrb3auIlCjLjMNtl0X8Nat55eXNqwj8xU6H9\\&quot;\\ncrossorigin=\\&quot;anonymous\\&quot;&amp;gt;\\n&amp;lt;!-- Adyen provides the SRI hash that you include as the integrity attribute. --&amp;gt;\\n&amp;lt;!-- Refer to our release notes to get the SRI hash for the specific version: https:\\\/\\\/docs.adyen.com\\\/online-payments\\\/release-notes --&amp;gt;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;p&gt;You can &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow\\\/?platform=Web&amp;amp;integration=Drop-in#optional-configuration\\&quot;&gt;add your own styling&lt;\\\/a&gt; by overriding the rules in this CSS file.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a configuration object, specifying the following parameters:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;locale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The shopper&#039;s locale. This is used to set the language rendered in the Components. For a list of supported locales, see\\u00a0&lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow\\\/?platform=Web&amp;amp;integration=Drop-in#optional-configuration\\&quot;&gt;Localization&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;clientKey&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;A public key linked to your API credential, used for &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/client-side-authentication\\&quot;&gt;client-side authentication&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;test&lt;\\\/strong&gt;&lt;\\\/span&gt;. When you are ready to accept live payments, change the value to match your &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/live-endpoints\\&quot;&gt;live endpoints&lt;\\\/a&gt;:&lt;br&gt; - Europe: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;live&lt;\\\/strong&gt;&lt;\\\/span&gt; &lt;br&gt; - Australia: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;live-aus&lt;\\\/strong&gt;&lt;\\\/span&gt; &lt;br&gt; - US: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;live-us&lt;\\\/strong&gt;&lt;\\\/span&gt; &lt;br&gt; - Asia Pacific South East: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;live-apse&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onSubmit&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specify a function to handle the &lt;code&gt;onSubmit&lt;\\\/code&gt; event that the Component calls after the shopper selects the &lt;strong&gt;Pay&lt;\\\/strong&gt; button.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;  function handleOnSubmit(state, component) {\\n      state.isValid \\\/\\\/ True or false. Specifies if all the information that the shopper provided is valid.\\n      state.data \\\/\\\/ Provides the data that you need to pass in the `\\\/payments` call.\\n      component \\\/\\\/ Provides the active component instance that called this event.\\n  }\\n\\n  const configuration = {\\n      locale: \\&quot;en_US\\&quot;,\\n      environment: \\&quot;test\\&quot;,\\n      clientKey: \\&quot;YOUR_CLIENT_KEY\\&quot;,\\n      onSubmit: handleOnSubmit\\n  };&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;&lt;a id=\\&quot;events\\&quot;&gt;&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;ol start=\\&quot;3\\&quot;&gt;\\n&lt;li&gt;\\n&lt;p&gt;Use the configuration object to create an instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;. In Components versions 5.0.0 or later, the creation of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; is asynchronous:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;v5.0.0 or later:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const checkout = await AdyenCheckout(configuration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;before v5.0.0:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const checkout = new AdyenCheckout(configuration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Implement callbacks to handle the following events triggered by the Custom Card Component:&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onAutoComplete&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Provides the card holder name when a shopper uses Chrome or Safari&#039;s autofill function to fill out the card holder name field.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onSubmit&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper selects the &lt;strong&gt;Pay&lt;\\\/strong&gt; button. Here you have the option to override your &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/advanced-flow\\\/?platform=Web&amp;amp;integration=Components#add\\&quot;&gt;main Adyen Checkout configuration&lt;\\\/a&gt;. &lt;strong&gt;v5.0.0 or later&lt;\\\/strong&gt; you can also watch &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-components-js-sample-code\\\/blob\\\/master\\\/src\\\/customcard\\\/customCards.config.js#L261\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;state.errors&lt;\\\/code&gt;\\n&lt;\\\/a&gt; and call the custom card specific &lt;code&gt;setErrors&lt;\\\/code&gt; function.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onLoad&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when all the card input fields have been created but are not yet ready to use.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onConfigSuccess&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the card input fields are ready to use.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onFieldValid&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the input in a field becomes valid. Also called when the input changes and becomes invalid. For the card number field, it returns the following: &lt;br&gt; - &lt;code&gt;endDigits&lt;\\\/code&gt;: the last four digits of the card number. &lt;br&gt; - &lt;strong&gt;v5.10.0 or later&lt;\\\/strong&gt; &lt;code&gt;issuerBin&lt;\\\/code&gt;: if the card number has sixteen or more digits, this is the first eight digits of the card number.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onBrand&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the card brand is detected.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onError&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when card number or expiry date is invalid, or a field is incomplete field. Called again when errors are cleared. &lt;strong&gt;v5.0.0 or later&lt;\\\/strong&gt;: the &lt;code&gt;onError&lt;\\\/code&gt; handler is no longer used only for custom card component related errors. You can also watch &lt;code&gt;state.errors&lt;\\\/code&gt; from the &lt;code&gt;onSubmit&lt;\\\/code&gt; event.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onFocus&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when a field gains focus.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onBinValue&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper enters the card number. Returns &lt;code&gt;binValue&lt;\\\/code&gt;: the first six digits of the card number. &lt;br&gt; Requires the &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/client-side-authentication\\\/migrate-from-origin-key-to-client-key\\&quot;&gt;client key&lt;\\\/a&gt; for client-side authentication.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onBinLookup&lt;\\\/code&gt; &lt;br&gt; &lt;strong&gt;v4.6.0 or later&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper enters the card number. Requires a minimum of 11 digits of the card number to be entered. Returns the following:&lt;br&gt; - &lt;code&gt;type&lt;\\\/code&gt;: type of the card. &lt;br&gt; - &lt;code&gt;brands&lt;\\\/code&gt;: brands on the card. &lt;br&gt; - &lt;code&gt;supportedBrands&lt;\\\/code&gt;: the brands you support. &lt;br&gt; - &lt;code&gt;detectedBrands&lt;\\\/code&gt;: brands detected on the card. &lt;br&gt; - &lt;strong&gt;v5.30.1 or later&lt;\\\/strong&gt; &lt;code&gt;issuingCountryCode&lt;\\\/code&gt;: the two-letter country code of the country where the card was issued.&lt;br&gt; - &lt;strong&gt;v5.43.0 or later&lt;\\\/strong&gt; &lt;code&gt;paymentMethodVariant&lt;\\\/code&gt;: the &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/paymentmethodvariant\\&quot;&gt;card type variant&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;ol start=\\&quot;5\\&quot;&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add the Custom Card Component to your payment form:&lt;\\\/p&gt;\\n&lt;p&gt;a. Create a DOM element, placing it where you want the card input fields to be rendered:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-xml\\&quot;&gt;&amp;lt;div id=\\&quot;customCard-container\\&quot;&amp;gt;\\n    &amp;lt;label&amp;gt;\\n        &amp;lt;span&amp;gt;Card number:&amp;lt;\\\/span&amp;gt;\\n        &amp;lt;span data-cse=\\&quot;encryptedCardNumber\\&quot;&amp;gt;&amp;lt;\\\/span&amp;gt;\\n    &amp;lt;\\\/label&amp;gt;\\n    &amp;lt;label&amp;gt;\\n        &amp;lt;span&amp;gt;Expiry date:&amp;lt;\\\/span&amp;gt;\\n        &amp;lt;span data-cse=\\&quot;encryptedExpiryDate\\&quot;&amp;gt;&amp;lt;\\\/span&amp;gt;\\n    &amp;lt;\\\/label&amp;gt;\\n    &amp;lt;label&amp;gt;\\n        &amp;lt;span&amp;gt;CVV\\\/CVC:&amp;lt;\\\/span&amp;gt;\\n        &amp;lt;span data-cse=\\&quot;encryptedSecurityCode\\&quot;&amp;gt;&amp;lt;\\\/span&amp;gt;\\n    &amp;lt;\\\/label&amp;gt;\\n&amp;lt;\\\/div&amp;gt;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;p&gt;b. Create an instance of the Custom Card Component, and mount it. You can also include optional configuration.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Field&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;th&gt;Default&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;ariaLabels&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specify &lt;code&gt;aria-label&lt;\\\/code&gt; attributes for the input fields for web accessibility. &lt;br&gt; &lt;strong&gt;v4.0.0 or later&lt;\\\/strong&gt;: Use &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow\\\/?platform=Web&amp;amp;integration=Drop-in#optional-configuration\\&quot;&gt;translation fields&lt;\\\/a&gt; instead.&lt;\\\/td&gt;\\n&lt;td&gt;Refer to &lt;a href=\\&quot;#default-style\\&quot;&gt;Default labels&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;autoFocus&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Automatically move the focus from date field to the CVC field once a date has been entered. Starting v5.8.0 the focus changes to the date field when the entered card number reaches the expected length.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;true&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;brands&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Array of card brands that will be recognized by the component. For a list of possible values, refer to &lt;a href=\\&quot;#supported-card-types\\&quot;&gt;Supported card types&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;[&#039;mc&#039;,&#039;visa&#039;,&#039;amex&#039;]&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;styles&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Set a style object to\\u00a0customize the input fields. For a list of supported properties, refer to &lt;a href=\\&quot;#styling\\&quot;&gt;Styling&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;Refer to &lt;a href=\\&quot;#default-style\\&quot;&gt;Default styles&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;minimumExpiryDate&lt;\\\/code&gt;&lt;br&gt;&lt;strong&gt;v4.3.0 or later&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;If a shopper enters a date that is earlier than specified here, they will see the following error: &lt;br&gt; \\&quot;Your card expires before check out date.\\&quot;  &lt;br&gt; Format: &lt;code&gt;mm\\\/yy&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const customCard = new CustomCard(checkout, {\\n    \\\/\\\/ Optional configuration\\n    type: &#039;card&#039;,\\n    brands: [&#039;mc&#039;, &#039;visa&#039;, &#039;amex&#039;, &#039;bcmc&#039;, &#039;maestro&#039;],\\n    styles: {\\n        error: {\\n            color: &#039;red&#039;\\n        },\\n        validated: {\\n            color: &#039;green&#039;\\n        },\\n        placeholder: {\\n            color: &#039;#d8d8d8&#039;\\n        }\\n    },\\n    \\\/\\\/ Only for Web Components before 4.0.0.\\n    \\\/\\\/ For Web Components 4.0.0 and above, configure aria-label attributes in translation files\\n    ariaLabels: {\\n        lang: &#039;en-GB&#039;,\\n        encryptedCardNumber: {\\n            label: &#039;Credit or debit card number field&#039;,\\n            iframeTitle: &#039;Iframe for secured card number&#039;,\\n            error: &#039;Message that gets read out when the field is in the error state&#039;\\n        }\\n    },\\n    \\\/\\\/ Events\\n    onSubmit: function() {},\\n    onValid : function() {},\\n    onLoad: function() {},\\n    onConfigSuccess: function() {},\\n    onFieldValid : function() {},\\n    onBrand: function() {},\\n    onError: function() {},\\n    onFocus: function() {},\\n    onBinValue: function(bin) {},\\n    onBinLookup: function(callbackObj: CbObjOnBinLookup) {}\\n}).mount(&#039;#customCard-container&#039;);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;p&gt;When the shopper enters their card details, the Component calls the &lt;code&gt;onSubmit&lt;\\\/code&gt; event, which contains a &lt;code&gt;state&lt;\\\/code&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If &lt;code&gt;state.isValid&lt;\\\/code&gt; is &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;true&lt;\\\/strong&gt;&lt;\\\/span&gt;, pass the &lt;code&gt;state.data&lt;\\\/code&gt; to your server. The data includes the following:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;Encrypted card details.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Encrypted card details&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n   \\\\\\&quot;encryptedCardNumber\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n   \\\\\\&quot;encryptedExpiryMonth\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n   \\\\\\&quot;encryptedExpiryYear\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n   \\\\\\&quot;encryptedSecurityCode\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;a href=\\&quot;\\\/pt\\\/risk-management\\\/fraud-data-collection\\&quot;&gt;Device characteristics and other data&lt;\\\/a&gt; that we use to detect fraudulent payment activity, and mitigate fraud.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;User data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;riskData: {\\\\n   \\\\\\&quot;clientData\\\\\\&quot;: \\\\\\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;Include the full &lt;code&gt;data&lt;\\\/code&gt; object when you &lt;a href=\\&quot;#make-a-payment\\&quot;&gt;make a payment&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;h2 id=\\&quot;styling\\&quot;&gt;Styling card input fields&lt;\\\/h2&gt;\\n&lt;p&gt;If you want to change the styling of the card number, CVC, and expiry date of a card:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create an object and set the following CSS values:&lt;\\\/p&gt;\\n&lt;p&gt;You can provide styling for the following:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;base&lt;\\\/code&gt;: Base styling applied to the iframe. All styling extends from this style.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;error&lt;\\\/code&gt;: Styling applied when a field fails validation.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;placeholder&lt;\\\/code&gt;: Styling applied to the field&#039;s &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow\\\/?platform=Web&amp;amp;integration=Drop-in#optional-configuration\\&quot;&gt;placeholder values&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;validated&lt;\\\/code&gt;: Styling applied once a field passes validation.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;Here is an example style object:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;\\\/\\\/ Define style object\\nvar styleObject = {\\n  base: {\\n    color: &#039;black&#039;,\\n    fontSize: &#039;16px&#039;,\\n    fontSmoothing: &#039;antialiased&#039;,\\n    fontFamily: &#039;Helvetica&#039;\\n  },\\n  error: {\\n    color: &#039;red&#039;\\n  },\\n  placeholder: {\\n    color: &#039;#d8d8d8&#039;\\n  },\\n  validated: {\\n    color: &#039;green&#039;\\n  }\\n};&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Style the elements with the following properties. These properties map to CSS properties and accept allowed CSS values:&lt;\\\/p&gt;\\n&lt;table&gt;&lt;thead&gt;&lt;tr class=\\&quot;header\\&quot;&gt;&lt;th&gt;JavaScript&lt;\\\/th&gt;&lt;th&gt;CSS&lt;\\\/th&gt;&lt;\\\/tr&gt;&lt;\\\/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;background&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;background&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;\\n&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;caretColor&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;caret-color&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;\\n&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;color&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;color&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;display&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;display&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;font&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontFamily&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-family&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontSize&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-size&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontSizeAdjust&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-size-adjust&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontSmoothing&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-smoothing&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontStretch&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-stretch&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontStyle&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-style&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontVariant&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-variant&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontVariantAlternates&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-variant-alternates&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontVariantCaps&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-variant-caps&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontVariantEastAsian&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-variant-east-asian&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontVariantLigatures&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-variant-ligatures&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontVariantNumeric&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-variant-numeric&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;fontWeight&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;font-weight&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;letterSpacing&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;letter-spacing&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;lineHeight&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;line-height&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;mozOsxFontSmoothing&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;moz-osx-font-smoothing&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;mozTransition&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;moz-transition&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;outline&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;outline&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;opacity&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;opacity&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;padding&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;padding&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;textAlign&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;text-align&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;textShadow&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;text-shadow&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;transition&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;transition&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;webkitFontSmoothing&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;webkit-font-smoothing&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;tr&gt;&lt;td&gt;\\n&lt;p&gt;&lt;code&gt;webkitTransition&lt;\\\/code&gt;&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;td&gt;\\n&lt;p&gt;webkit-transition&lt;\\\/p&gt;\\n&lt;\\\/td&gt;&lt;\\\/tr&gt;&lt;\\\/tbody&gt;&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add the styling to the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?platform=Web&amp;amp;integration=Components#configure\\&quot;&gt;configuration object of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Configuration object with card styling&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const configuration = {\\\\n  \\\\\\\/\\\\\\\/...other configuration parameters\\\\n  paymentMethodsConfiguration: {\\\\n    card: {\\\\n      styles: styleObject,\\\\n    },\\\\n    \\\\\\\/\\\\\\\/Required to apply styling to stored cards.\\\\n    storedCard: {\\\\n      styles: styleObject,\\\\n    }\\\\n  },\\\\n};\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;h2 id=\\&quot;default-style\\&quot;&gt;Default styles and labels&lt;\\\/h2&gt;\\n&lt;p&gt;If you do not provide configuration for styles and labels, the Component will use the following default properties.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;{\\n    styles: {\\n            base: {\\n                color: \\&quot;#001b2b\\&quot;,\\n                fontSize: \\&quot;16px\\&quot;,\\n                fontWeight: \\&quot;400\\&quot;\\n            },\\n            placeholder: {\\n                color: \\&quot;#90a2bd\\&quot;,\\n                fontWeight: \\&quot;200\\&quot;\\n            },\\n            error: {\\n                color: \\&quot;#001b2b\\&quot;\\n            }\\n    },\\n    ariaLabels: {\\n        lang: \\&quot;en-GB\\&quot;,\\n        encryptedCardNumber: {\\n            label: \\&quot;Credit or debit card number\\&quot;,\\n            iframeTitle: \\&quot;Iframe for card data input field\\&quot;\\n        },\\n        encryptedExpiryDate: {\\n            label: \\&quot;Credit or debit card expiration date\\&quot;,\\n            iframeTitle: \\&quot;Iframe for card data input field\\&quot;\\n        },\\n        encryptedSecurityCode: {\\n            label: \\&quot;Iframe for card data input field\\&quot;\\n        }\\n    }\\n}&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;h2 id=\\&quot;supported-card-types\\&quot;&gt;Supported card types in web&lt;\\\/h2&gt;\\n&lt;p&gt;Use the\\u00a0values in this list when specifying card types in the\\u00a0&lt;code&gt;brands&lt;\\\/code&gt;\\u00a0array.\\u00a0If card types are not provided, the configuration defaults to\\u00a0&lt;code&gt;[&#039;mc&#039;,&#039;visa&#039;,&#039;amex&#039;]&lt;\\\/code&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Card Type&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;amex&lt;\\\/td&gt;\\n&lt;td&gt;Amex&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;argencard&lt;\\\/td&gt;\\n&lt;td&gt;Argencard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;bcmc&lt;\\\/td&gt;\\n&lt;td&gt;Bancontact\\\/Mister Cash&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;bijcard&lt;\\\/td&gt;\\n&lt;td&gt;de Bijenkorf Card&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;cabal&lt;\\\/td&gt;\\n&lt;td&gt;Cabal&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;cartebancaire&lt;\\\/td&gt;\\n&lt;td&gt;Carte Bancaires&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;codensa&lt;\\\/td&gt;\\n&lt;td&gt;Codensa&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;cup&lt;\\\/td&gt;\\n&lt;td&gt;China Union Pay&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;dankort&lt;\\\/td&gt;\\n&lt;td&gt;Dankort&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;diners&lt;\\\/td&gt;\\n&lt;td&gt;Diners Club&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;discover&lt;\\\/td&gt;\\n&lt;td&gt;Discover&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;electron&lt;\\\/td&gt;\\n&lt;td&gt;Electron&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;elo&lt;\\\/td&gt;\\n&lt;td&gt;ELO&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;forbrugsforeningen&lt;\\\/td&gt;\\n&lt;td&gt;Forbrugsforeningen&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;hiper&lt;\\\/td&gt;\\n&lt;td&gt;HiperCard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;hipercard&lt;\\\/td&gt;\\n&lt;td&gt;HiperCard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;jcb&lt;\\\/td&gt;\\n&lt;td&gt;JCB&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;karenmillen&lt;\\\/td&gt;\\n&lt;td&gt;Karen Millen GiftCard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;laser&lt;\\\/td&gt;\\n&lt;td&gt;Laser&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;maestro&lt;\\\/td&gt;\\n&lt;td&gt;Maestro&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;maestrouk&lt;\\\/td&gt;\\n&lt;td&gt;Maestro UK&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;mc&lt;\\\/td&gt;\\n&lt;td&gt;Mastercard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;mcalphabankbonus&lt;\\\/td&gt;\\n&lt;td&gt;Alpha Bank Mastercard Bonus&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;mir&lt;\\\/td&gt;\\n&lt;td&gt;MIR&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;naranja&lt;\\\/td&gt;\\n&lt;td&gt;Naranja&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;oasis&lt;\\\/td&gt;\\n&lt;td&gt;Oasis GiftCard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;rupay&lt;\\\/td&gt;\\n&lt;td&gt;RuPay&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;shopping&lt;\\\/td&gt;\\n&lt;td&gt;Tarjeta Shopping&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;solo&lt;\\\/td&gt;\\n&lt;td&gt;Solo&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;troy&lt;\\\/td&gt;\\n&lt;td&gt;Troy&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;uatp&lt;\\\/td&gt;\\n&lt;td&gt;UATP&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;visa&lt;\\\/td&gt;\\n&lt;td&gt;Visa&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;visaalphabankbonus&lt;\\\/td&gt;\\n&lt;td&gt;Alpha Bank Visa Bonus&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;visadankort&lt;\\\/td&gt;\\n&lt;td&gt;Visa Dankort&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;warehouse&lt;\\\/td&gt;\\n&lt;td&gt;Warehouse GiftCard&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;web&quot;,&quot;oldTabId&quot;:&quot;cweb_1&quot;,&quot;relation&quot;:&quot;web&quot;},{&quot;title&quot;:&quot;iOS&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Build your own UI for the card payment form, collect the shopper&#039;s card details, and then use the following classes to validate and encrypt the data in your client app:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\&quot;https:\\\/\\\/adyen.github.io\\\/adyen-ios\\\/5.0.0\\\/documentation\\\/adyen\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;CardEncryptor&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;https:\\\/\\\/adyen.github.io\\\/adyen-ios\\\/5.0.0\\\/documentation\\\/adyen\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;CardNumberValidator&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;https:\\\/\\\/adyen.github.io\\\/adyen-ios\\\/5.0.0\\\/documentation\\\/adyen\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;CardExpiryDateValidator&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;https:\\\/\\\/adyen.github.io\\\/adyen-ios\\\/5.0.0\\\/documentation\\\/adyen\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;CardSecurityCodeValidator&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;To use our iOS classes, you need to:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the Adyen iOS client-side library from either CocoaPods or Carthage.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;To install iOS Drop-in from &lt;strong&gt;CocoaPods&lt;\\\/strong&gt;:\\n&lt;ol&gt;\\n&lt;li&gt;Add &lt;code&gt;pod &#039;Adyen&#039;&lt;\\\/code&gt; to your &lt;code&gt;Podfile&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Run &lt;code&gt;pod install&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&lt;\\\/li&gt;\\n&lt;li&gt;To install iOS Drop-in from &lt;strong&gt;Carthage&lt;\\\/strong&gt;:\\n&lt;ol&gt;\\n&lt;li&gt;Add &lt;code&gt;github \\&quot;adyen\\\/adyen-ios\\&quot;&lt;\\\/code&gt; to your &lt;code&gt;Cartfile&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Run &lt;code&gt;carthage update&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Link the framework with your target as described in &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Carthage\\\/Carthage#adding-frameworks-to-an-application\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Carthage Readme&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Get your Client Encryption Public Key. You need to set this as your &lt;code&gt;publicKey&lt;\\\/code&gt; when using the &lt;code&gt;CardEncryptor&lt;\\\/code&gt; class. To get your public key:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Sign in to your &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Customer Area&lt;\\\/a&gt;\\u00a0using your company account.&lt;\\\/li&gt;\\n&lt;li&gt;Navigate to\\u00a0&lt;strong&gt;Developers&lt;\\\/strong&gt;\\u00a0&amp;gt;\\u00a0&lt;strong&gt;API credentials&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Click on your web service user (&lt;strong&gt;ws@Company.[YourCompanyAccount]&lt;\\\/strong&gt;) in the users list.&lt;br \\\/&gt;\\nThis opens the &lt;strong&gt;Edit Web Service User&lt;\\\/strong&gt;\\u00a0page.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Client-Side Encryption&lt;\\\/strong&gt; panel, copy the &lt;strong&gt;Client Encryption Public Key&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a function that validates card data and provides the encrypted card details.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;iOS classes for validating and encrypting card data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;swift\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;func validateCardData() {\\\\n        let cardValidator = CardNumberValidator()\\\\n        let isCardValid: Bool = cardValidator.isValid(cardNumberValue ?? \\\\\\&quot;\\\\\\&quot;)\\\\n        let expiryValidator = CardExpiryDateValidator()\\\\n        let isExpiryValid: Bool = expiryValidator.isValid(expiryDate)\\\\n        let securityCodeValidator = CardSecurityCodeValidator()\\\\n        let isSecurityCodeValid = securityCodeValidator.isValid(securityCodeValue)\\\\n        if isCardValid &amp;amp;&amp;amp; isExpiryValid &amp;amp;&amp;amp; isSecurityCodeValid &amp;amp;&amp;amp; (cardHolderNameValue != nil){\\\\n            let cardObject = CardEncryptor.Card(number: cardNumberValue, securityCode: securityCodeValue, expiryMonth: expiryMonthValue, expiryYear: expiryYearValue)\\\\n            let encryptedCard = CardEncryptor.encryptedCard(for: cardObject, publicKey: self.PUBLIC_KEY)\\\\n            makePayment(details: encryptedCard, holderName: cardHolderNameValue ?? \\\\\\&quot;\\\\\\&quot;, type: \\\\\\&quot;scheme\\\\\\&quot;)\\\\n        }\\\\n    }\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Pass the encrypted data to your server and proceed to &lt;a href=\\&quot;#make-a-payment\\&quot;&gt;make a payment&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Encrypted shopper payment details for Card&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;encryptedCardNumber\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n    \\\\\\&quot;encryptedExpiryMonth\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n    \\\\\\&quot;encryptedExpiryYear\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n    \\\\\\&quot;encryptedSecurityCode\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;ios&quot;,&quot;oldTabId&quot;:&quot;cios_2&quot;,&quot;relation&quot;:&quot;ios&quot;},{&quot;title&quot;:&quot;Android&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Build your own UI for the card payment form, collect the shopper&#039;s card details, and then use the &lt;a href=\\&quot;https:\\\/\\\/adyen.github.io\\\/adyen-android\\\/cse\\\/com.adyen.checkout.cse\\\/-card-encrypter\\\/index.html\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;CardEncrypter&lt;\\\/code&gt;\\n&lt;\\\/a&gt; class to encrypt the data in your client app.&lt;\\\/p&gt;\\n&lt;p&gt;To use our Android modules, you need to:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add the dependency in your &lt;code&gt;build.gradle&lt;\\\/code&gt; (Module) file. To get the latest version, check our &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-android\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;GitHub repository&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-groovy\\&quot;&gt;implementation \\&quot;com.adyen.checkout:cse:$checkout_version\\&quot;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Get your Client Encryption Public Key. You need to set this as your &lt;code&gt;publicKey&lt;\\\/code&gt; when using the &lt;code&gt;CardEncrypter&lt;\\\/code&gt; class. To get your public key:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Sign in to your &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Customer Area&lt;\\\/a&gt;\\u00a0using your company account.&lt;\\\/li&gt;\\n&lt;li&gt;Navigate to\\u00a0&lt;strong&gt;Developers&lt;\\\/strong&gt;\\u00a0&amp;gt;\\u00a0&lt;strong&gt;API credentials&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Click on your web service user (&lt;strong&gt;ws@Company.[YourCompanyAccount]&lt;\\\/strong&gt;) in the users list.&lt;br \\\/&gt;\\nThis opens the &lt;strong&gt;Edit Web Service User&lt;\\\/strong&gt;\\u00a0page.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Client-Side Encryption&lt;\\\/strong&gt; panel, copy the &lt;strong&gt;Client Encryption Public Key&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Use &lt;code&gt;CardEncrypter&lt;\\\/code&gt; to provide the encrypted card details.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Android module for encrypting card data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;kotlin\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;\\\\\\\/\\\\\\\/ Example values\\\\nval cardNumber = \\\\\\&quot;4111111111111111\\\\\\&quot;\\\\nval expiryMonth = \\\\\\&quot;3\\\\\\&quot;\\\\nval expiryYear = \\\\\\&quot;2020\\\\\\&quot;\\\\nval cvc = \\\\\\&quot;737\\\\\\&quot;\\\\n\\\\n   \\\\\\\/\\\\\\\/ Validate the card details before encrypting it\\\\nif (validateCard()) {\\\\n    val unencryptedCard = UnencryptedCard.Builder()\\\\n        .setNumber(cardNumber)\\\\n        .setExpiryDate(expiryMonth, expiryYear)\\\\n        .setCvc(cvc)\\\\n        .build()\\\\n\\\\n    val encryptedCard = CardEncrypter.encryptFields(unencryptedCard, \\\\\\&quot;YOUR_PUBLIC_KEY\\\\\\&quot;)\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Pass the encrypted data to your server and proceed to &lt;a href=\\&quot;#make-a-payment\\&quot;&gt;make a payment&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Encrypted shopper payment details for Card&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;encryptedCardNumber\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n    \\\\\\&quot;encryptedExpiryMonth\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n    \\\\\\&quot;encryptedExpiryYear\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n    \\\\\\&quot;encryptedSecurityCode\\\\\\&quot;:\\\\\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\\\\\&quot;,\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;android&quot;,&quot;oldTabId&quot;:&quot;candroid_3&quot;,&quot;relation&quot;:&quot;android&quot;},{&quot;title&quot;:&quot;React Native&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Build your own UI for the card payment form, collect the shopper&#039;s card details, and use the &lt;code&gt;encryptCard&lt;\\\/code&gt; function to encrypt the data in your client app.&lt;\\\/p&gt;\\n&lt;p&gt;To use our React Native functions:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the client side encryption module.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;import { AdyenCSE, AdyenAction } from &#039;@adyen\\\/react-native&#039;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Get your Client Encryption Public Key. You need to set this as your &lt;code&gt;PUBLIC_KEY&lt;\\\/code&gt; when using the &lt;code&gt;encryptCard&lt;\\\/code&gt; function. To get your public key:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Sign in to your &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Customer Area&lt;\\\/a&gt;\\u00a0using your company account.&lt;\\\/li&gt;\\n&lt;li&gt;Navigate to\\u00a0&lt;strong&gt;Developers&lt;\\\/strong&gt;\\u00a0&amp;gt;\\u00a0&lt;strong&gt;API credentials&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Click on your web service user (&lt;strong&gt;ws@Company.[YourCompanyAccount]&lt;\\\/strong&gt;) in the users list.&lt;br \\\/&gt;\\nThis opens the &lt;strong&gt;Edit Web Service User&lt;\\\/strong&gt;\\u00a0page.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Client-Side Encryption&lt;\\\/strong&gt; panel, copy the &lt;strong&gt;Client Encryption Public Key&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Put unencrypted card data into the &lt;code&gt;unencryptedCard&lt;\\\/code&gt; object.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create a card data object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const unencryptedCard = {\\\\n   number,\\\\n   expiryMonth,\\\\n   expiryYear,\\\\n   cvv,\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Call the &lt;code&gt;encryptCard&lt;\\\/code&gt; function, passing the object with the unencrypted card details.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Encrypt card data in React Native&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const encryptedCard = await AdyenCSE.encryptCard(\\\\n   unencryptedCard,\\\\n   YOUR_PUBLIC_KEY\\\\n)\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Pass the encrypted data as the &lt;code&gt;paymentMethod&lt;\\\/code&gt; when you &lt;a href=\\&quot;#make-a-payment\\&quot;&gt;make a payment&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Use encrypted card data as payment method&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const data = {\\\\n   paymentMethod: {\\\\n      type: &#039;scheme&#039;,\\\\n      encryptedCardNumber: encryptedCard.number,\\\\n      encryptedExpiryMonth: encryptedCard.expiryMonth,\\\\n      encryptedExpiryYear: encryptedCard.expiryYear,\\\\n      encryptedSecurityCode: encryptedCard.cvv,\\\\n      threeDS2SdkVersion: AdyenAction.threeDS2SdkVersion\\\\n   },\\\\nlet result = await ApiClient.payments(data, ...);\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;reactnative&quot;,&quot;oldTabId&quot;:&quot;creactnative_4&quot;,&quot;relation&quot;:&quot;reactnative&quot;},{&quot;title&quot;:&quot;Flutter&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Build your own UI for the card payment form, collect the shopper&#039;s card details, and use the &lt;code&gt;encryptCard&lt;\\\/code&gt; function to encrypt the card details.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Get your Client Encryption Public Key. You need to set this as your &lt;code&gt;publicKey&lt;\\\/code&gt; when you encrypt the card details. To get your public key:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Sign in to your &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Customer Area&lt;\\\/a&gt;\\u00a0using your company account.&lt;\\\/li&gt;\\n&lt;li&gt;Navigate to\\u00a0&lt;strong&gt;Developers&lt;\\\/strong&gt;\\u00a0&amp;gt;\\u00a0&lt;strong&gt;API credentials&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Click on your web service user (&lt;strong&gt;ws@Company.[YourCompanyAccount]&lt;\\\/strong&gt;) in the users list.&lt;br \\\/&gt;\\nThis opens the &lt;strong&gt;Edit Web Service User&lt;\\\/strong&gt;\\u00a0page.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Client-Side Encryption&lt;\\\/strong&gt; panel, copy the &lt;strong&gt;Client Encryption Public Key&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Encrypt the card details.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Encrypt card details&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;final UnencryptedCard unencryptedCard = UnencryptedCard(\\\\n     cardNumber: \\\\\\&quot;4111111111111\\\\\\&quot;,\\\\n     expiryMonth: \\\\\\&quot;03\\\\\\&quot;,\\\\n     expiryYear: \\\\\\&quot;2030\\\\\\&quot;,\\\\n     cvc: \\\\\\&quot;7373\\\\\\&quot;,\\\\n);\\\\n\\\\nfinal EncryptedCard encryptedCard = await AdyenCheckout.instance.encryptCard(unencryptedCard, PUBLIC_KEY);\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Pass the encrypted data as the &lt;code&gt;paymentMethod&lt;\\\/code&gt; when you &lt;a href=\\&quot;#make-a-payment\\&quot;&gt;make a payment&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;flutter&quot;,&quot;oldTabId&quot;:&quot;flutter_5&quot;,&quot;relation&quot;:&quot;flutter&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2>Make a payment<\/h2>\n<p>From your server, make a POST  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> request, specifying:<\/p>\n<table>\n<thead>\n<tr>\n<th>Parameter<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>amount<\/code><\/td>\n<td>The <code>currency<\/code> of the payment and its <code>value<\/code> in <a href=\"\/pt\/development-resources\/currency-codes\">minor units<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><code>reference<\/code><\/td>\n<td>Your unique reference for this payment.<\/td>\n<\/tr>\n<tr>\n<td><code>paymentMethod<\/code><\/td>\n<td>Object that contains the encrypted card details from the <a href=\"#show-the-available-cards-in-your-payment-form\">client side<\/a>, the card holder's name (if you collected it), and a <code>type<\/code> parameter set to <span translate=\"no\"><strong>scheme<\/strong><\/span>.<\/td>\n<\/tr>\n<tr>\n<td><code>returnUrl<\/code><\/td>\n<td>URL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: <code>http:\/\/<\/code> or <code>https:\/\/<\/code>. You can also include your own additional query parameters, for example, shopper ID or order reference number.   <br> If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. <br> <div class=\"sc-notice note\"><div> The URL must not include personally identifiable information (PII), for example name or email address. <\/div><\/div><\/td>\n<\/tr>\n<tr>\n<td><code>merchantAccount<\/code><\/td>\n<td>Your merchant account name.<\/td>\n<\/tr>\n<tr>\n<td><code>riskData<\/code><\/td>\n<td><a href=\"\/pt\/risk-management\/fraud-data-collection\">Device characteristics and other data<\/a> that we use to detect fraudulent payment activity, and mitigate fraud. If you <a href=\"#collecting-additional-data\">collect additional data<\/a> from other pages on your website, that data is also included in this object.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"''\" :id=\"'card-payment'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v72\\\/payments \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n  \\&quot;amount\\&quot;:{\\n    \\&quot;currency\\&quot;:\\&quot;USD\\&quot;,\\n    \\&quot;value\\&quot;:1000\\n  },\\n  \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;paymentMethod\\&quot;:{\\n\\t    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n\\t    \\&quot;encryptedCardNumber\\&quot;: \\&quot;test_4111111111111111\\&quot;,\\n\\t    \\&quot;encryptedExpiryMonth\\&quot;: \\&quot;test_03\\&quot;,\\n\\t    \\&quot;encryptedExpiryYear\\&quot;: \\&quot;test_2030\\&quot;,\\n\\t    \\&quot;encryptedSecurityCode\\&quot;: \\&quot;test_737\\&quot;,\\n      \\&quot;holderName\\&quot;: \\&quot;S. Hopper\\&quot;\\n  },\\n  \\&quot;returnUrl\\&quot;: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  \\&quot;merchantAccount\\&quot;:\\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;riskData\\&quot;: {\\n        \\&quot;clientData\\&quot;: \\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;\\n  }\\n}'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v28.4.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the live environment, additionally include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount()\\n  .currency(\\&quot;USD\\&quot;)\\n  .value(1000L);\\n\\nCardDetails cardDetails = new CardDetails()\\n  .encryptedCardNumber(\\&quot;test_4111111111111111\\&quot;)\\n  .holderName(\\&quot;S. Hopper\\&quot;)\\n  .encryptedSecurityCode(\\&quot;test_737\\&quot;)\\n  .encryptedExpiryYear(\\&quot;test_2030\\&quot;)\\n  .encryptedExpiryMonth(\\&quot;test_03\\&quot;)\\n  .type(CardDetails.TypeEnum.SCHEME);\\n\\nRiskData riskData = new RiskData()\\n  .clientData(\\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;);\\n\\nPaymentRequest paymentRequest = new PaymentRequest()\\n  .reference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  .amount(amount)\\n  .merchantAccount(\\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;)\\n  .paymentMethod(new CheckoutPaymentMethod(cardDetails))\\n  .returnUrl(\\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;)\\n  .riskData(riskData);\\n\\n\\\/\\\/ Send the request\\nPaymentsApi service = new PaymentsApi(client);\\nPaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen PHP API Library v20.3.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\Amount;\\nuse Adyen\\\\Model\\\\Checkout\\\\CheckoutPaymentMethod;\\nuse Adyen\\\\Model\\\\Checkout\\\\RiskData;\\nuse Adyen\\\\Model\\\\Checkout\\\\PaymentRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\PaymentsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the live environment, additionally include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$amount = new Amount();\\n$amount\\n  -&gt;setCurrency(\\&quot;USD\\&quot;)\\n  -&gt;setValue(1000);\\n\\n$checkoutPaymentMethod = new CheckoutPaymentMethod();\\n$checkoutPaymentMethod\\n  -&gt;setEncryptedCardNumber(\\&quot;test_4111111111111111\\&quot;)\\n  -&gt;setHolderName(\\&quot;S. Hopper\\&quot;)\\n  -&gt;setEncryptedSecurityCode(\\&quot;test_737\\&quot;)\\n  -&gt;setEncryptedExpiryYear(\\&quot;test_2030\\&quot;)\\n  -&gt;setEncryptedExpiryMonth(\\&quot;test_03\\&quot;)\\n  -&gt;setType(\\&quot;scheme\\&quot;);\\n\\n$riskData = new RiskData();\\n$riskData\\n  -&gt;setClientData(\\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;);\\n\\n$paymentRequest = new PaymentRequest();\\n$paymentRequest\\n  -&gt;setReference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  -&gt;setAmount($amount)\\n  -&gt;setMerchantAccount(\\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setPaymentMethod($checkoutPaymentMethod)\\n  -&gt;setReturnUrl(\\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;)\\n  -&gt;setRiskData($riskData);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new PaymentsApi($client);\\n$response = $service-&gt;payments($paymentRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v20.0.0\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the live environment, additionally include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount\\n{\\n  Currency = \\&quot;USD\\&quot;,\\n  Value = 1000\\n};\\n\\nCardDetails cardDetails = new CardDetails\\n{\\n  EncryptedCardNumber = \\&quot;test_4111111111111111\\&quot;,\\n  HolderName = \\&quot;S. Hopper\\&quot;,\\n  EncryptedSecurityCode = \\&quot;test_737\\&quot;,\\n  EncryptedExpiryYear = \\&quot;test_2030\\&quot;,\\n  EncryptedExpiryMonth = \\&quot;test_03\\&quot;,\\n  Type = CardDetails.TypeEnum.Scheme\\n};\\n\\nRiskData riskData = new RiskData\\n{\\n  ClientData = \\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;\\n};\\n\\nPaymentRequest paymentRequest = new PaymentRequest\\n{\\n  Reference = \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount = amount,\\n  MerchantAccount = \\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  PaymentMethod = new CheckoutPaymentMethod(cardDetails),\\n  ReturnUrl = \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  RiskData = riskData\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new PaymentsService(client);\\nvar response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v19.3.0\\n\\\/\\\/ Require the parts of the module you want to use\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\\/\\\/ Initialize the client object\\n\\\/\\\/ For the live environment, additionally include your liveEndpointUrlPrefix.\\nconst client = new Client({apiKey: \\&quot;ADYEN_API_KEY\\&quot;, environment: \\&quot;TEST\\&quot;});\\n\\n\\\/\\\/ Create the request object(s)\\nconst paymentRequest = {\\n  amount: {\\n    currency: \\&quot;USD\\&quot;,\\n    value: 1000\\n  },\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  paymentMethod: {\\n    type: \\&quot;scheme\\&quot;,\\n    encryptedCardNumber: \\&quot;test_4111111111111111\\&quot;,\\n    encryptedExpiryMonth: \\&quot;test_03\\&quot;,\\n    encryptedExpiryYear: \\&quot;test_2030\\&quot;,\\n    encryptedSecurityCode: \\&quot;test_737\\&quot;,\\n    holderName: \\&quot;S. Hopper\\&quot;\\n  },\\n  returnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  merchantAccount: \\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  riskData: {\\n    clientData: \\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;\\n  }\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v12.2.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v9\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v9\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v9\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the live environment, additionally include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\namount := checkout.Amount{\\n  Currency: \\&quot;USD\\&quot;,\\n  Value: 1000,\\n}\\n\\ncardDetails := checkout.CardDetails{\\n  EncryptedCardNumber: common.PtrString(\\&quot;test_4111111111111111\\&quot;),\\n  HolderName: common.PtrString(\\&quot;S. Hopper\\&quot;),\\n  EncryptedSecurityCode: common.PtrString(\\&quot;test_737\\&quot;),\\n  EncryptedExpiryYear: common.PtrString(\\&quot;test_2030\\&quot;),\\n  EncryptedExpiryMonth: common.PtrString(\\&quot;test_03\\&quot;),\\n  Type: common.PtrString(\\&quot;scheme\\&quot;),\\n}\\n\\nriskData := checkout.RiskData{\\n  ClientData: common.PtrString(\\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;),\\n}\\n\\npaymentRequest := checkout.PaymentRequest{\\n  Reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount: amount,\\n  MerchantAccount: \\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&amp;cardDetails),\\n  ReturnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  RiskData: &amp;riskData,\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.PaymentsApi.PaymentsInput().IdempotencyKey(\\&quot;UUID\\&quot;).PaymentRequest(paymentRequest)\\nres, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v12.7.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the live environment, additionally include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;currency\\&quot;: \\&quot;USD\\&quot;,\\n    \\&quot;value\\&quot;: 1000\\n  },\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n    \\&quot;encryptedCardNumber\\&quot;: \\&quot;test_4111111111111111\\&quot;,\\n    \\&quot;encryptedExpiryMonth\\&quot;: \\&quot;test_03\\&quot;,\\n    \\&quot;encryptedExpiryYear\\&quot;: \\&quot;test_2030\\&quot;,\\n    \\&quot;encryptedSecurityCode\\&quot;: \\&quot;test_737\\&quot;,\\n    \\&quot;holderName\\&quot;: \\&quot;S. Hopper\\&quot;\\n  },\\n  \\&quot;returnUrl\\&quot;: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;riskData\\&quot;: {\\n    \\&quot;clientData\\&quot;: \\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;\\n  }\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v9.7.1\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the live environment, additionally include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :amount =&gt; {\\n    :currency =&gt; 'USD',\\n    :value =&gt; 1000\\n  },\\n  :reference =&gt; 'YOUR_ORDER_NUMBER',\\n  :paymentMethod =&gt; {\\n    :type =&gt; 'scheme',\\n    :encryptedCardNumber =&gt; 'test_4111111111111111',\\n    :encryptedExpiryMonth =&gt; 'test_03',\\n    :encryptedExpiryYear =&gt; 'test_2030',\\n    :encryptedSecurityCode =&gt; 'test_737',\\n    :holderName =&gt; 'S. Hopper'\\n  },\\n  :returnUrl =&gt; 'https:\\\/\\\/your-company.example.com\\\/...',\\n  :merchantAccount =&gt; 'ADYEN_MERCHANT_ACCOUNT',\\n  :riskData =&gt; {\\n    :clientData =&gt; 'eyJ0cmFuc1N0YXR1cy...I6IlkifQ=='\\n  }\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v19.3.0\\n\\\/\\\/ Require the parts of the module you want to use\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\\/\\\/ Initialize the client object\\n\\\/\\\/ For the live environment, additionally include your liveEndpointUrlPrefix.\\nconst client = new Client({apiKey: \\&quot;ADYEN_API_KEY\\&quot;, environment: \\&quot;TEST\\&quot;});\\n\\n\\\/\\\/ Create the request object(s)\\nconst amount: Types.checkout.Amount = {\\n  currency: \\&quot;USD\\&quot;,\\n  value: 1000\\n};\\n\\nconst cardDetails: Types.checkout.CardDetails = {\\n  encryptedCardNumber: \\&quot;test_4111111111111111\\&quot;,\\n  holderName: \\&quot;S. Hopper\\&quot;,\\n  encryptedSecurityCode: \\&quot;test_737\\&quot;,\\n  encryptedExpiryYear: \\&quot;test_2030\\&quot;,\\n  encryptedExpiryMonth: \\&quot;test_03\\&quot;,\\n  type: Types.checkout.CardDetails.TypeEnum.Scheme\\n};\\n\\nconst riskData: Types.checkout.RiskData = {\\n  clientData: \\&quot;eyJ0cmFuc1N0YXR1cy...I6IlkifQ==\\&quot;\\n};\\n\\nconst paymentRequest: Types.checkout.PaymentRequest = {\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  amount: amount,\\n  merchantAccount: \\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  paymentMethod: cardDetails,\\n  returnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  riskData: riskData\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>The  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> response contains:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/payments__resParam_pspReference\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">pspReference<\/a>: Our unique identifier for the transaction.<\/li>\n<li><code>resultCode<\/code>: Use this to <a href=\"#present-the-payment-result\">present the payment result to your shopper<\/a>.<\/li>\n<li><code>merchantReference<\/code>: The <code>reference<\/code> from the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> request.<\/li>\n<li><code>additionalData<\/code>: Additional information about the transaction.<br \/>\nTo specify the fields that you want to receive in <code>additionalData<\/code>, 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>, and go to <strong>Developers<\/strong> &gt; <strong>Additional data<\/strong>.  <\/li>\n<\/ul>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'\/payments response'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n  \\\"additionalData\\\": {\\n    \\\"cardSummary\\\": \\\"1111\\\"\\n  },\\n  \\\"pspReference\\\": \\\"851572424333194G\\\",\\n  \\\"resultCode\\\": \\\"Authorised\\\",\\n  \\\"merchantReference\\\": \\\"YOUR_ORDER_NUMBER\\\"\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2 id=\"present-the-payment-result\">Present the payment result<\/h2>\n<p>Use the\u00a0 <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments#responses-200-resultCode\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">resultCode<\/a> from the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a <a href=\"\/pt\/development-resources\/webhooks\">webhook<\/a>.<\/p>\n<p><\/p>\n<p>For card payments, you can receive the following <code>resultCode<\/code> values:<\/p>\n<table>\n<thead>\n<tr>\n<th>resultCode<\/th>\n<th>Description<\/th>\n<th>Action to take<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Authorised<\/strong><\/td>\n<td>The payment was successful.<\/td>\n<td>Inform the shopper that the payment has been successful. <br> If you are using <a href=\"\/pt\/online-payments\/capture#manual-capture\">manual capture<\/a>, you also need to <a href=\"\/pt\/online-payments\/capture\">capture<\/a> the payment.<\/td>\n<\/tr>\n<tr>\n<td><strong>Cancelled<\/strong><\/td>\n<td>The shopper cancelled the payment.<\/td>\n<td>Ask the shopper whether they want to continue with the order, or ask them to select a different payment method.<\/td>\n<\/tr>\n<tr>\n<td><strong>Error<\/strong><\/td>\n<td>There was an error when the payment was being processed. For more information, check the <a href=\"\/pt\/development-resources\/refusal-reasons\">\n  <code>refusalReason<\/code>\n<\/a> field.<\/td>\n<td>Inform the shopper that there was an error processing their payment.<\/td>\n<\/tr>\n<tr>\n<td><strong>Refused<\/strong><\/td>\n<td>The payment was refused.  For more information, check the <a href=\"\/pt\/development-resources\/refusal-reasons\">\n  <code>refusalReason<\/code>\n<\/a> field.<\/td>\n<td>Ask the shopper to try the payment again using a different payment method.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"notices green\">\n<p>Additional <code>resultCode<\/code> values are possible in case of the 3D Secure authentication flow. For more information, refer to <a href=\"\/pt\/online-payments\/build-your-integration\/payment-result-codes\/#3d-secure-authentication\">Result codes<\/a>.<\/p>\n<\/div>\n<h2 id=\"showing-co-badged-cards\">Showing co-badged cards<\/h2>\n<p><a href=\"\/pt\/online-payments\/co-badged-cards-compliance\">Regulatory guidelines for some regions<\/a> require the following:<\/p>\n<ul>\n<li>When a shopper presents a co-badged card, they must be allowed to select their preferred brand.<\/li>\n<li>If the shopper selected a preferred brand, the payment must be completed with this brand.<\/li>\n<li>If you accept credit and debit cards, your card payment section must refer to both debit and credit cards. You cannot present only a credit card section.<\/li>\n<\/ul>\n<p>For Web integrations, to comply with these guidelines:<\/p>\n<ol>\n<li>Use the <a href=\"#events\">\n  <code>onBinLookup<\/code>\n<\/a> event to detect if a card is co-badged.<\/li>\n<li>If you accept debit and credit cards, use a label that does not discriminate between card products in your checkout. For example, <strong>Cards<\/strong>, or <strong>Card payment<\/strong>.<\/li>\n<li>If a card is co-badged, present all supported brands to the shopper, allowing them to click on the brand they want to pay with. Each of the presented brands should have an <code>alt<\/code> or a <code>data-value<\/code> attribute.<\/li>\n<li>If the shopper makes a choice, pass the corresponding event to the <code>dualBrandingChangeHandler<\/code> function.<br \/>\nThe shopper's selected brand will then be included in the <code>state.data<\/code> from the Component.<\/li>\n<\/ol>\n<p>The following example shows how to present brand logos for a co-badged Bancontact\/Maestro card:<\/p>\n<pre><code class=\"language-js\">function onBinLookup(pCallbackObj) {\n    \/\/ Handle a dual branded result\n    if (pCallbackObj.supportedBrandsRaw?.length &gt; 1) {\n        onDualBrand(pCallbackObj);\n    }\n}\n\/\/ Implement dual branding\nfunction onDualBrand(pCallbackObj) {\n  const logoOne = document.getElementById('pmImageDual1');\n  const logoTwo = document.getElementById('pmImageDual2');\n  const supportedBrands = pCallbackObj.supportedBrandsRaw;\n\n  \/\/Set one brand icon, add alt or data-value attributes; add an event listener\n  logoOne.setAttribute('src', supportedBrands[0].brandImageUrl);\n  logoOne.setAttribute('alt', supportedBrands[0].brand);\n  logoOne.setAttribute('data-value', supportedBrands[0].brand);\n  logoOne.addEventListener('click', dualBrandListener);\n\n  \/\/ Set the other brand icon, add alt or data-value attributes; add an event listener\n  logoTwo.setAttribute('src', supportedBrands[1].brandImageUrl);\n  logoTwo.setAttribute('alt', supportedBrands[1].brand);\n  logoTwo.setAttribute('data-value', supportedBrands[1].brand);\n  logoTwo.addEventListener('click', dualBrandListener);\n}<\/code><\/pre>\n<p>Implementing <code>dualBrandListener<\/code> to pass the selected attributes to to <code>dualBrandingChangeHandler<\/code>:<\/p>\n<pre><code class=\"language-js\">function dualBrandListener(e) {\n    securedFields.dualBrandingChangeHandler(e);\n}<\/code><\/pre>\n<h2 id=\"show-debit-credit-separately\">Present debit and credit cards separately<\/h2>\n<div class=\"notices yellow\">\n<p>This requires Checkout API v53 and later.<\/p>\n<\/div>\n<p>In some scenarios, you may want to present your shoppers with separate payment forms for debit cards and credit cards. Some examples include:<\/p>\n<ul>\n<li>If you accept payments in Sweden, you need to present debit cards before credit cards in order to comply with <a href=\"https:\/\/www.regeringen.se\/rattsliga-dokument\/lagradsremiss\/2019\/12\/presentation-av-betalningssatt-vid-marknadsforing-av-betaltjanster-online\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">local legislation<\/a>.<\/li>\n<li>In Brazil, many shoppers use <em>Combo cards<\/em>, allowing for both debit and credit transactions. Having a separate form for <strong>Debit Card<\/strong> and <strong>Credit Card<\/strong> gives your shoppers a clear indication of whether they are making a debit or credit transaction.<\/li>\n<\/ul>\n<p>For more details, see the corresponding sections about <a href=\"#brazil\">Brazil<\/a> and <a href=\"#sweden\">Sweden<\/a>.<\/p>\n<p><\/p>\n<p>To show debit and credit cards separately:<\/p>\n<ol>\n<li>\n<p>If you are using the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/paymentMethods<\/a> endpoint to get a list of payment methods to present on the client side, include:<\/p>\n<ul>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods#request-splitCardFundingSources\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">splitCardFundingSources<\/a>&#58; Set this to <strong>true<\/strong> to receive separate objects for credit and debit cards in the response.\n<div style=\"line-height:80%;\">\n<br>\n<\/div><\/li>\n<\/ul>\n<p>The following example shows how to get the available payment methods for a shopper in the <strong>Netherlands<\/strong>, making a <strong>EUR&nbsp;47.00<\/strong> payment.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'\/paymentMethods request'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v68\\\/paymentMethods \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;countryCode\\&quot;: \\&quot;NL\\&quot;,\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;currency\\&quot;: \\&quot;EUR\\&quot;,\\n    \\&quot;value\\&quot;: 4700\\n  },\\n  \\&quot;splitCardFundingSources\\&quot;: true\\n}'&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>The response includes the list of available payment methods, with debit and credit cards split into separate objects.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Response'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n   ...\\n   \\\"paymentMethods\\\": [\\n       {\\n           \\\"brands\\\": [\\n               \\\"mc\\\",\\n               \\\"visa\\\",\\n               \\\"amex\\\"\\n           ],\\n           ...\\n           \\\"fundingSource\\\": \\\"credit\\\",\\n           \\\"name\\\": \\\"Credit Card\\\",\\n           \\\"type\\\": \\\"scheme\\\"\\n       },\\n       {\\n           \\\"brands\\\": [\\n               \\\"mc\\\",\\n               \\\"visa\\\",\\n               \\\"amex\\\"\\n           ],\\n           \\\"fundingSource\\\": \\\"debit\\\",\\n           \\\"name\\\": \\\"Debit Card\\\",\\n           \\\"type\\\": \\\"scheme\\\"\\n       }\\n   ]\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>When the shopper selects to pay with either a debit or credit card, proceed to make a POST  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> request and include:<\/p>\n<ul>\n<li><code>paymentMethod.fundingSource<\/code>: Set this to either <strong>credit<\/strong> or <strong>debit<\/strong>.\n<div style=\"line-height:80%;\">\n<br>\n<\/div><\/li>\n<\/ul>\n<p>The following example shows how you can make a payment request for a debit card.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'\/payments request'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v68\\\/payments \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n  \\&quot;amount\\&quot;:{\\n    \\&quot;currency\\&quot;:\\&quot;EUR\\&quot;,\\n    \\&quot;value\\&quot;:4700\\n  },\\n  \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n    \\&quot;encryptedCardNumber\\&quot;: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;,\\n    \\&quot;encryptedExpiryMonth\\&quot;: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;,\\n    \\&quot;encryptedExpiryYear\\&quot;: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;,\\n    \\&quot;encryptedSecurityCode\\&quot;: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;,\\n    \\&quot;holderName\\&quot;: \\&quot;S. Hopper\\&quot;,\\n    \\&quot;fundingSource\\&quot;: \\&quot;debit\\&quot;\\n  },\\n  \\&quot;additionalData\\&quot;: {\\n    \\&quot;overwriteBrand\\&quot;: true\\n  },\\n  \\&quot;returnUrl\\&quot;: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  \\&quot;merchantAccount\\&quot;:\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;\\n}'&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h3 id=\"brazil\">Brazil<\/h3>\n<p>For debit transactions, we highly recommend using <a href=\"\/pt\/online-payments\/3d-secure\">3D Secure<\/a> and <a href=\"\/pt\/online-payments\/capture\">automatic capture<\/a>  due to some issuers' restrictions.<\/p>\n<h3 id=\"sweden\">Sweden<\/h3>\n<p>When accepting payments in Sweden, present debit before credit cards, and label the forms clearly in order to comply with <a href=\"https:\/\/www.regeringen.se\/rattsliga-dokument\/lagradsremiss\/2019\/12\/presentation-av-betalningssatt-vid-marknadsforing-av-betaltjanster-online\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Swedish legislations<\/a>.<\/p>\n<h2 id=\"recurring-payments\">Recurring payments<\/h2>\n<p>Cards support <a href=\"\/pt\/online-payments\/tokenization\">tokenization<\/a> for <a href=\"\/pt\/get-started-with-adyen\/adyen-glossary\/#one-click-payments\" target=\"_blank\">one-click<\/a>, <a href=\"\/pt\/get-started-with-adyen\/adyen-glossary\/#subscriptions\" target=\"_blank\">subscription<\/a>, and <a href=\"\/pt\/get-started-with-adyen\/adyen-glossary#unscheduled-card-on-file-ucof\">unscheduled card-on-file<\/a> payments. Refer to <a href=\"\/pt\/online-payments\/tokenization\/create-tokens\/\">Create tokens<\/a> to integrate with our tokenization feature.<\/p>\n<div class=\"sc-notice note\"><div>\n<p>We strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. Being transparent about the payment schedule and the charged amount reduces the risk of chargebacks.<\/p>\n<\/div><\/div>\n<h3>Store card details<\/h3>\n<p>When <a href=\"\/pt\/online-payments\/tokenization\/create-tokens\">creating a token<\/a> for cards:<\/p>\n<ul>\n<li>Use the standard tokenization parameters in your payment request. You do not need to include any additional parameters for cards.\n<\/li>\n<\/ul>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Create a token for one-click payments'\" :id=\"'create_token_payments'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v72\\\/payments \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n   \\&quot;amount\\&quot;:{\\n      \\&quot;value\\&quot;:0,\\n      \\&quot;currency\\&quot;:\\&quot;USD\\&quot;\\n   },\\n   \\&quot;paymentMethod\\&quot;:{\\n      \\&quot;type\\&quot;:\\&quot;scheme\\&quot;,\\n      \\&quot;encryptedCardNumber\\&quot;: \\&quot;test_4111111111111111\\&quot;,\\n      \\&quot;encryptedExpiryMonth\\&quot;: \\&quot;test_03\\&quot;,\\n      \\&quot;encryptedExpiryYear\\&quot;: \\&quot;test_2030\\&quot;,\\n      \\&quot;encryptedSecurityCode\\&quot;: \\&quot;test_737\\&quot;,\\n      \\&quot;holderName\\&quot;:\\&quot;John Smith\\&quot;\\n   },\\n   \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_REFERENCE\\&quot;,\\n   \\&quot;shopperInteraction\\&quot;: \\&quot;Ecommerce\\&quot;,\\n   \\&quot;recurringProcessingModel\\&quot;: \\&quot;CardOnFile\\&quot;,\\n   \\&quot;storePaymentMethod\\&quot;: \\&quot;true\\&quot;,\\n   \\&quot;merchantAccount\\&quot;:\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n   \\&quot;shopperReference\\&quot;:\\&quot;YOUR_SHOPPER_REFERENCE\\&quot;,\\n   \\&quot;returnUrl\\&quot;:\\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;\\n}'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v39.3.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount()\\n  .currency(\\&quot;USD\\&quot;)\\n  .value(0L);\\n\\nCardDetails cardDetails = new CardDetails()\\n  .encryptedCardNumber(\\&quot;test_4111111111111111\\&quot;)\\n  .holderName(\\&quot;John Smith\\&quot;)\\n  .encryptedSecurityCode(\\&quot;test_737\\&quot;)\\n  .encryptedExpiryYear(\\&quot;test_2030\\&quot;)\\n  .encryptedExpiryMonth(\\&quot;test_03\\&quot;)\\n  .type(CardDetails.TypeEnum.SCHEME);\\n\\nPaymentRequest paymentRequest = new PaymentRequest()\\n  .reference(\\&quot;YOUR_ORDER_REFERENCE\\&quot;)\\n  .amount(amount)\\n  .storePaymentMethod(true)\\n  .merchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  .recurringProcessingModel(PaymentRequest.RecurringProcessingModelEnum.CARDONFILE)\\n  .paymentMethod(new CheckoutPaymentMethod(cardDetails))\\n  .shopperInteraction(PaymentRequest.ShopperInteractionEnum.ECOMMERCE)\\n  .returnUrl(\\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;)\\n  .shopperReference(\\&quot;YOUR_SHOPPER_REFERENCE\\&quot;);\\n\\n\\\/\\\/ Send the request\\nPaymentsApi service = new PaymentsApi(client);\\nPaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\/\\\/ Adyen PHP API Library v28.2.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\Amount;\\nuse Adyen\\\\Model\\\\Checkout\\\\CheckoutPaymentMethod;\\nuse Adyen\\\\Model\\\\Checkout\\\\PaymentRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\PaymentsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$amount = new Amount();\\n$amount\\n  -&gt;setCurrency(\\&quot;USD\\&quot;)\\n  -&gt;setValue(0);\\n\\n$checkoutPaymentMethod = new CheckoutPaymentMethod();\\n$checkoutPaymentMethod\\n  -&gt;setEncryptedCardNumber(\\&quot;test_4111111111111111\\&quot;)\\n  -&gt;setHolderName(\\&quot;John Smith\\&quot;)\\n  -&gt;setEncryptedSecurityCode(\\&quot;test_737\\&quot;)\\n  -&gt;setEncryptedExpiryYear(\\&quot;test_2030\\&quot;)\\n  -&gt;setEncryptedExpiryMonth(\\&quot;test_03\\&quot;)\\n  -&gt;setType(\\&quot;scheme\\&quot;);\\n\\n$paymentRequest = new PaymentRequest();\\n$paymentRequest\\n  -&gt;setReference(\\&quot;YOUR_ORDER_REFERENCE\\&quot;)\\n  -&gt;setAmount($amount)\\n  -&gt;setStorePaymentMethod(true)\\n  -&gt;setMerchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setRecurringProcessingModel(\\&quot;CardOnFile\\&quot;)\\n  -&gt;setPaymentMethod($checkoutPaymentMethod)\\n  -&gt;setShopperInteraction(\\&quot;Ecommerce\\&quot;)\\n  -&gt;setReturnUrl(\\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;)\\n  -&gt;setShopperReference(\\&quot;YOUR_SHOPPER_REFERENCE\\&quot;);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new PaymentsApi($client);\\n$response = $service-&gt;payments($paymentRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v32.1.1\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount\\n{\\n  Currency = \\&quot;USD\\&quot;,\\n  Value = 0\\n};\\n\\nCardDetails cardDetails = new CardDetails\\n{\\n  EncryptedCardNumber = \\&quot;test_4111111111111111\\&quot;,\\n  HolderName = \\&quot;John Smith\\&quot;,\\n  EncryptedSecurityCode = \\&quot;test_737\\&quot;,\\n  EncryptedExpiryYear = \\&quot;test_2030\\&quot;,\\n  EncryptedExpiryMonth = \\&quot;test_03\\&quot;,\\n  Type = CardDetails.TypeEnum.Scheme\\n};\\n\\nPaymentRequest paymentRequest = new PaymentRequest\\n{\\n  Reference = \\&quot;YOUR_ORDER_REFERENCE\\&quot;,\\n  Amount = amount,\\n  StorePaymentMethod = true,\\n  MerchantAccount = \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel = PaymentRequest.RecurringProcessingModelEnum.CardOnFile,\\n  PaymentMethod = new CheckoutPaymentMethod(cardDetails),\\n  ShopperInteraction = PaymentRequest.ShopperInteractionEnum.Ecommerce,\\n  ReturnUrl = \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  ShopperReference = \\&quot;YOUR_SHOPPER_REFERENCE\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new PaymentsService(client);\\nvar response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.0.0\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst paymentRequest = {\\n  amount: {\\n    value: 0,\\n    currency: \\&quot;USD\\&quot;\\n  },\\n  paymentMethod: {\\n    type: \\&quot;scheme\\&quot;,\\n    encryptedCardNumber: \\&quot;test_4111111111111111\\&quot;,\\n    encryptedExpiryMonth: \\&quot;test_03\\&quot;,\\n    encryptedExpiryYear: \\&quot;test_2030\\&quot;,\\n    encryptedSecurityCode: \\&quot;test_737\\&quot;,\\n    holderName: \\&quot;John Smith\\&quot;\\n  },\\n  reference: \\&quot;YOUR_ORDER_REFERENCE\\&quot;,\\n  shopperInteraction: \\&quot;Ecommerce\\&quot;,\\n  recurringProcessingModel: \\&quot;CardOnFile\\&quot;,\\n  storePaymentMethod: \\&quot;true\\&quot;,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  shopperReference: \\&quot;YOUR_SHOPPER_REFERENCE\\&quot;,\\n  returnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v21.0.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\namount := checkout.Amount{\\n  Currency: \\&quot;USD\\&quot;,\\n  Value: 0,\\n}\\n\\ncardDetails := checkout.CardDetails{\\n  EncryptedCardNumber: common.PtrString(\\&quot;test_4111111111111111\\&quot;),\\n  HolderName: common.PtrString(\\&quot;John Smith\\&quot;),\\n  EncryptedSecurityCode: common.PtrString(\\&quot;test_737\\&quot;),\\n  EncryptedExpiryYear: common.PtrString(\\&quot;test_2030\\&quot;),\\n  EncryptedExpiryMonth: common.PtrString(\\&quot;test_03\\&quot;),\\n  Type: common.PtrString(\\&quot;scheme\\&quot;),\\n}\\n\\npaymentRequest := checkout.PaymentRequest{\\n  Reference: \\&quot;YOUR_ORDER_REFERENCE\\&quot;,\\n  Amount: amount,\\n  StorePaymentMethod: common.PtrBool(true),\\n  MerchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel: common.PtrString(\\&quot;CardOnFile\\&quot;),\\n  PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&amp;cardDetails),\\n  ShopperInteraction: common.PtrString(\\&quot;Ecommerce\\&quot;),\\n  ReturnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  ShopperReference: common.PtrString(\\&quot;YOUR_SHOPPER_REFERENCE\\&quot;),\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.PaymentsApi.PaymentsInput().IdempotencyKey(\\&quot;UUID\\&quot;).PaymentRequest(paymentRequest)\\nres, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v13.6.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;value\\&quot;: 0,\\n    \\&quot;currency\\&quot;: \\&quot;USD\\&quot;\\n  },\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n    \\&quot;encryptedCardNumber\\&quot;: \\&quot;test_4111111111111111\\&quot;,\\n    \\&quot;encryptedExpiryMonth\\&quot;: \\&quot;test_03\\&quot;,\\n    \\&quot;encryptedExpiryYear\\&quot;: \\&quot;test_2030\\&quot;,\\n    \\&quot;encryptedSecurityCode\\&quot;: \\&quot;test_737\\&quot;,\\n    \\&quot;holderName\\&quot;: \\&quot;John Smith\\&quot;\\n  },\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_ORDER_REFERENCE\\&quot;,\\n  \\&quot;shopperInteraction\\&quot;: \\&quot;Ecommerce\\&quot;,\\n  \\&quot;recurringProcessingModel\\&quot;: \\&quot;CardOnFile\\&quot;,\\n  \\&quot;storePaymentMethod\\&quot;: \\&quot;True\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;shopperReference\\&quot;: \\&quot;YOUR_SHOPPER_REFERENCE\\&quot;,\\n  \\&quot;returnUrl\\&quot;: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v10.4.0\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :amount =&gt; {\\n    :value =&gt; 0,\\n    :currency =&gt; 'USD'\\n  },\\n  :paymentMethod =&gt; {\\n    :type =&gt; 'scheme',\\n    :encryptedCardNumber =&gt; 'test_4111111111111111',\\n    :encryptedExpiryMonth =&gt; 'test_03',\\n    :encryptedExpiryYear =&gt; 'test_2030',\\n    :encryptedSecurityCode =&gt; 'test_737',\\n    :holderName =&gt; 'John Smith'\\n  },\\n  :reference =&gt; 'YOUR_ORDER_REFERENCE',\\n  :shopperInteraction =&gt; 'Ecommerce',\\n  :recurringProcessingModel =&gt; 'CardOnFile',\\n  :storePaymentMethod =&gt; 'true',\\n  :merchantAccount =&gt; 'YOUR_MERCHANT_ACCOUNT',\\n  :shopperReference =&gt; 'YOUR_SHOPPER_REFERENCE',\\n  :returnUrl =&gt; 'https:\\\/\\\/your-company.example.com\\\/...'\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.0.0\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst amount: Types.checkout.Amount = {\\n  currency: \\&quot;USD\\&quot;,\\n  value: 0\\n};\\n\\nconst cardDetails: Types.checkout.CardDetails = {\\n  encryptedCardNumber: \\&quot;test_4111111111111111\\&quot;,\\n  holderName: \\&quot;John Smith\\&quot;,\\n  encryptedSecurityCode: \\&quot;test_737\\&quot;,\\n  encryptedExpiryYear: \\&quot;test_2030\\&quot;,\\n  encryptedExpiryMonth: \\&quot;test_03\\&quot;,\\n  type: Types.checkout.CardDetails.TypeEnum.Scheme\\n};\\n\\nconst paymentRequest: Types.checkout.PaymentRequest = {\\n  reference: \\&quot;YOUR_ORDER_REFERENCE\\&quot;,\\n  amount: amount,\\n  storePaymentMethod: true,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  recurringProcessingModel: Types.checkout.PaymentRequest.RecurringProcessingModelEnum.CardOnFile,\\n  paymentMethod: cardDetails,\\n  shopperInteraction: Types.checkout.PaymentRequest.ShopperInteractionEnum.Ecommerce,\\n  returnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/...\\&quot;,\\n  shopperReference: \\&quot;YOUR_SHOPPER_REFERENCE\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>When a token is created, you receive a  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Tokenization-webhooks\/latest\/post\/recurring.token.created\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">recurring.token.created<\/a> webhook. The webhook contains the <code>storedPaymentMethodId<\/code> that you can use to make subsequent payments using the stored payment details.<\/p>\n<h3>Show stored cards<\/h3>\n<ol>\n<li>\n<p>In your  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/paymentMethods<\/a>\u00a0request, include the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods#request-shopperReference\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">shopperReference<\/a> that you specified when creating the token to receive the stored payment details for the shopper.<\/p>\n<p>The  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/paymentMethods\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/paymentMethods<\/a> response includes a <code>storedPaymentMethods<\/code> array containing the stored payment methods for this shopper. The <code>storedPaymentMethods<\/code> array contains the <code>id<\/code> that you need when making a payment.<\/p>\n<pre><code class=\"language-json\">         {\n         ...\n         \"storedPaymentMethods\":[\n             {\n                \"brand\":\"visa\",\n                \"expiryMonth\":\"10\",\n                \"expiryYear\":\"2020\",\n                \"holderName\":\"John Smith\",\n                \"id\":\"8415718415172204\",\n                \"lastFour\":\"1111\",\n                \"name\":\"VISA\",\n                \"supportedShopperInteractions\":[\n                   \"Ecommerce\",\n                   \"ContAuth\"\n                ],\n                \"type\":\"scheme\"\n             }\n         ]\n         ...\n         }<\/code><\/pre>\n<\/li>\n<li>\n<p>On your checkout page, use the Custom Card Component to collect the following details from the shopper:<\/p>\n<table>\n<thead>\n<tr>\n<th>Card details<\/th>\n<th>Example input<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>The security code (CVV \/ CVC)<\/td>\n<td>\"737\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>When <code>onSubmit<\/code> callback is triggered and if <code>state.isValid<\/code> is true, get the encrypted values from <code>state.data<\/code> and pass these values to your server.<\/p>\n<\/li>\n<\/ol>\n<h3>Make a one-click payment<\/h3>\n<p><a href=\"\/pt\/online-payments\/tokenization\/make-token-payments#make-a-one-click-payment\">Make a one-click payment<\/a> using standard tokenization parameters. You do not need to include any additional parameters for cards.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Make a one-click payment with a card token'\" :id=\"'one-click-card-token-payment'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v72\\\/payments \\\\\\n-H 'x-API-key: ADYEN_API_KEY' \\\\\\n-H 'Content-Type: application\\\/json' \\\\\\n-d '{\\n     \\&quot;amount\\&quot;:{\\n       \\&quot;value\\&quot;:2000,\\n       \\&quot;currency\\&quot;:\\&quot;USD\\&quot;\\n     },\\n     \\&quot;paymentMethod\\&quot;:{\\n       \\&quot;type\\&quot;:\\&quot;scheme\\&quot;,\\n       \\&quot;storedPaymentMethodId\\&quot;:\\&quot;8415718415172204\\&quot;,\\n       \\&quot;encryptedSecurityCode\\&quot;:\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;\\n     },\\n     \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n     \\&quot;merchantAccount\\&quot;:\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n     \\&quot;returnUrl\\&quot;:\\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;,\\n     \\&quot;shopperReference\\&quot;:\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n     \\&quot;shopperInteraction\\&quot;:\\&quot;ContAuth\\&quot;,\\n     \\&quot;recurringProcessingModel\\&quot;:\\&quot;CardOnFile\\&quot;\\n }'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v39.4.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount()\\n  .currency(\\&quot;USD\\&quot;)\\n  .value(2000L);\\n\\nCardDetails cardDetails = new CardDetails()\\n  .encryptedSecurityCode(\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;)\\n  .storedPaymentMethodId(\\&quot;8415718415172204\\&quot;)\\n  .type(CardDetails.TypeEnum.SCHEME);\\n\\nPaymentRequest paymentRequest = new PaymentRequest()\\n  .reference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  .amount(amount)\\n  .merchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  .recurringProcessingModel(PaymentRequest.RecurringProcessingModelEnum.CARDONFILE)\\n  .paymentMethod(new CheckoutPaymentMethod(cardDetails))\\n  .shopperInteraction(PaymentRequest.ShopperInteractionEnum.CONTAUTH)\\n  .returnUrl(\\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;)\\n  .shopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;);\\n\\n\\\/\\\/ Send the request\\nPaymentsApi service = new PaymentsApi(client);\\nPaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\/\\\/ Adyen PHP API Library v28.2.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\Amount;\\nuse Adyen\\\\Model\\\\Checkout\\\\CheckoutPaymentMethod;\\nuse Adyen\\\\Model\\\\Checkout\\\\PaymentRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\PaymentsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$amount = new Amount();\\n$amount\\n  -&gt;setCurrency(\\&quot;USD\\&quot;)\\n  -&gt;setValue(2000);\\n\\n$checkoutPaymentMethod = new CheckoutPaymentMethod();\\n$checkoutPaymentMethod\\n  -&gt;setEncryptedSecurityCode(\\&quot;adyenjs_0_1_18\\\\$MT6ppy0FAMVMLH...\\&quot;)\\n  -&gt;setStoredPaymentMethodId(\\&quot;8415718415172204\\&quot;)\\n  -&gt;setType(\\&quot;scheme\\&quot;);\\n\\n$paymentRequest = new PaymentRequest();\\n$paymentRequest\\n  -&gt;setReference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  -&gt;setAmount($amount)\\n  -&gt;setMerchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setRecurringProcessingModel(\\&quot;CardOnFile\\&quot;)\\n  -&gt;setPaymentMethod($checkoutPaymentMethod)\\n  -&gt;setShopperInteraction(\\&quot;ContAuth\\&quot;)\\n  -&gt;setReturnUrl(\\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;)\\n  -&gt;setShopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new PaymentsApi($client);\\n$response = $service-&gt;payments($paymentRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v32.1.2\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount\\n{\\n  Currency = \\&quot;USD\\&quot;,\\n  Value = 2000\\n};\\n\\nCardDetails cardDetails = new CardDetails\\n{\\n  EncryptedSecurityCode = \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;,\\n  StoredPaymentMethodId = \\&quot;8415718415172204\\&quot;,\\n  Type = CardDetails.TypeEnum.Scheme\\n};\\n\\nPaymentRequest paymentRequest = new PaymentRequest\\n{\\n  Reference = \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount = amount,\\n  MerchantAccount = \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel = PaymentRequest.RecurringProcessingModelEnum.CardOnFile,\\n  PaymentMethod = new CheckoutPaymentMethod(cardDetails),\\n  ShopperInteraction = PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  ReturnUrl = \\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;,\\n  ShopperReference = \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new PaymentsService(client);\\nvar response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.1.0\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst paymentRequest = {\\n  amount: {\\n    value: 2000,\\n    currency: \\&quot;USD\\&quot;\\n  },\\n  paymentMethod: {\\n    type: \\&quot;scheme\\&quot;,\\n    storedPaymentMethodId: \\&quot;8415718415172204\\&quot;,\\n    encryptedSecurityCode: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;\\n  },\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  returnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n  shopperInteraction: \\&quot;ContAuth\\&quot;,\\n  recurringProcessingModel: \\&quot;CardOnFile\\&quot;\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v21.0.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\namount := checkout.Amount{\\n  Currency: \\&quot;USD\\&quot;,\\n  Value: 2000,\\n}\\n\\ncardDetails := checkout.CardDetails{\\n  EncryptedSecurityCode: common.PtrString(\\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;),\\n  StoredPaymentMethodId: common.PtrString(\\&quot;8415718415172204\\&quot;),\\n  Type: common.PtrString(\\&quot;scheme\\&quot;),\\n}\\n\\npaymentRequest := checkout.PaymentRequest{\\n  Reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount: amount,\\n  MerchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel: common.PtrString(\\&quot;CardOnFile\\&quot;),\\n  PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&amp;cardDetails),\\n  ShopperInteraction: common.PtrString(\\&quot;ContAuth\\&quot;),\\n  ReturnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;,\\n  ShopperReference: common.PtrString(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;),\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.PaymentsApi.PaymentsInput().IdempotencyKey(\\&quot;UUID\\&quot;).PaymentRequest(paymentRequest)\\nres, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v13.6.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;value\\&quot;: 2000,\\n    \\&quot;currency\\&quot;: \\&quot;USD\\&quot;\\n  },\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n    \\&quot;storedPaymentMethodId\\&quot;: \\&quot;8415718415172204\\&quot;,\\n    \\&quot;encryptedSecurityCode\\&quot;: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;\\n  },\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;returnUrl\\&quot;: \\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;,\\n  \\&quot;shopperReference\\&quot;: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n  \\&quot;shopperInteraction\\&quot;: \\&quot;ContAuth\\&quot;,\\n  \\&quot;recurringProcessingModel\\&quot;: \\&quot;CardOnFile\\&quot;\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v10.4.0\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :amount =&gt; {\\n    :value =&gt; 2000,\\n    :currency =&gt; 'USD'\\n  },\\n  :paymentMethod =&gt; {\\n    :type =&gt; 'scheme',\\n    :storedPaymentMethodId =&gt; '8415718415172204',\\n    :encryptedSecurityCode =&gt; 'adyenjs_0_1_18$MT6ppy0FAMVMLH...'\\n  },\\n  :reference =&gt; 'YOUR_ORDER_NUMBER',\\n  :merchantAccount =&gt; 'YOUR_MERCHANT_ACCOUNT',\\n  :returnUrl =&gt; 'https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..',\\n  :shopperReference =&gt; 'YOUR_UNIQUE_SHOPPER_ID',\\n  :shopperInteraction =&gt; 'ContAuth',\\n  :recurringProcessingModel =&gt; 'CardOnFile'\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.1.0\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst amount: Types.checkout.Amount = {\\n  currency: \\&quot;USD\\&quot;,\\n  value: 2000\\n};\\n\\nconst cardDetails: Types.checkout.CardDetails = {\\n  encryptedSecurityCode: \\&quot;adyenjs_0_1_18$MT6ppy0FAMVMLH...\\&quot;,\\n  storedPaymentMethodId: \\&quot;8415718415172204\\&quot;,\\n  type: Types.checkout.CardDetails.TypeEnum.Scheme\\n};\\n\\nconst paymentRequest: Types.checkout.PaymentRequest = {\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  amount: amount,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  recurringProcessingModel: Types.checkout.PaymentRequest.RecurringProcessingModelEnum.CardOnFile,\\n  paymentMethod: cardDetails,\\n  shopperInteraction: Types.checkout.PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  returnUrl: \\&quot;https:\\\/\\\/your-company.example.com\\\/checkout?shopperOrder=12xy..\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h3>Make a subscription payment<\/h3>\n<p><a href=\"\/pt\/online-payments\/tokenization\/make-token-payments#make-a-subscription-or-unscheduled-card-on-file-payment\">Make a subscription payment<\/a> using standard tokenization parameters. You do not need to include any additional parameters for cards.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Make a subscription payment with a card token'\" :id=\"'subscription-card-token-payment'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v72\\\/payments \\\\\\n-H 'x-API-key: ADYEN_API_KEY' \\\\\\n-H 'Content-Type: application\\\/json' \\\\\\n-d '{\\n     \\&quot;amount\\&quot;:{\\n       \\&quot;value\\&quot;:2000,\\n       \\&quot;currency\\&quot;:\\&quot;USD\\&quot;\\n     },\\n     \\&quot;paymentMethod\\&quot;:{\\n       \\&quot;type\\&quot;:\\&quot;scheme\\&quot;,\\n       \\&quot;storedPaymentMethodId\\&quot;:\\&quot;8415718415172204\\&quot;\\n     },\\n     \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n     \\&quot;merchantAccount\\&quot;:\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n     \\&quot;returnUrl\\&quot;:\\&quot;...\\&quot;,\\n     \\&quot;shopperReference\\&quot;:\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n     \\&quot;shopperInteraction\\&quot;:\\&quot;ContAuth\\&quot;,\\n     \\&quot;recurringProcessingModel\\&quot;:\\&quot;Subscription\\&quot;\\n }'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v39.4.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount()\\n  .currency(\\&quot;USD\\&quot;)\\n  .value(2000L);\\n\\nCardDetails cardDetails = new CardDetails()\\n  .storedPaymentMethodId(\\&quot;8415718415172204\\&quot;)\\n  .type(CardDetails.TypeEnum.SCHEME);\\n\\nPaymentRequest paymentRequest = new PaymentRequest()\\n  .reference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  .amount(amount)\\n  .merchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  .recurringProcessingModel(PaymentRequest.RecurringProcessingModelEnum.SUBSCRIPTION)\\n  .paymentMethod(new CheckoutPaymentMethod(cardDetails))\\n  .shopperInteraction(PaymentRequest.ShopperInteractionEnum.CONTAUTH)\\n  .returnUrl(\\&quot;...\\&quot;)\\n  .shopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;);\\n\\n\\\/\\\/ Send the request\\nPaymentsApi service = new PaymentsApi(client);\\nPaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\/\\\/ Adyen PHP API Library v28.2.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\Amount;\\nuse Adyen\\\\Model\\\\Checkout\\\\CheckoutPaymentMethod;\\nuse Adyen\\\\Model\\\\Checkout\\\\PaymentRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\PaymentsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$amount = new Amount();\\n$amount\\n  -&gt;setCurrency(\\&quot;USD\\&quot;)\\n  -&gt;setValue(2000);\\n\\n$checkoutPaymentMethod = new CheckoutPaymentMethod();\\n$checkoutPaymentMethod\\n  -&gt;setStoredPaymentMethodId(\\&quot;8415718415172204\\&quot;)\\n  -&gt;setType(\\&quot;scheme\\&quot;);\\n\\n$paymentRequest = new PaymentRequest();\\n$paymentRequest\\n  -&gt;setReference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  -&gt;setAmount($amount)\\n  -&gt;setMerchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setRecurringProcessingModel(\\&quot;Subscription\\&quot;)\\n  -&gt;setPaymentMethod($checkoutPaymentMethod)\\n  -&gt;setShopperInteraction(\\&quot;ContAuth\\&quot;)\\n  -&gt;setReturnUrl(\\&quot;...\\&quot;)\\n  -&gt;setShopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new PaymentsApi($client);\\n$response = $service-&gt;payments($paymentRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v32.1.2\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount\\n{\\n  Currency = \\&quot;USD\\&quot;,\\n  Value = 2000\\n};\\n\\nCardDetails cardDetails = new CardDetails\\n{\\n  StoredPaymentMethodId = \\&quot;8415718415172204\\&quot;,\\n  Type = CardDetails.TypeEnum.Scheme\\n};\\n\\nPaymentRequest paymentRequest = new PaymentRequest\\n{\\n  Reference = \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount = amount,\\n  MerchantAccount = \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel = PaymentRequest.RecurringProcessingModelEnum.Subscription,\\n  PaymentMethod = new CheckoutPaymentMethod(cardDetails),\\n  ShopperInteraction = PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  ReturnUrl = \\&quot;...\\&quot;,\\n  ShopperReference = \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new PaymentsService(client);\\nvar response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.1.0\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst paymentRequest = {\\n  amount: {\\n    value: 2000,\\n    currency: \\&quot;USD\\&quot;\\n  },\\n  paymentMethod: {\\n    type: \\&quot;scheme\\&quot;,\\n    storedPaymentMethodId: \\&quot;8415718415172204\\&quot;\\n  },\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  returnUrl: \\&quot;...\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n  shopperInteraction: \\&quot;ContAuth\\&quot;,\\n  recurringProcessingModel: \\&quot;Subscription\\&quot;\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v21.0.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\namount := checkout.Amount{\\n  Currency: \\&quot;USD\\&quot;,\\n  Value: 2000,\\n}\\n\\ncardDetails := checkout.CardDetails{\\n  StoredPaymentMethodId: common.PtrString(\\&quot;8415718415172204\\&quot;),\\n  Type: common.PtrString(\\&quot;scheme\\&quot;),\\n}\\n\\npaymentRequest := checkout.PaymentRequest{\\n  Reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount: amount,\\n  MerchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel: common.PtrString(\\&quot;Subscription\\&quot;),\\n  PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&amp;cardDetails),\\n  ShopperInteraction: common.PtrString(\\&quot;ContAuth\\&quot;),\\n  ReturnUrl: \\&quot;...\\&quot;,\\n  ShopperReference: common.PtrString(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;),\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.PaymentsApi.PaymentsInput().IdempotencyKey(\\&quot;UUID\\&quot;).PaymentRequest(paymentRequest)\\nres, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v13.6.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;value\\&quot;: 2000,\\n    \\&quot;currency\\&quot;: \\&quot;USD\\&quot;\\n  },\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n    \\&quot;storedPaymentMethodId\\&quot;: \\&quot;8415718415172204\\&quot;\\n  },\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;returnUrl\\&quot;: \\&quot;...\\&quot;,\\n  \\&quot;shopperReference\\&quot;: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n  \\&quot;shopperInteraction\\&quot;: \\&quot;ContAuth\\&quot;,\\n  \\&quot;recurringProcessingModel\\&quot;: \\&quot;Subscription\\&quot;\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v10.4.0\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :amount =&gt; {\\n    :value =&gt; 2000,\\n    :currency =&gt; 'USD'\\n  },\\n  :paymentMethod =&gt; {\\n    :type =&gt; 'scheme',\\n    :storedPaymentMethodId =&gt; '8415718415172204'\\n  },\\n  :reference =&gt; 'YOUR_ORDER_NUMBER',\\n  :merchantAccount =&gt; 'YOUR_MERCHANT_ACCOUNT',\\n  :returnUrl =&gt; '...',\\n  :shopperReference =&gt; 'YOUR_UNIQUE_SHOPPER_ID',\\n  :shopperInteraction =&gt; 'ContAuth',\\n  :recurringProcessingModel =&gt; 'Subscription'\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.1.0\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst amount: Types.checkout.Amount = {\\n  currency: \\&quot;USD\\&quot;,\\n  value: 2000\\n};\\n\\nconst cardDetails: Types.checkout.CardDetails = {\\n  storedPaymentMethodId: \\&quot;8415718415172204\\&quot;,\\n  type: Types.checkout.CardDetails.TypeEnum.Scheme\\n};\\n\\nconst paymentRequest: Types.checkout.PaymentRequest = {\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  amount: amount,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  recurringProcessingModel: Types.checkout.PaymentRequest.RecurringProcessingModelEnum.Subscription,\\n  paymentMethod: cardDetails,\\n  shopperInteraction: Types.checkout.PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  returnUrl: \\&quot;...\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h3>Make an unscheduled card-on-file payment<\/h3>\n<p><a href=\"\/pt\/online-payments\/tokenization\/make-token-payments#make-a-subscription-or-unscheduled-card-on-file-payment\">Make an unscheduled card-on-file payment<\/a> using standard tokenization parameters. You do not need to include any additional parameters for cards.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Make an unscheduled card-on-file payment with a card token'\" :id=\"'unscheduled-card-on-file-payment-card-token'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v72\\\/payments \\\\\\n-H 'x-API-key: ADYEN_API_KEY' \\\\\\n-H 'Content-Type: application\\\/json' \\\\\\n-d '{\\n     \\&quot;amount\\&quot;:{\\n       \\&quot;value\\&quot;:2000,\\n       \\&quot;currency\\&quot;:\\&quot;USD\\&quot;\\n     },\\n     \\&quot;paymentMethod\\&quot;:{\\n       \\&quot;type\\&quot;:\\&quot;scheme\\&quot;,\\n       \\&quot;storedPaymentMethodId\\&quot;:\\&quot;8415718415172204\\&quot;\\n     },\\n     \\&quot;reference\\&quot;:\\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n     \\&quot;merchantAccount\\&quot;:\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n     \\&quot;returnUrl\\&quot;:\\&quot;...\\&quot;,\\n     \\&quot;shopperReference\\&quot;:\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n     \\&quot;shopperInteraction\\&quot;:\\&quot;ContAuth\\&quot;,\\n     \\&quot;recurringProcessingModel\\&quot;:\\&quot;UnscheduledCardOnFile\\&quot;\\n }'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v39.4.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount()\\n  .currency(\\&quot;USD\\&quot;)\\n  .value(2000L);\\n\\nCardDetails cardDetails = new CardDetails()\\n  .storedPaymentMethodId(\\&quot;8415718415172204\\&quot;)\\n  .type(CardDetails.TypeEnum.SCHEME);\\n\\nPaymentRequest paymentRequest = new PaymentRequest()\\n  .reference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  .amount(amount)\\n  .merchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  .recurringProcessingModel(PaymentRequest.RecurringProcessingModelEnum.UNSCHEDULEDCARDONFILE)\\n  .paymentMethod(new CheckoutPaymentMethod(cardDetails))\\n  .shopperInteraction(PaymentRequest.ShopperInteractionEnum.CONTAUTH)\\n  .returnUrl(\\&quot;...\\&quot;)\\n  .shopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;);\\n\\n\\\/\\\/ Send the request\\nPaymentsApi service = new PaymentsApi(client);\\nPaymentResponse response = service.payments(paymentRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\/\\\/ Adyen PHP API Library v28.2.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\Amount;\\nuse Adyen\\\\Model\\\\Checkout\\\\CheckoutPaymentMethod;\\nuse Adyen\\\\Model\\\\Checkout\\\\PaymentRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\PaymentsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$amount = new Amount();\\n$amount\\n  -&gt;setCurrency(\\&quot;USD\\&quot;)\\n  -&gt;setValue(2000);\\n\\n$checkoutPaymentMethod = new CheckoutPaymentMethod();\\n$checkoutPaymentMethod\\n  -&gt;setStoredPaymentMethodId(\\&quot;8415718415172204\\&quot;)\\n  -&gt;setType(\\&quot;scheme\\&quot;);\\n\\n$paymentRequest = new PaymentRequest();\\n$paymentRequest\\n  -&gt;setReference(\\&quot;YOUR_ORDER_NUMBER\\&quot;)\\n  -&gt;setAmount($amount)\\n  -&gt;setMerchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setRecurringProcessingModel(\\&quot;UnscheduledCardOnFile\\&quot;)\\n  -&gt;setPaymentMethod($checkoutPaymentMethod)\\n  -&gt;setShopperInteraction(\\&quot;ContAuth\\&quot;)\\n  -&gt;setReturnUrl(\\&quot;...\\&quot;)\\n  -&gt;setShopperReference(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new PaymentsApi($client);\\n$response = $service-&gt;payments($paymentRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v32.1.2\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nAmount amount = new Amount\\n{\\n  Currency = \\&quot;USD\\&quot;,\\n  Value = 2000\\n};\\n\\nCardDetails cardDetails = new CardDetails\\n{\\n  StoredPaymentMethodId = \\&quot;8415718415172204\\&quot;,\\n  Type = CardDetails.TypeEnum.Scheme\\n};\\n\\nPaymentRequest paymentRequest = new PaymentRequest\\n{\\n  Reference = \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount = amount,\\n  MerchantAccount = \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel = PaymentRequest.RecurringProcessingModelEnum.UnscheduledCardOnFile,\\n  PaymentMethod = new CheckoutPaymentMethod(cardDetails),\\n  ShopperInteraction = PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  ReturnUrl = \\&quot;...\\&quot;,\\n  ShopperReference = \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new PaymentsService(client);\\nvar response = service.Payments(paymentRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.1.0\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst paymentRequest = {\\n  amount: {\\n    value: 2000,\\n    currency: \\&quot;USD\\&quot;\\n  },\\n  paymentMethod: {\\n    type: \\&quot;scheme\\&quot;,\\n    storedPaymentMethodId: \\&quot;8415718415172204\\&quot;\\n  },\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  returnUrl: \\&quot;...\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n  shopperInteraction: \\&quot;ContAuth\\&quot;,\\n  recurringProcessingModel: \\&quot;UnscheduledCardOnFile\\&quot;\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v21.0.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\namount := checkout.Amount{\\n  Currency: \\&quot;USD\\&quot;,\\n  Value: 2000,\\n}\\n\\ncardDetails := checkout.CardDetails{\\n  StoredPaymentMethodId: common.PtrString(\\&quot;8415718415172204\\&quot;),\\n  Type: common.PtrString(\\&quot;scheme\\&quot;),\\n}\\n\\npaymentRequest := checkout.PaymentRequest{\\n  Reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  Amount: amount,\\n  MerchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  RecurringProcessingModel: common.PtrString(\\&quot;UnscheduledCardOnFile\\&quot;),\\n  PaymentMethod: checkout.CardDetailsAsCheckoutPaymentMethod(&amp;cardDetails),\\n  ShopperInteraction: common.PtrString(\\&quot;ContAuth\\&quot;),\\n  ReturnUrl: \\&quot;...\\&quot;,\\n  ShopperReference: common.PtrString(\\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;),\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.PaymentsApi.PaymentsInput().IdempotencyKey(\\&quot;UUID\\&quot;).PaymentRequest(paymentRequest)\\nres, httpRes, err := service.PaymentsApi.Payments(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v13.6.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;amount\\&quot;: {\\n    \\&quot;value\\&quot;: 2000,\\n    \\&quot;currency\\&quot;: \\&quot;USD\\&quot;\\n  },\\n  \\&quot;paymentMethod\\&quot;: {\\n    \\&quot;type\\&quot;: \\&quot;scheme\\&quot;,\\n    \\&quot;storedPaymentMethodId\\&quot;: \\&quot;8415718415172204\\&quot;\\n  },\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;returnUrl\\&quot;: \\&quot;...\\&quot;,\\n  \\&quot;shopperReference\\&quot;: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;,\\n  \\&quot;shopperInteraction\\&quot;: \\&quot;ContAuth\\&quot;,\\n  \\&quot;recurringProcessingModel\\&quot;: \\&quot;UnscheduledCardOnFile\\&quot;\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v10.4.0\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :amount =&gt; {\\n    :value =&gt; 2000,\\n    :currency =&gt; 'USD'\\n  },\\n  :paymentMethod =&gt; {\\n    :type =&gt; 'scheme',\\n    :storedPaymentMethodId =&gt; '8415718415172204'\\n  },\\n  :reference =&gt; 'YOUR_ORDER_NUMBER',\\n  :merchantAccount =&gt; 'YOUR_MERCHANT_ACCOUNT',\\n  :returnUrl =&gt; '...',\\n  :shopperReference =&gt; 'YOUR_UNIQUE_SHOPPER_ID',\\n  :shopperInteraction =&gt; 'ContAuth',\\n  :recurringProcessingModel =&gt; 'UnscheduledCardOnFile'\\n}\\n\\n# Send the request\\nresult = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.1.0\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst amount: Types.checkout.Amount = {\\n  currency: \\&quot;USD\\&quot;,\\n  value: 2000\\n};\\n\\nconst cardDetails: Types.checkout.CardDetails = {\\n  storedPaymentMethodId: \\&quot;8415718415172204\\&quot;,\\n  type: Types.checkout.CardDetails.TypeEnum.Scheme\\n};\\n\\nconst paymentRequest: Types.checkout.PaymentRequest = {\\n  reference: \\&quot;YOUR_ORDER_NUMBER\\&quot;,\\n  amount: amount,\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  recurringProcessingModel: Types.checkout.PaymentRequest.RecurringProcessingModelEnum.UnscheduledCardOnFile,\\n  paymentMethod: cardDetails,\\n  shopperInteraction: Types.checkout.PaymentRequest.ShopperInteractionEnum.ContAuth,\\n  returnUrl: \\&quot;...\\&quot;,\\n  shopperReference: \\&quot;YOUR_UNIQUE_SHOPPER_ID\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2 id=\"collecting-additional-data\">Collecting additional data to detect fraud<\/h2>\n \n<p>For Web Drop-in\/Components integrations, you can optionally <a href=\"\/pt\/risk-management\/fraud-data-collection\">collect data to detect fraud<\/a> outside of the checkout page, in addition to the data that you send when the shopper checks out. We recommend that you collect data about the shopper's activity on every page of your site.<\/p>\n \n<p>To do this, add the following script to any of your web pages.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Data collection script'\" :id=\"''\" :code-data='[{\"language\":\"javascript\",\"tabTitle\":\"\",\"content\":\"&lt;script src=\\\"https:\\\/\\\/checkoutshopper-live.adyen.com\\\/checkoutshopper\\\/assets\\\/js\\\/datacollection\\\/datacollection.js\\\"&gt;&lt;\\\/script&gt;\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>When the shopper checks out, the Custom Card Component sends all of the data collected by the script to Adyen. This includes the data from the checkout page as well as any data collected from other web pages that contain the script.<\/p>\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>If your client-side integration isn't ready, you can <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/test-card-numbers#test-encrypted-card-details\">test API requests with encrypted card details<\/a> by adding a <code>test_<\/code> prefix to the test card details.<\/p>\n<div class=\"sc-notice note\"><div>\n<p><a href=\"\/pt\/online-payments\/release-notes?integration_type=web&amp;version=5.20.0\">v5.20.0 or later<\/a>: Card input fields use <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc7516\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">JSON Web Encryption<\/a>, so your test environment must be a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Secure_Contexts#when_is_a_context_considered_secure\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">secure context<\/a>. Use either a local or <code>https<\/code> domain, and add it to your <a href=\"\/pt\/development-resources\/client-side-authentication#allowed-origins\">allowed origins<\/a>.<\/p>\n<\/div><\/div>\n<p>Before making live card payments:<\/p>\n<ol>\n<li>\n<p>Test your integration using our <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/test-card-numbers\">test card numbers<\/a>. You can check the status of test payments in your\u00a0<a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>\u00a0&gt;\u00a0<strong>Transactions<\/strong>\u00a0&gt;\u00a0<strong>Payments<\/strong>.<\/p>\n<\/li>\n<li>\n<p><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add the cards that you want to accept<\/a> 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<\/li>\n<li>\n<p>Before you can start accepting card payments in the live environment, you need to assess your PCI DSS compliance and submit the required <em>Self-Assessment Questionnaire A<\/em> document. For more information, refer to <a href=\"\/pt\/development-resources\/pci-dss-compliance-guide#online-payments\">PCI DSS compliance guide<\/a>.<\/p>\n<\/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=\"\/online-payments\/api-only\"\n                        target=\"_self\"\n                        >\n                    API-only integration guide\n                <\/a><\/li><li><a href=\"\/online-payments\/tokenization\"\n                        target=\"_self\"\n                        >\n                    Tokenization\n                <\/a><\/li><li><a href=\"\/development-resources\/webhooks\"\n                        target=\"_self\"\n                        >\n                    Webhooks\n                <\/a><\/li><li><a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    API Explorer\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/cards\/custom-card-integration","articleFields":{"description":"Build your own UI and use Adyen's client-side solutions to encrypt card details.","feedback_component":true,"id":"47481347","type":"page","_expandable":{"operations":""},"status":"current","parameters":{"secured_fields":"true","platform":"api"},"page_id":"17dea4ba-a251-4ef1-bf1c-de84367b060d","filters_component":false,"decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/cards\/custom-card-integration","title":"API only with encrypted card data","content":"To ensure PCI compliance when you build your own cards payment form, use our client-side solutions to help encrypt card details.\n\n\n    \n        \n        \n    \n\n\n\nIf you prefer not to build your own card payment form, use Drop-in or Card Component for web, iOS, Android, React Native, or Flutter instead.\n\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have built an API-only integration. \n\n\nSetup steps\nBefore you begin, add the cards that you want to support in your test Customer Area.\n\n\n\nShow the available cards in your payment form\n\nFor information about the supported locations and currencies for each card, refer to Payment methods.\n\nSpecify in your  \/paymentMethods request a combination of  countryCode and  amount.currency, and use the  \/paymentMethods response to determine which cards are available to the shopper. For more information, refer to our API-only integration guide.\nNext, use our client-side solutions to validate and encrypt your shopper's card details. Select the platform below:\n\n\n    \n        \n        \n    \n\n\nMake a payment\nFrom your server, make a POST  \/payments request, specifying:\n\n\n\nParameter\nDescription\n\n\n\n\namount\nThe currency of the payment and its value in minor units.\n\n\nreference\nYour unique reference for this payment.\n\n\npaymentMethod\nObject that contains the encrypted card details from the client side, the card holder's name (if you collected it), and a type parameter set to scheme.\n\n\nreturnUrl\nURL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: http:\/\/ or https:\/\/. You can also include your own additional query parameters, for example, shopper ID or order reference number.    If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value.   The URL must not include personally identifiable information (PII), for example name or email address. \n\n\nmerchantAccount\nYour merchant account name.\n\n\nriskData\nDevice characteristics and other data that we use to detect fraudulent payment activity, and mitigate fraud. If you collect additional data from other pages on your website, that data is also included in this object.\n\n\n\n\n    \n\nThe  \/payments response contains:\n\npspReference: Our unique identifier for the transaction.\nresultCode: Use this to present the payment result to your shopper.\nmerchantReference: The reference from the  \/payments request.\nadditionalData: Additional information about the transaction.\nTo specify the fields that you want to receive in additionalData, log in to your Customer Area, and go to Developers &gt; Additional data.  \n\n\n    \n\nPresent the payment result\nUse the\u00a0 resultCode from the  \/payments response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a webhook.\n\nFor card payments, you can receive the following resultCode values:\n\n\n\nresultCode\nDescription\nAction to take\n\n\n\n\nAuthorised\nThe payment was successful.\nInform the shopper that the payment has been successful.  If you are using manual capture, you also need to capture the payment.\n\n\nCancelled\nThe shopper cancelled the payment.\nAsk the shopper whether they want to continue with the order, or ask them to select a different payment method.\n\n\nError\nThere was an error when the payment was being processed. For more information, check the \n  refusalReason\n field.\nInform the shopper that there was an error processing their payment.\n\n\nRefused\nThe payment was refused.  For more information, check the \n  refusalReason\n field.\nAsk the shopper to try the payment again using a different payment method.\n\n\n\n\nAdditional resultCode values are possible in case of the 3D Secure authentication flow. For more information, refer to Result codes.\n\nShowing co-badged cards\nRegulatory guidelines for some regions require the following:\n\nWhen a shopper presents a co-badged card, they must be allowed to select their preferred brand.\nIf the shopper selected a preferred brand, the payment must be completed with this brand.\nIf you accept credit and debit cards, your card payment section must refer to both debit and credit cards. You cannot present only a credit card section.\n\nFor Web integrations, to comply with these guidelines:\n\nUse the \n  onBinLookup\n event to detect if a card is co-badged.\nIf you accept debit and credit cards, use a label that does not discriminate between card products in your checkout. For example, Cards, or Card payment.\nIf a card is co-badged, present all supported brands to the shopper, allowing them to click on the brand they want to pay with. Each of the presented brands should have an alt or a data-value attribute.\nIf the shopper makes a choice, pass the corresponding event to the dualBrandingChangeHandler function.\nThe shopper's selected brand will then be included in the state.data from the Component.\n\nThe following example shows how to present brand logos for a co-badged Bancontact\/Maestro card:\nfunction onBinLookup(pCallbackObj) {\n    \/\/ Handle a dual branded result\n    if (pCallbackObj.supportedBrandsRaw?.length &gt; 1) {\n        onDualBrand(pCallbackObj);\n    }\n}\n\/\/ Implement dual branding\nfunction onDualBrand(pCallbackObj) {\n  const logoOne = document.getElementById('pmImageDual1');\n  const logoTwo = document.getElementById('pmImageDual2');\n  const supportedBrands = pCallbackObj.supportedBrandsRaw;\n\n  \/\/Set one brand icon, add alt or data-value attributes; add an event listener\n  logoOne.setAttribute('src', supportedBrands[0].brandImageUrl);\n  logoOne.setAttribute('alt', supportedBrands[0].brand);\n  logoOne.setAttribute('data-value', supportedBrands[0].brand);\n  logoOne.addEventListener('click', dualBrandListener);\n\n  \/\/ Set the other brand icon, add alt or data-value attributes; add an event listener\n  logoTwo.setAttribute('src', supportedBrands[1].brandImageUrl);\n  logoTwo.setAttribute('alt', supportedBrands[1].brand);\n  logoTwo.setAttribute('data-value', supportedBrands[1].brand);\n  logoTwo.addEventListener('click', dualBrandListener);\n}\nImplementing dualBrandListener to pass the selected attributes to to dualBrandingChangeHandler:\nfunction dualBrandListener(e) {\n    securedFields.dualBrandingChangeHandler(e);\n}\nPresent debit and credit cards separately\n\nThis requires Checkout API v53 and later.\n\nIn some scenarios, you may want to present your shoppers with separate payment forms for debit cards and credit cards. Some examples include:\n\nIf you accept payments in Sweden, you need to present debit cards before credit cards in order to comply with local legislation.\nIn Brazil, many shoppers use Combo cards, allowing for both debit and credit transactions. Having a separate form for Debit Card and Credit Card gives your shoppers a clear indication of whether they are making a debit or credit transaction.\n\nFor more details, see the corresponding sections about Brazil and Sweden.\n\nTo show debit and credit cards separately:\n\n\nIf you are using the  \/paymentMethods endpoint to get a list of payment methods to present on the client side, include:\n\n splitCardFundingSources&#58; Set this to true to receive separate objects for credit and debit cards in the response.\n\n\n\n\nThe following example shows how to get the available payment methods for a shopper in the Netherlands, making a EUR&nbsp;47.00 payment.\n\n\n\nThe response includes the list of available payment methods, with debit and credit cards split into separate objects.\n\n\n\n\n\nWhen the shopper selects to pay with either a debit or credit card, proceed to make a POST  \/payments request and include:\n\npaymentMethod.fundingSource: Set this to either credit or debit.\n\n\n\n\nThe following example shows how you can make a payment request for a debit card.\n\n\n\n\n\nBrazil\nFor debit transactions, we highly recommend using 3D Secure and automatic capture  due to some issuers' restrictions.\nSweden\nWhen accepting payments in Sweden, present debit before credit cards, and label the forms clearly in order to comply with Swedish legislations.\nRecurring payments\nCards support tokenization for one-click, subscription, and unscheduled card-on-file payments. Refer to Create tokens to integrate with our tokenization feature.\n\nWe strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. Being transparent about the payment schedule and the charged amount reduces the risk of chargebacks.\n\nStore card details\nWhen creating a token for cards:\n\nUse the standard tokenization parameters in your payment request. You do not need to include any additional parameters for cards.\n\n\n\n    \n\nWhen a token is created, you receive a  recurring.token.created webhook. The webhook contains the storedPaymentMethodId that you can use to make subsequent payments using the stored payment details.\nShow stored cards\n\n\nIn your  \/paymentMethods\u00a0request, include the  shopperReference that you specified when creating the token to receive the stored payment details for the shopper.\nThe  \/paymentMethods response includes a storedPaymentMethods array containing the stored payment methods for this shopper. The storedPaymentMethods array contains the id that you need when making a payment.\n         {\n         ...\n         \"storedPaymentMethods\":[\n             {\n                \"brand\":\"visa\",\n                \"expiryMonth\":\"10\",\n                \"expiryYear\":\"2020\",\n                \"holderName\":\"John Smith\",\n                \"id\":\"8415718415172204\",\n                \"lastFour\":\"1111\",\n                \"name\":\"VISA\",\n                \"supportedShopperInteractions\":[\n                   \"Ecommerce\",\n                   \"ContAuth\"\n                ],\n                \"type\":\"scheme\"\n             }\n         ]\n         ...\n         }\n\n\nOn your checkout page, use the Custom Card Component to collect the following details from the shopper:\n\n\n\nCard details\nExample input\n\n\n\n\nThe security code (CVV \/ CVC)\n\"737\"\n\n\n\nWhen onSubmit callback is triggered and if state.isValid is true, get the encrypted values from state.data and pass these values to your server.\n\n\nMake a one-click payment\nMake a one-click payment using standard tokenization parameters. You do not need to include any additional parameters for cards.\n\n    \n\nMake a subscription payment\nMake a subscription payment using standard tokenization parameters. You do not need to include any additional parameters for cards.\n\n    \n\nMake an unscheduled card-on-file payment\nMake an unscheduled card-on-file payment using standard tokenization parameters. You do not need to include any additional parameters for cards.\n\n    \n\nCollecting additional data to detect fraud\n \nFor Web Drop-in\/Components integrations, you can optionally collect data to detect fraud outside of the checkout page, in addition to the data that you send when the shopper checks out. We recommend that you collect data about the shopper's activity on every page of your site.\n \nTo do this, add the following script to any of your web pages.\n\n    \n\nWhen the shopper checks out, the Custom Card Component sends all of the data collected by the script to Adyen. This includes the data from the checkout page as well as any data collected from other web pages that contain the script.\nTest and go live\nIf your client-side integration isn't ready, you can test API requests with encrypted card details by adding a test_ prefix to the test card details.\n\nv5.20.0 or later: Card input fields use JSON Web Encryption, so your test environment must be a secure context. Use either a local or https domain, and add it to your allowed origins.\n\nBefore making live card payments:\n\n\nTest your integration using our test card numbers. You can check the status of test payments in your\u00a0Customer Area\u00a0&gt;\u00a0Transactions\u00a0&gt;\u00a0Payments.\n\n\nAdd the cards that you want to accept in your live Customer Area.\n\n\nBefore you can start accepting card payments in the live environment, you need to assess your PCI DSS compliance and submit the required Self-Assessment Questionnaire A document. For more information, refer to PCI DSS compliance guide.\n\n\nSee also\n\n\n                    API-only integration guide\n                \n                    Tokenization\n                \n                    Webhooks\n                \n                    API Explorer\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Cards","lvl3":"API only with encrypted card data"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/cards","lvl3":"\/pt\/payment-methods\/cards\/custom-card-integration"},"levels":4,"category":"Payment method","category_color":"green","tags":["encrypted"]},"articleFiles":{"card-payment.js":"<p alt=\"\">card-payment.js<\/p>"}}
