{"title":"Headless integration","category":"default","creationDate":1562937840,"content":"<div class=\"additional-info-block output-inline\">\n<h5 class=\"article__heading additional-info-block__title\">Implementation examples<\/h5><div class=\"additional-info-block__body\"><p><img alt=\"\" src=\"\/images\/a\/1\/e\/2\/c\/a1e2c8f087730e8565e5073245582a9636238705-github-icon.png\" \/>&nbsp;&nbsp;<a href=\"https:\/\/github.com\/adyen-examples\/magento-headless-demo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">See our example integration on GitHub!<\/a><\/p><\/div><\/div>\n\n<p>On this page we provide Adyen-specific information for building a Progressive Web Application (PWA) storefront. The PWA storefront works with a headless Adobe Commerce back-end that has the Adyen plugin installed and configured.<\/p>\n<p>You can use one of the following web APIs to get Adyen functionalities in your Adobe Commerce headless implementation:<\/p>\n<ul>\n<li><strong>REST<\/strong>: The most widely used web API. This method allows you to access all the functionalities provided by the Adyen plugin.<\/li>\n<li><strong>GraphQL<\/strong>: <div data-component-wrapper=\"tag\">\n    <tag :variant=&quot;warning&quot;>\n        Requires plugin v8.2.0 or later\n    <\/tag>\n<\/div>\nThe Adyen plugin utilizes the <code>\/graphql<\/code> endpoint exposed by the Adobe Commerce back-end, and adds functionality that is related to the plugin. You can access all functionalities provided by the Adyen plugin with this method. For more information, checkout the <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/graphql\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce GraphQL documentation<\/a>.<\/li>\n<\/ul>\n<h2 id=\"checkout-flow\">Ecommerce checkout flow<\/h2>\n<div class=\"additional-info-block output-inline\">\n<h5 class=\"article__heading additional-info-block__title\">Postman<\/h5><div class=\"additional-info-block__body\"><p><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/docs\/05.plugins\/04.adobe-commerce\/08.headless-integration\/postman-icon.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp; See the API flows for a guest shopper on Postman<ul><li markdown=\"1\"><a href=\"https:\/\/www.postman.com\/adyendev\/adyen-flows\/flow\/669e40799441740032f40154\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">REST API<\/a><\/li><li markdown=\"1\"><a href=\"https:\/\/www.postman.com\/adyendev\/adyen-flows\/flow\/66b665d5cafbb0003264bef9\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">GraphQL<\/a><\/li><\/ul><\/p><\/div><\/div>\n\n<p>With a headless Adobe Commerce back end, you build your own payment form for the Adobe Commerce PWA storefront. In the checkout flow, data passes from the PWA storefront through the Adobe Commerce back end to the Adyen API. Then, data passes back from the Adyen API through the Adobe Commerce back end to the PWA storefront. In the checkout flow, you need to do the following steps:<\/p>\n<ol>\n<li><a href=\"#get-payment-methods\">Get the payment methods<\/a> that are available on the Adyen platform, and for each of them determine the data that you need to collect.<\/li>\n<li><a href=\"#collect-shopper-details\">Collect shopper details<\/a> by presenting the payment methods on your payment form. Then, when the shopper selects a payment method, present the fields to fill out or the options to choose from, and collect these details.<\/li>\n<li><a href=\"#place-order\">Place the order<\/a>.<\/li>\n<li><a href=\"#payment-status\">Check the payment status<\/a> to see if you need to perform any extra steps before redirecting the user to the success page or showing an error message.<\/li>\n<li><a href=\"#handle-additional-actions\">Handle additional actions<\/a> like redirecting the customer to the issue page for additional authentication,  or presenting a QR code to complete the payment. If the payment fails, the following attempts will need to handle the additional actions as well<\/li>\n<\/ol>\n<h2>Requirements<\/h2>\n<p>Before you start integrating a Adobe Commerce PWA storefront with the Adyen platform:<\/p>\n<ol>\n<li>\n<p>Make sure that you have completed the steps to configure the Adobe Commerce back end:<\/p>\n<ul>\n<li><a href=\"\/pt\/plugins\/adobe-commerce\/set-up-adyen-customer-area\">Set up the Adyen Customer Area<\/a>.<\/li>\n<li><a href=\"\/pt\/plugins\/adobe-commerce\/set-up-the-plugin-in-adobe-commerce\">Set up the plugin in Adobe Commerce<\/a>.<\/li>\n<li><a href=\"\/pt\/plugins\/adobe-commerce\/set-up-the-payment-methods-in-adobe-commerce\">Set up the payment methods in Adobe Commerce<\/a>.<\/li>\n<li><a href=\"\/pt\/plugins\/adobe-commerce\/set-up-the-payment-methods-in-adobe-commerce#configure-headless-integration\">Configured headless integration settings in Adobe Commerce<\/a>.<\/li>\n<li><a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow\/?platform=Web&amp;integration=Components\">Get familiar with the front end components implementation<\/a>. We suggest using the components to gather the payment related information in a secure way.<\/li>\n<\/ul>\n<p>Setting up in-person payments is not required for a PWA storefront.<\/p>\n<\/li>\n<li>\n<p>The plugin uses <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/get-started\/authentication\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce\u2019s recommended authentication methods<\/a> to authenticate requests coming from the front-end application. The endpoints use <code>self<\/code> resources for logged-in shoppers and <code>anonymous<\/code> resources for guest shoppers.<br \/>\nTherefore, an <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/get-started\/authentication\/gs-authentication-token\/#integration-tokens\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">integration token<\/a> is no longer required. Customer token needs to be used as <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/get-started\/authentication\/#token-based-bearer-authentication\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>Bearer Token<\/code>\n<\/a> for logged-in shoppers. For guest shoppers, no token is required because a masked <code>card_id<\/code> is used to authenticate requests.<\/p>\n<\/li>\n<\/ol>\n<div class=\"notices green\">\n<p>For more information on resource access, refer to <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/get-started\/authentication\/gs-authentication-session\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce documentation<\/a>.<\/p>\n<\/div>\n<h2 id=\"get-payment-methods\">Step 1: Get available payment methods<\/h2>\n<p>In this step, the Adobe Commerce back end retrieves the available payment methods from 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> API endpoint and adds some extra information that you will need for rendering the components on the front end.<\/p>\n<p>To get the available payment methods and extra information:<\/p>\n<ol>\n<li><a href=\"#make-api-request\">Make an API request<\/a> to get the payment methods and data that you need to collect.<\/li>\n<li><a href=\"#parse-the-api-response\">Parse the API response<\/a> to get a JSON object that contains the Adyen <code>\/paymentMethods<\/code> response and required extra information.<\/li>\n<\/ol>\n<h3 id=\"make-api-request\">1. Make an API request<\/h3>\n<p>If you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is <code>\/graphql<\/code>.<\/p>\n\n<div id=\"tabVuKtN\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;REST&quot;,&quot;content&quot;:&quot;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;Guest shoppers (not logged-in)&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;GET &lt;a href=\\&quot;https:\\\/\\\/adobe-commerce.redoc.ly\\\/2.4.6-admin\\\/tag\\\/guest-cartscartIdpayment-information#operation\\\/GetV1GuestcartsCartIdPaymentinformation\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;\\\/V1\\\/guest-carts\\\/{cartId}\\\/payment-information&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;br \\\/&gt;\\nAlternatively,&lt;\\\/li&gt;\\n&lt;li&gt;POST &lt;a href=\\&quot;https:\\\/\\\/adobe-commerce.redoc.ly\\\/2.4.6-admin\\\/tag\\\/guest-cartscartIdshipping-information#operation\\\/PostV1GuestcartsCartIdShippinginformation\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;\\\/V1\\\/guest-carts\\\/{cartId}\\\/shipping-information&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Logged-in shoppers&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;GET &lt;a href=\\&quot;https:\\\/\\\/adobe-commerce.redoc.ly\\\/2.4.6-admin\\\/tag\\\/cartsminepayment-information#operation\\\/GetV1CartsMinePaymentinformation\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;\\\/V1\\\/carts\\\/mine\\\/payment-information&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;br \\\/&gt;\\nAlternatively,&lt;\\\/li&gt;\\n&lt;li&gt;POST &lt;a href=\\&quot;https:\\\/\\\/adobe-commerce.redoc.ly\\\/2.4.6-admin\\\/tag\\\/cartsmineshipping-information#operation\\\/PostV1CartsMineShippinginformation\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;\\\/V1\\\/carts\\\/mine\\\/shipping-information&lt;\\\/code&gt;\\n&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; and &lt;code&gt;\\\/shipping-information&lt;\\\/code&gt; responses include &lt;code&gt;extension_attributes&lt;\\\/code&gt;. This field contains available payment methods and required extra information as &lt;code&gt;adyen_payment_methods_response&lt;\\\/code&gt;. The required extra information is relevant when &lt;a href=\\&quot;#collect-shopper-details\\&quot;&gt;collecting shopper details in Step 2&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The &lt;code&gt;payment_methods&lt;\\\/code&gt; object in the response of &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; or &lt;code&gt;\\\/shipping-information&lt;\\\/code&gt; endpoints is filtered and sorted according to the response of  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/paymentMethods\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/paymentMethods&lt;\\\/a&gt; endpoint.&lt;\\\/p&gt;\\n&quot;,&quot;altTitle&quot;:&quot;rest&quot;,&quot;oldTabId&quot;:&quot;rest1_1&quot;,&quot;relation&quot;:&quot;rest&quot;},{&quot;title&quot;:&quot;GraphQL&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Pass the following parameters in the request to retrieve payment methods for logged-in and guest shoppers:&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;Required&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;cart_id&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Your reference to the shopper&#039;s cart. See &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/graphql\\\/schema\\\/cart\\\/queries\\\/cart\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;cart query in Adobe&lt;\\\/a&gt; for more information.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;shopper_locale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The combination of a language code and a country code to specify the language to be used in the payment. For example, &lt;strong&gt;en_GB&lt;\\\/strong&gt;. This parameter overrides the default locale set in the store settings.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The request calls the &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/51216d2b56049c8f0b8c7f2faaa51e3172067c29\\\/Model\\\/Api\\\/AdyenPaymentMethodManagement.php#L27\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;getPaymentMethods&lt;\\\/code&gt;\\n&lt;\\\/a&gt; method, which then makes a POST request to the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/paymentMethods\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/paymentMethods&lt;\\\/a&gt; endpoint.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-graphql\\&quot;&gt;query getAdyenPaymentMethods($cartId: String!, $shopperLocale: String) {\\n    adyenPaymentMethods(cart_id: $cartId, shopper_locale: $shopperLocale) {\\n        paymentMethodsExtraDetails {\\n            type\\n            icon {\\n                url\\n                width\\n                height\\n            }\\n            isOpenInvoice\\n            configuration {\\n                amount {\\n                    value\\n                    currency\\n                }\\n                currency\\n            }\\n        }\\n        paymentMethodsResponse {\\n            paymentMethods {\\n                name\\n                type\\n                brand\\n                brands\\n                configuration {\\n                    merchantId\\n                    merchantName\\n                }\\n            }\\n        }\\n    }\\n}&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&quot;,&quot;altTitle&quot;:&quot;graphql&quot;,&quot;oldTabId&quot;:&quot;graphql1_2&quot;,&quot;relation&quot;:&quot;graphql&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h3 id=\"parse-the-api-response\">2. Parse the API response<\/h3>\n<p>The Adobe Commerce back end receives a response from Adyen containing all available payment methods for the current session filtered by currency, amount, country\/region, etc. For each payment method, 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:<\/p>\n<ul>\n<li><code>name<\/code>: Name of the payment method, which you can show to your shopper in your payments form.<\/li>\n<li><code>type<\/code>: Unique payment method code. Pass this back to indicate the shopper's selected payment method when you <a href=\"#place-order\">place an order<\/a>.<\/li>\n<\/ul>\n<p>The plugin also collects some extra information other than the <code>\/paymentMethods<\/code> response. This data is included in the response as the following fields:<\/p>\n<ul>\n<li><code>icon {url, width, height}<\/code>: Payment method icon details.<\/li>\n<li><code>configuration<\/code>: Includes any extra payment method specific configuration that the checkout component should get on the front end which is not accessible from the <code>\/paymentMethods<\/code> details response.<\/li>\n<li><code>isOpenInvoice<\/code> (boolean): Indicates if the payment method is an open invoice payment method. Note that this field is deprecated and will be removed later.<\/li>\n<\/ul>\n<p>The following is an example API response for the REST flow, a GraphQL query retrieves data similarly to a REST GET request. To learn more about the similarities and differences between REST and GraphQL, refer to <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/graphql\/usage\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce GraphQL documentation<\/a>.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example API response'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n  \\\"payment_methods\\\": [\\n    ...\\n    {\\n      \\\"code\\\": \\\"adyen_cc\\\",\\n      \\\"title\\\": \\\"Credit Card\\\"\\n    },\\n    {\\n      \\\"code\\\": \\\"adyen_ideal\\\",\\n      \\\"title\\\": \\\"iDeal\\\"\\n    },\\n    {\\n      \\\"code\\\": \\\"adyen_googlepay\\\",\\n      \\\"title\\\": \\\"Google Pay\\\"\\n    },\\n    ...\\n  ],\\n  \\\"totals\\\": { ... },\\n  \\\"extension_attributes\\\": {\\n    \\\"adyen_payment_methods_response\\\": \\\"{\\\\\\\"paymentMethodsResponse\\\\\\\":{\\\\\\\"paymentMethods\\\\\\\":[{\\\\\\\"details\\\\\\\":[{\\\\\\\"items\\\\\\\":[{\\\\\\\"id\\\\\\\":\\\\\\\"1121\\\\\\\",\\\\\\\"name\\\\\\\":\\\\\\\"Test Issuer\\\\\\\"},{\\\\\\\"id\\\\\\\":\\\\\\\"1154\\\\\\\",\\\\\\\"name\\\\\\\":\\\\\\\"Test Issuer 5\\\\\\\"},{\\\\\\\"id\\\\\\\":\\\\\\\"1153\\\\\\\",\\\\\\\"name\\\\\\\":\\\\\\\"Test Issuer 4\\\\\\\"},{\\\\\\\"id\\\\\\\":\\\\\\\"1152\\\\\\\",\\\\\\\"name\\\\\\\":\\\\\\\"Test Issuer 3\\\\\\\"},{\\\\\\\"id\\\\\\\":\\\\\\\"1151\\\\\\\",\\\\\\\"name\\\\\\\":\\\\\\\"Test Issuer 2\\\\\\\"},{\\\\\\\"id\\\\\\\":\\\\\\\"1162\\\\\\\",\\\\\\\"name\\\\\\\":\\\\\\\"Test Issuer Cancelled\\\\\\\"},{\\\\\\\"id\\\\\\\":\\\\\\\"1161\\\\\\\",\\\\\\\"name\\\\\\\":\\\\ \\u2026\\\"\\n  }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<ul>\n<li>The response contains payment methods as a JSON encoded string. Parse this string to get a JSON object. For example, using <code>JSON.parse();<\/code>.<\/li>\n<\/ul>\n<p>After parsing the response, you get two root objects:<\/p>\n<ol>\n<li><code>paymentMethodsResponse<\/code>: Includes the full and unmodified response object from the Adyen <code>\/paymentMethods<\/code> API endpoint.<\/li>\n<li><code>paymentMethodsExtraDetails<\/code>: Holds the extra information that the plugin gathered for each payment method that is available in the <code>paymentMethodsResponse<\/code>.<\/li>\n<\/ol>\n<div class=\"accordion-shortcode adl-accordion adl-accordion--max-height-transition\" data-expand=\"true\" data-ignore=\"anchorjs-link\">\n    \n    <div class=\"adl-accordion__item\" style=\"\">\n        <div tabindex=\"0\" role=\"item\" aria-expanded=\"false\" class=\"adl-accordion__header\">\n            <i class=\"adl-accordion__toggle adl-icon-chevron-down\"><\/i>\n            <div class=\"adl-accordion__title-wrapper\" data-accordion=\"#example-response-after-parsing\">\n                                    <h4 class=\"adl-accordion__title\">Example response after parsing<\/h4>\n                            <\/div>\n        <\/div>\n        <div role=\"region\" class=\"adl-accordion__content\">\n            \n<pre><code class=\"language-json\">{\n    \"paymentMethodsExtraDetails\": {\n        \"applepay\": {\n            \"icon\": {\n                \"url\": \"full url for icon\",\n                \"width\": 1,\n                \"height\": 1\n            },\n            \"configuration\": {\n                \"amount\": {\n                    \"value\": 1,\n                    \"currency\": \"currency ISO code like EUR\"\n                }\n            }\n        },\n        \"klarna\": {...},\n        \"ideal\": {...},\n        \"klarna_paynow\": {...}\n    },\n    \"paymentMethodsResponse\": {\n        \"paymentMethods\": [\n            {\n                \"name\": \"iDEAL\",\n                \"type\": \"ideal\"\n            },\n            {\n                \"brands\": [\n                    \"mc\",\n                    \"visa\",\n                    \"maestro\"\n                ],\n                \"name\": \"Cards\",\n                \"type\": \"scheme\"\n            },\n            {\n                \"configuration\": {\n                    \"intent\": \"capture\",\n                    \"merchantId\": \"Merchant id\"\n                },\n                \"name\": \"PayPal\",\n                \"type\": \"paypal\"\n            },\n            {\n                \"name\": \"Pay later with Klarna.\",\n                \"type\": \"klarna\"\n            },\n            {\n                \"name\": \"SEPA Direct Debit\",\n                \"type\": \"sepadirectdebit\"\n            },\n            {\n                \"configuration\": {\n                    \"merchantId\": \"Merchant id\",\n                    \"merchantName\": \"Merchant name\"\n                },\n                \"name\": \"Apple Pay\",\n                \"type\": \"applepay\"\n            }\n        ]\n    }\n}<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h2 id=\"collect-shopper-details\">Step 2: Collect shopper details<\/h2>\n<p>Next, present the available payment methods on your front end, and collect the shopper details that are required for the payment method selected by the shopper.<\/p>\n<ol>\n<li>\n<p>Use the <code>name<\/code> values from 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 show all available payment methods to your shopper.<\/p>\n<div class=\"sc-notice info\"><div>\n<p>If you need payment methods and issuer logos for your payment form, use the <code>paymentMethodsExtraDetails.icon<\/code> from the <code>\/payment-information<\/code> response as described in the previous step.<\/p>\n<\/div><\/div>\n<\/li>\n<li>\n<p>After the shopper selects a payment method, render the input fields to get the required payment details. You can do this by <a href=\"#render-with-components\">rendering the input fields with Adyen Components<\/a>.<\/p>\n<\/li>\n<\/ol>\n<h3 id=\"render-with-components\">Render the input fields with Adyen Components<\/h3>\n<p>You can use our <a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow?platform=Web&amp;integration=Components\">Web Components<\/a> to render individual payment methods anywhere on your website with our customizable UI components.<\/p>\n<p>We recommend to pass the full <code>paymentMethodsResponse<\/code> object to the Web Component configuration when implementing multiple payment methods in your PWA storefront. <a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow?platform=Web&amp;integration=Components#add\">After creating the new <code>AdyenCheckout<\/code> object<\/a>, you can loop through the methods and generate the components instead of creating components manually for each payment method. This also ensures that your integration can handle new payment methods when enabled in your Customer Area.<\/p>\n<h2 id=\"place-order\">Step 3: Place the order<\/h2>\n<p>After the customer has filled in their data, you can place the order. In this step, the storefront makes a request to the Adobe Commerce back end which then makes a payment request to 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> endpoint.<\/p>\n<p>To start the payment process, place the order from your front end in the way the default Adobe Commerce checkout flow requires:<\/p>\n<ol>\n<li><a href=\"#create-a-data-object\">Create a data object<\/a> to send in the Adobe Commerce API request.<\/li>\n<li><a href=\"#place-an-order\">Place the order<\/a> with the created object.<\/li>\n<\/ol>\n<h3 id=\"create-a-data-object\">1. Create a data object<\/h3>\n\n<div id=\"tab4iKwA\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;REST&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;First, create a data object that you can send in the &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/rest\\\/quick-reference\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Adobe Commerce 2 REST API&lt;\\\/a&gt; &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; request.&lt;\\\/p&gt;\\n&lt;p&gt;To get the necessary details for this object, you can do either of the two:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;Use &lt;code&gt;state.data&lt;\\\/code&gt; from the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/advanced-flow?platform=Web&amp;amp;integration=Components\\&quot;&gt;Web component&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Replicate the request object based on the documentation for the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments&lt;\\\/a&gt; endpoint, with 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;Required&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;method&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Payment method name in Adobe Commerce. For example, &lt;code&gt;adyen_cc&lt;\\\/code&gt;, &lt;code&gt;adyen_ideal&lt;\\\/code&gt;, or &lt;code&gt;adyen_googlepay&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;cc_type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;If &lt;code&gt;method&lt;\\\/code&gt; is &lt;code&gt;adyen_cc&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Card type. &lt;br&gt; Get the card type available in Adobe Commerce based on the &lt;code&gt;state.data.paymentMethod.brand&lt;\\\/code&gt; or &lt;code&gt;state.brand&lt;\\\/code&gt;. See &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/master\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L356-L362\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;example&lt;\\\/a&gt;. &lt;br&gt; If you implement the &lt;code&gt;onBrand&lt;\\\/code&gt; callback for the Web Component, then you can find it as &lt;code&gt;state.brand&lt;\\\/code&gt;. See &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/master\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L133-L137\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;example&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;brand_code&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;Only for v9&lt;\\\/strong&gt; &lt;br&gt;  If &lt;code&gt;method&lt;\\\/code&gt; is an alternative payment method&lt;\\\/td&gt;\\n&lt;td&gt;The value of &lt;code&gt;state.data.paymentMethod.type&lt;\\\/code&gt; field.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;recurringProcessingModel&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-x-\\&quot; alt=\\&quot;-x-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/x.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The recurring processing model for the request, overwrites the default value in the plugin configuration. Set to &lt;strong&gt;Subscription&lt;\\\/strong&gt;, &lt;strong&gt;CardOnFile&lt;\\\/strong&gt;, &lt;strong&gt;UnscheduledCardOnFile&lt;\\\/strong&gt; depending on the &lt;a href=\\&quot;https:\\\/\\\/help.adyen.com\\\/knowledge\\\/ecommerce-integrations\\\/tokenization\\\/how-to-choose-recurring-processing-model\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;recurring payment type&lt;\\\/a&gt; you are making the request for.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;stateData&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Use the &lt;code&gt;JSON.stringify()&lt;\\\/code&gt; function on the &lt;code&gt;state.data&lt;\\\/code&gt; object that you get from the Web Component. See &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/master\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L244-264\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;example&lt;\\\/a&gt;. &lt;br&gt; The &lt;code&gt;state.data&lt;\\\/code&gt; object can be &lt;a href=\\&quot;\\\/pt\\\/plugins\\\/adobe-commerce\\\/headless-integration#setting-the-payment-state-data-in-a-separate-request\\&quot;&gt;set in a separate request&lt;\\\/a&gt; to accommodate special checkout flows.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;When replicating the object for a card payment method, follow this structure:&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example data object for a card payment method&#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;method\\\\\\&quot;: \\\\\\&quot;adyen_cc\\\\\\&quot;,\\\\n    \\\\\\&quot;additional_data\\\\\\&quot;: {\\\\n        \\\\\\&quot;cc_type\\\\\\&quot;: \\\\\\&quot;MC\\\\\\&quot;,\\\\n        \\\\\\&quot;recurringProcessingModel\\\\\\&quot;: \\\\\\&quot;Subscription\\\\\\&quot;,\\\\n        \\\\\\&quot;stateData\\\\\\&quot;: \\\\\\&quot;{\\\\\\\\\\\\\\&quot;riskData\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;clientData\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;eyJ2ZXJz...\\\\\\\\\\\\\\&quot;},\\\\\\\\\\\\\\&quot;paymentMethod\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;type\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;scheme\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;holderName\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;Holder name\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;encryptedCardNumber\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;adyenjs_0_1_25...\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;encryptedExpiryYear\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;adyenjs_0_1_25...\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;encryptedSecurityCode\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;adyenjs_0_1_25...\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;brand\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;mc\\\\\\\\\\\\\\&quot;},\\\\\\\\\\\\\\&quot;browserInfo\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;acceptHeader\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;*\\\\\\\/*\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;colorDepth\\\\\\\\\\\\\\&quot;:30,\\\\\\\\\\\\\\&quot;language\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;en-US\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;javaEnabled\\\\\\\\\\\\\\&quot;:false,\\\\\\\\\\\\\\&quot;screenHeight\\\\\\\\\\\\\\&quot;:900,\\\\\\\\\\\\\\&quot;screenWidth\\\\\\\\\\\\\\&quot;:1440,\\\\\\\\\\\\\\&quot;userAgent\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;Mozilla\\\\\\\/5.0 (Macintosh; Intel Mac OS X)\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;timeZoneOffset\\\\\\\\\\\\\\&quot;:-120},\\\\\\\\\\\\\\&quot;clientStateDataIndicator\\\\\\\\\\\\\\&quot;:true}\\\\\\\\\\\\\\&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;ul&gt;\\n&lt;li&gt;When replicating the object for an alternative payment method, follow this structure:&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example data object for an alternative payment method&#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;method\\\\\\&quot;: \\\\\\&quot;adyen_ideal\\\\\\&quot;,\\\\n    \\\\\\&quot;additional_data\\\\\\&quot;: {\\\\n        \\\\\\&quot;recurringProcessingModel\\\\\\&quot;: \\\\\\&quot;Subscription\\\\\\&quot;,\\\\n        \\\\\\&quot;stateData\\\\\\&quot;: \\\\\\&quot;{\\\\\\\\\\\\\\&quot;riskData\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;clientData\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;eyJ2ZXJz...\\\\\\\\\\\\\\&quot;},\\\\\\\\\\\\\\&quot;paymentMethod\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;type\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;ideal\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;issuer\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;1121\\\\\\\\\\\\\\&quot;},\\\\\\\\\\\\\\&quot;clientStateDataIndicator\\\\\\\\\\\\\\&quot;:true}\\\\\\&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&quot;,&quot;altTitle&quot;:&quot;rest&quot;,&quot;oldTabId&quot;:&quot;rest2_1&quot;,&quot;relation&quot;:&quot;rest&quot;},{&quot;title&quot;:&quot;GraphQL&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;To place an order using GraphQL, use the &lt;code&gt;placeAdyenOrder&lt;\\\/code&gt; mutation. This mutation is a combination of the &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/graphql\\\/schema\\\/cart\\\/mutations\\\/set-payment-method\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;setPaymentMethodOnCart&lt;\\\/code&gt;\\n&lt;\\\/a&gt; and &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/graphql\\\/schema\\\/cart\\\/mutations\\\/place-order\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;placeOrder&lt;\\\/code&gt;\\n&lt;\\\/a&gt; mutations.&lt;\\\/p&gt;\\n&lt;p&gt;First, create a data object to send in the &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/graphql\\\/schema\\\/cart\\\/mutations\\\/set-payment-method\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;\\n  &lt;code&gt;setPaymentMethodOnCart&lt;\\\/code&gt;\\n&lt;\\\/a&gt; mutation.&lt;\\\/p&gt;\\n&lt;p&gt;To get the necessary details for this object, you can do either of the two:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;Use &lt;code&gt;state.data&lt;\\\/code&gt; from the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/advanced-flow?platform=Web&amp;amp;integration=Components\\&quot;&gt;Web component&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Replicate the request object based on the documentation for the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments&lt;\\\/a&gt; endpoint, with 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;Required&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;code&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Payment method name in Adobe Commerce. For example, &lt;code&gt;adyen_cc&lt;\\\/code&gt;, &lt;code&gt;adyen_ideal&lt;\\\/code&gt;, or &lt;code&gt;adyen_googlepay&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;cc_type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;If &lt;code&gt;method&lt;\\\/code&gt; is &lt;code&gt;adyen_cc&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Card type. &lt;br&gt; Get the card type available in Adobe Commerce based on the &lt;code&gt;state.data.paymentMethod.brand&lt;\\\/code&gt; or &lt;code&gt;state.brand&lt;\\\/code&gt;. See &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/master\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L356-L362\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;example&lt;\\\/a&gt;. &lt;br&gt; If you implement the &lt;code&gt;onBrand&lt;\\\/code&gt; callback for the Web Component, then you can find it as &lt;code&gt;state.brand&lt;\\\/code&gt;. See &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/master\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L133-L137\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;example&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;brand_code&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;Only for v9&lt;\\\/strong&gt; &lt;br&gt; If &lt;code&gt;method&lt;\\\/code&gt; is an alternative payment method&lt;\\\/td&gt;\\n&lt;td&gt;The value of &lt;code&gt;state.data.paymentMethod.type&lt;\\\/code&gt; field.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;recurringProcessingModel&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-x-\\&quot; alt=\\&quot;-x-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/x.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The recurring processing model for the request, overwrites the default value in the plugin configuration. Set to &lt;strong&gt;Subscription&lt;\\\/strong&gt;, &lt;strong&gt;CardOnFile&lt;\\\/strong&gt;, &lt;strong&gt;UnscheduledCardOnFile&lt;\\\/strong&gt; depending on the &lt;a href=\\&quot;https:\\\/\\\/help.adyen.com\\\/knowledge\\\/ecommerce-integrations\\\/tokenization\\\/how-to-choose-recurring-processing-model\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;recurring payment type&lt;\\\/a&gt; you are making the request for.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;stateData&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;JSON.stringify() the &lt;code&gt;state.data&lt;\\\/code&gt; object that you get from the Web Component. See &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/master\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L244-264\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;example&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;When replicating the object for a card payment method, follow this structure:&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example data object for a card payment method&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;graphql\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;setPaymentMethodOnCart(\\\\n    input: {\\\\n        cart_id: $cartId\\\\n        payment_method: {\\\\n            code: \\\\\\&quot;adyen_cc\\\\\\&quot;\\\\n            adyen_additional_data_cc: {\\\\n                cc_type: \\\\\\&quot;VI\\\\\\&quot;\\\\n                recurringProcessingModel: \\\\\\&quot;Subscription\\\\\\&quot;\\\\n                stateData: $stateData\\\\n            }\\\\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;ul&gt;\\n&lt;li&gt;When replicating the object for an alternative payment method, follow this structure:&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example data object for an alternative payment method&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;graphql\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;setPaymentMethodOnCart(\\\\n    input: {\\\\n        cart_id: $cartId\\\\n        payment_method: {\\\\n            code: \\\\\\&quot;adyen_ideal\\\\\\&quot;\\\\n            adyen_additional_data: {\\\\n                recurringProcessingModel: \\\\\\&quot;Subscription\\\\\\&quot;\\\\n                stateData: $stateData\\\\n            }\\\\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&quot;,&quot;altTitle&quot;:&quot;graphql&quot;,&quot;oldTabId&quot;:&quot;graphql2_2&quot;,&quot;relation&quot;:&quot;graphql&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h3 id=\"place-an-order\">2. Place an order<\/h3>\n\n<div id=\"tabLQTxv\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;REST&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Place the order with the &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; endpoint from the &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/rest\\\/quick-reference\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Adobe Commerce REST API&lt;\\\/a&gt;. Use the object created in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;If you cannot  use the &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; endpoint to set &lt;code&gt;state.data&lt;\\\/code&gt;, see &lt;a href=\\&quot;\\\/pt\\\/plugins\\\/adobe-commerce\\\/headless-integration#setting-the-payment-state-data-in-a-separate-request\\&quot;&gt;setting the payment &lt;code&gt;state.data&lt;\\\/code&gt; in a separate request&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Place the order with REST&#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;email\\\\\\&quot;: \\\\\\&quot;SHOPPER_EMAIL_ADDRESS\\\\\\&quot;,\\\\n    \\\\\\&quot;billingAddress\\\\\\&quot;: {\\\\n        \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Gravenhage\\\\\\&quot;,\\\\n        \\\\\\&quot;company\\\\\\&quot;: \\\\\\&quot;\\\\\\&quot;,\\\\n        \\\\\\&quot;countryId\\\\\\&quot;: \\\\\\&quot;NL\\\\\\&quot;,\\\\n        \\\\\\&quot;firstname\\\\\\&quot;: \\\\\\&quot;John Doe\\\\\\&quot;,\\\\n        \\\\\\&quot;lastname\\\\\\&quot;: \\\\\\&quot;Approved\\\\\\&quot;,\\\\n        \\\\\\&quot;postcode\\\\\\&quot;: \\\\\\&quot;2521VA\\\\\\&quot;,\\\\n        \\\\\\&quot;region\\\\\\&quot;: \\\\\\&quot;Netherlands\\\\\\&quot;,\\\\n        \\\\\\&quot;saveInAddressBook\\\\\\&quot;: null,\\\\n        \\\\\\&quot;street\\\\\\&quot;: [\\\\n            \\\\\\&quot;Neherkade 1 XI\\\\\\&quot;\\\\n        ],\\\\n        \\\\\\&quot;telephone\\\\\\&quot;: \\\\\\&quot;0612345678\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;paymentMethod\\\\\\&quot;: {\\\\n        \\\\\\&quot;method\\\\\\&quot;: \\\\\\&quot;adyen_ideal\\\\\\&quot;,\\\\n        \\\\\\&quot;additional_data\\\\\\&quot;: {\\\\n            \\\\\\&quot;stateData\\\\\\&quot;: \\\\\\&quot;{\\\\\\\\\\\\\\&quot;riskData\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;clientData\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;eyJ2ZXJz...\\\\\\\\\\\\\\&quot;},\\\\\\\\\\\\\\&quot;paymentMethod\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;type\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;ideal\\\\\\\\\\\\\\&quot;,\\\\\\\\\\\\\\&quot;issuer\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;1121\\\\\\\\\\\\\\&quot;},\\\\\\\\\\\\\\&quot;clientStateDataIndicator\\\\\\\\\\\\\\&quot;:true}\\\\\\&quot;\\\\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;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#setting-the-payment-state-data-in-a-separate-request\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Setting the payment `state.data` in a separate request&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Plugin v7.2.0 and later support setting the payment&#039;s &lt;code&gt;state.data&lt;\\\/code&gt; by using the &lt;code&gt;\\\/V1\\\/adyen\\\/carts\\\/mine\\\/state-data&lt;\\\/code&gt; or &lt;code&gt;\\\/V1\\\/adyen\\\/guest-carts\\\/:cartId\\\/state-data&lt;\\\/code&gt; endpoint. This is useful for checkout flows where this information cannot be sent using the &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; &lt;a href=\\&quot;https:\\\/\\\/developer.adobe.com\\\/commerce\\\/webapi\\\/rest\\\/quick-reference\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Adobe Commerce REST API endpoint&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The &lt;code&gt;\\\/state-data&lt;\\\/code&gt; endpoint receives 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;strong&gt;state_data&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;state.data&lt;\\\/code&gt; from the Web Component.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;quote_id&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The ID of the Adobe Commerce quote related to &lt;code&gt;state.data&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;&lt;code&gt;state.data&lt;\\\/code&gt; saved with this endpoint is used in the payment request if no &lt;code&gt;state.data&lt;\\\/code&gt; was supplied in the &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; request.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices yellow\\&quot;&gt;\\n&lt;p&gt;Using this endpoint will persist payment data which can be useful for complex checkout flows, but could have implications for your integration&#039;s PCI scope. Reach out to our Support team for questions.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&quot;,&quot;altTitle&quot;:&quot;rest&quot;,&quot;oldTabId&quot;:&quot;rest3_1&quot;,&quot;relation&quot;:&quot;rest&quot;},{&quot;title&quot;:&quot;GraphQL&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Place the order using the &lt;code&gt;placeAdyenOrder&lt;\\\/code&gt; mutation. Use the &lt;code&gt;setPaymentMethodOnCart&lt;\\\/code&gt; object created in the previous step.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Place the order with GraphQL&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;graphql\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;mutation placeAdyenOrder(\\\\n   $cartId: String!\\\\n   $stateData: String!\\\\n) {\\\\n   setPaymentMethodOnCart(\\\\n       input: {\\\\n           cart_id: $cartId\\\\n           payment_method: {\\\\n               code: \\\\\\&quot;adyen_ideal\\\\\\&quot;\\\\n               adyen_additional_data: {\\\\n                   stateData: $stateData\\\\n               }\\\\n           }\\\\n       }\\\\n   ) {\\\\n       cart {\\\\n           selected_payment_method {\\\\n               code\\\\n               title\\\\n           }\\\\n       }\\\\n   }\\\\n\\\\n   placeOrder(\\\\n       input: {\\\\n           cart_id: $cartId\\\\n       }\\\\n   ) {\\\\n       order {\\\\n           order_number\\\\n           cart_id\\\\n           adyen_payment_status {\\\\n               isFinal\\\\n               resultCode\\\\n               additionalData\\\\n               action\\\\n           }\\\\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&quot;,&quot;altTitle&quot;:&quot;graphql&quot;,&quot;oldTabId&quot;:&quot;graphql3_2&quot;,&quot;relation&quot;:&quot;graphql&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<p>For more information, refer to the <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/rest\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce API documentation<\/a>.<\/p>\n<p>The response contains the <code>orderId<\/code> field with an integer value that you need for the next step.<\/p>\n<h2 id=\"payment-status\">Step 4: Check payment status<\/h2>\n<p>To see if there are any additional steps required after placing the order, call the payment status endpoint:<\/p>\n\n<div id=\"tab54jRV\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;REST&quot;,&quot;content&quot;:&quot;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Make a POST request:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;For logged-in shoppers, use the &lt;code&gt;\\\/V1\\\/adyen\\\/orders\\\/carts\\\/mine\\\/payment-status&lt;\\\/code&gt; endpoint.&lt;\\\/li&gt;\\n&lt;li&gt;For guest shoppers, use the &lt;code&gt;\\\/V1\\\/adyen\\\/orders\\\/guest-carts\\\/{cartId}\\\/payment-status&lt;\\\/code&gt; endpoint.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;In the request body, include &lt;code&gt;orderId&lt;\\\/code&gt; that you received in the response from the &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; endpoint in the previous step. See an example from our plugin&#039;s &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/5d6b157887eb3c4c810cad882d1c17b356309e23\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L280\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;credit card method renderer&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;rest&quot;,&quot;oldTabId&quot;:&quot;rest4_1&quot;,&quot;relation&quot;:&quot;rest&quot;},{&quot;title&quot;:&quot;GraphQL&quot;,&quot;content&quot;:&quot;\\n&lt;ol&gt;\\n&lt;li&gt;Call an &lt;code&gt;adyenPaymentStatus&lt;\\\/code&gt; query. In the URL, use the &lt;code&gt;orderId&lt;\\\/code&gt; that you received in the response from the &lt;code&gt;\\\/payment-information&lt;\\\/code&gt; endpoint in the previous step. See an example from our plugin&#039;s &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-magento2\\\/blob\\\/5d6b157887eb3c4c810cad882d1c17b356309e23\\\/view\\\/frontend\\\/web\\\/js\\\/view\\\/payment\\\/method-renderer\\\/adyen-cc-method.js#L280\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;credit card method renderer&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-graphql\\&quot;&gt;query getAdyenPaymentStatus($orderNumber: String!, $cartId: String!) {\\n    adyenPaymentStatus(orderNumber: $orderNumber, cartId: $cartId) { \\\/\\\/ $orderNumber is the order increment Id.\\n        isFinal\\n        resultCode\\n        additionalData\\n        action\\n    }\\n}&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&quot;,&quot;altTitle&quot;:&quot;graphql&quot;,&quot;oldTabId&quot;:&quot;graphql4_2&quot;,&quot;relation&quot;:&quot;graphql&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<ol start=\"2\">\n<li>Parse the JSON response and evaluate it. There are two paths that you can follow based on the <code>isFinal<\/code> response field.\n<ul>\n<li>The <code>isFinal<\/code> field is <strong>true<\/strong>:\n<ul>\n<li>If the <code>resultCode<\/code> field is <strong>Authorised<\/strong> or <strong>Received<\/strong>, the payment was successful and you can redirect the customer to the success page.<\/li>\n<li>If the <code>resultCode<\/code> field is <strong>PresentToShopper<\/strong>, present the voucher or QR code to the shopper so they can complete the payment.<\/li>\n<li>If the <code>resultCode<\/code> field is <strong>Refused<\/strong>, <strong>Error<\/strong> or unhandled, you receive a response containing an HTTP <code>400<\/code>  result code and a default Adobe Commerce localized error response.<\/li>\n<li>If the <code>action<\/code> field is present and is not empty, then <a href=\"#handle-additional-actions\">handle the additional action using the Web Component<\/a>.<\/li>\n<\/ul><\/li>\n<li>The <code>isFinal<\/code> field is <strong>false<\/strong>:\n<ul>\n<li>The <code>action<\/code> field is present and is not empty, then <a href=\"#handle-additional-actions\">handle the additional action using the Web Component<\/a>.<\/li>\n<\/ul><\/li>\n<\/ul><\/li>\n<\/ol>\n<h2 id=\"handle-additional-actions\">Step 5: Handle additional actions<\/h2>\n<div class=\"sc-notice note\"><div>\n<p>This step is only needed if the <code>action<\/code> field is present and not empty in the response of the previous step.<\/p>\n<\/div><\/div>\n<p>Some payment methods require additional action from the shopper. For example, to scan a QR code, to authenticate a payment with 3D Secure, or to log in to their bank's website to complete the payment. To handle these additional front-end actions, follow the <a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow\/?platform=Web&amp;integration=Components#additional-action\">Web Components documentation<\/a> or find specific documentation for each payment method in <a href=\"\/pt\/payment-methods\">this list<\/a>.<\/p>\n<div class=\"notices green\">\n<p>All payment methods use the <code>createFromAction<\/code> method, except for PayPal. The <a href=\"\/pt\/payment-methods\/paypal\/web-component?tab=_code_payments_code__2\">PayPal Component<\/a> uses the <code>handleAction<\/code> method to process additional action from the PayPal pop-up window.<\/p>\n<\/div>\n\n<div id=\"tabRMJNo\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;REST&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Create your request to handle the additional action with the following fields:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;payload&lt;\\\/code&gt;: JSON.stringify() the object that you get from the action component in the &lt;code&gt;state.data&lt;\\\/code&gt; field.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;orderId&lt;\\\/code&gt;: The &lt;code&gt;orderId&lt;\\\/code&gt; you received in the response when you &lt;a href=\\&quot;#place-an-order\\&quot;&gt;placed the order&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Handle additional actions&#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;payload\\\\\\&quot;: \\\\\\&quot;{\\\\\\\\\\\\\\&quot;details\\\\\\\\\\\\\\&quot;:{\\\\\\\\\\\\\\&quot;threeDSResult\\\\\\\\\\\\\\&quot;:\\\\\\\\\\\\\\&quot;eyJ0cmFuc1N...\\\\\\&quot;}}\\\\\\&quot;,\\\\n   \\\\\\&quot;orderId\\\\\\&quot;: \\\\\\&quot;175\\\\\\&quot;,\\\\n   \\\\\\&quot;cartId\\\\\\&quot;: \\\\\\&quot;r8Mktr...\\\\\\&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;h3&gt;Optional: Validate the &lt;code&gt;state.data&lt;\\\/code&gt; from the action component&lt;\\\/h3&gt;\\n&lt;p&gt;In case the shopper is already redirected to the success page, you do not need to validate anything because the Component presents a QR code or additional information to the customer, and no additional steps are required from you. Adyen is going to send a notification to your system as soon as the customer finishes the payment.&lt;\\\/p&gt;\\n&lt;p&gt;The plugin &lt;a href=\\&quot;\\\/pt\\\/plugins\\\/adobe-commerce\\\/set-up-the-plugin-in-adobe-commerce#step-2-run-cron\\&quot;&gt;handles webhooks&lt;\\\/a&gt; on its own.&lt;\\\/p&gt;\\n&lt;p&gt;In case the shopper is still in the checkout process, you need to perform additional checks of the &lt;code&gt;state.data&lt;\\\/code&gt; that you get back from the Component. To do this, implement the &lt;code&gt;onAdditionalDetails&lt;\\\/code&gt; callback when creating the new &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; component.&lt;\\\/p&gt;\\n&lt;p&gt;To validate the &lt;code&gt;state.data&lt;\\\/code&gt;:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Use the &lt;code&gt;\\\/V1\\\/adyen\\\/carts\\\/mine\\\/payments-details&lt;\\\/code&gt; endpoint for logged-in shoppers.&lt;\\\/li&gt;\\n&lt;li&gt;Use the &lt;code&gt;\\\/V1\\\/adyen\\\/guest-carts\\\/:cartId\\\/payments-details&lt;\\\/code&gt; endpoint for guest shoppers.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&quot;,&quot;altTitle&quot;:&quot;rest&quot;,&quot;oldTabId&quot;:&quot;rest5_1&quot;,&quot;relation&quot;:&quot;rest&quot;},{&quot;title&quot;:&quot;GraphQL&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Use the &lt;code&gt;getAdyenPaymentDetails&lt;\\\/code&gt; query to handle the additional actions.&lt;\\\/p&gt;\\n&lt;p&gt;Create your request to handle the additional action with the following fields:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;payload&lt;\\\/code&gt;: JSON.stringify() the object that you get from the action component in the &lt;code&gt;state.data&lt;\\\/code&gt; field.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;orderId&lt;\\\/code&gt;: The &lt;code&gt;orderId&lt;\\\/code&gt; you received in the response when you &lt;a href=\\&quot;#place-an-order\\&quot;&gt;placed the order&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Handle additional actions&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;graphql\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;mutation getAdyenPaymentDetails($payload: String!, $cartId: String!) {\\\\n    adyenPaymentDetails(payload:  $payload, cart_id: $cartId) {\\\\n        isFinal\\\\n        resultCode\\\\n        additionalData\\\\n        action\\\\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&quot;,&quot;altTitle&quot;:&quot;graphql&quot;,&quot;oldTabId&quot;:&quot;graphql5_2&quot;,&quot;relation&quot;:&quot;graphql&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"gift-card-payments\">Gift card payments<\/h2>\n<p>After you have followed the steps to <a href=\"#get-payment-methods\">get the available payment methods<\/a> and <a href=\"#collect-shopper-details\">present them in your front end<\/a>, you can offer your shoppers to pay with gift cards.<\/p>\n<p>For GraphQL integrations, the additional setup steps below are required to process gift card payments.<\/p>\n<h3>Step 1: Mount the component<\/h3>\n<p>After a shopper selects the option to pay with a gift card, mount the Adyen Web Component for gift cards and check the balance:<\/p>\n<ol>\n<li>Follow the steps to <a href=\"\/pt\/payment-methods\/gift-cards\/web-component\/?tab=config-payments_3#component-configuration\">configure the Component<\/a>.<br \/>\nWhen <a href=\"\/pt\/payment-methods\/gift-cards\/web-component\/?tab=config-payments_3#step-2-create-an-instance-of-the-component\">creating an instance of the Component<\/a>, in the <code>onBalanceCheck<\/code> event, call the <code>adyenPaymentMethodsBalance<\/code> GraphQL mutation that returns the available balance of a gift card.<\/li>\n<li>\n<p>Use the <code>JSON.stringify()<\/code> function on the <code>data<\/code> object you get from the event. This is the <code>payload<\/code> for the <code>adyenPaymentMethodsBalance<\/code> mutation.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example payload object to check balance'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"{\\\\\\\"paymentMethod\\\\\\\":{\\\\\\\"type\\\\\\\":\\\\\\\"giftcard\\\\\\\",\\\\\\\"brand\\\\\\\":\\\\\\\"svs\\\\\\\",\\\\\\\"encryptedCardNumber\\\\\\\":\\\\\\\"abc\\u2026\\\\\\\",\\\\\\\"encryptedSecurityCode\\\\\\\":\\\\\\\"xyz\\u2026\\\\\\\"},\\\\\\\"amount\\\\\\\":{\\\\\\\"currency\\\\\\\":\\\\\\\"EUR\\\\\\\",\\\\\\\"value\\\\\\\":1000}}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p><br><\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'GraphQL mutation to check the balance of a gift card'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"query adyenPaymentMethodsBalance ($payload: String!) {\\n   adyenPaymentMethodsBalance (payload: $payload) {\\n       balanceResponse\\n   }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>This mutation returns the balance of a gift card, and additional details like the currency and value. For example:<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Gift card balance response'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"{\\n\\\"data\\\": {\\n    \\\"adyenPaymentMethodsBalance\\\": {\\n        \\\"balanceResponse\\\": \\\"{\\\\\\\"pspReference\\\\\\\":\\\\\\\"GB573LDWSBFWFL65\\\\\\\",\\\\\\\"resultCode\\\\\\\":\\\\\\\"Success\\\\\\\",\\\\\\\"balance\\\\\\\":{\\\\\\\"currency\\\\\\\":\\\\\\\"EUR\\\\\\\",\\\\\\\"value\\\\\\\":5000}}\\\"\\n    }\\n}\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h3 id=\"save-gift-card-state-data\">Step 2: Save gift card state data<\/h3>\n<p>To redeem gift cards when making a payment, save the state data associated with the Adyen payment method.<\/p>\n<p>Use the <code>adyenSaveStateData<\/code> GraphQL mutation to save the state data after you have checked the balance of a gift card. For multiple gift cards payments, save the state data for each gift card after checking their balances.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'GraphQL mutation to save state data'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"mutation adyenSaveStateData ($state_data: String!, $cart_id: String!) {\\n   adyenSaveStateData (stateData: $state_data, cartId: $cart_id) {\\n      stateDataId\\n   }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<ul>\n<li><code>stateData<\/code>: The JSON string that contains state data to save.<\/li>\n<li><code>cart_id<\/code>: Use the <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/graphql\/schema\/cart\/queries\/cart\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">cart ID<\/a> of your shopper's cart.<\/li>\n<\/ul>\n<p>This mutation makes a request to save the state data:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example request to save state data'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"{\\n \\\"state_data\\\": \\\"{\\\\\\\"paymentMethod\\\\\\\":{\\\\\\\"type\\\\\\\":\\\\\\\"giftcard\\\\\\\",\\\\\\\"brand\\\\\\\":\\\\\\\"svs\\\\\\\",\\\\\\\"encryptedCardNumber\\\\\\\":\\\\\\\"abc...\\\\\\\",\\\\\\\"encryptedSecurityCode\\\\\\\":\\\\\\\"xyz...\\\\\\\"},\\\\\\\"giftcard\\\\\\\":{\\\\\\\"balance\\\\\\\":{\\\\\\\"currency\\\\\\\":\\\\\\\"EUR\\\\\\\",\\\\\\\"value\\\\\\\":5000},\\\\\\\"title\\\\\\\":\\\\\\\"SVS\\\\\\\"}}\\\",\\n \\\"cart_id\\\": \\\"zJAHYuFaTn...\\\"\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>You get a <code>stateDataId<\/code> object that you can use to remove the saved state data later.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example response after saving state data'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"{\\n     \\\"data\\\": {\\n         \\\"adyenSaveStateData\\\": {\\n             \\\"stateDataId\\\": \\\"1\\\"\\n         }\\n     }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>You may no longer need the saved state data if your shopper deletes the gift card number in the checkout form, for example if they decide to pay with another gift card.<\/p>\n<p>To remove the saved state data, use the <code>adyenRemoveStateData<\/code> GraphQL mutation:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Implement the mutation to remove saved state data'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"mutation adyenRemoveStateData ($state_data_id: Int!, $cart_id: String!) {\\n     adyenRemoveStateData (stateDataId: $state_data_id, cartId: $cart_id) {\\n         stateDataId\\n     }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<ul>\n<li><code>stateDataId<\/code>: The ID that you received in the response when you saved state data.<\/li>\n<li>\n<p><code>cart_id<\/code>: Use the <a href=\"https:\/\/developer.adobe.com\/commerce\/webapi\/graphql\/schema\/cart\/queries\/cart\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">cart ID<\/a> of your shopper's cart.<\/p>\n<p>You get a response containing the <code>stateDataId<\/code> for removed state data.<\/p>\n<\/li>\n<\/ul>\n<h3>Step 3: Redeem gift cards<\/h3>\n<ol>\n<li>\n<p>Use the <code>adyenRedeemedGiftCards<\/code> GraphQL mutation that returns an array of the gift cards, including identifiers and remaining balances to fetch redeemed gift cards. This allows you to present the gift cards and the deducted amounts in your front end.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'GraphQL mutation to get redeemed gift cards'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"query adyenRedeemedGiftcards ($cart_id: String!) {\\n    adyenRedeemedGiftcards (cartId: $cart_id) {\\n        redeemedGiftcards {\\n            stateDataId\\n            brand\\n            title\\n            balance {\\n                currency\\n                value\\n            }\\n            deductedAmount\\n        }\\n        remainingAmount\\n        totalDiscount\\n    }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p><br><\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example response with redeemed gift cards'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"{\\n    \\\"data\\\": {\\n        \\\"adyenRedeemedGiftcards\\\": {\\n            \\\"redeemedGiftcards\\\": [\\n                {\\n                    \\\"stateDataId\\\": \\\"11\\\",\\n                    \\\"brand\\\": \\\"svs\\\",\\n                    \\\"title\\\": \\\"SVS\\\",\\n                    \\\"balance\\\": {\\n                        \\\"currency\\\": \\\"EUR\\\",\\n                        \\\"value\\\": \\\"5000\\\"\\n                    },\\n                    \\\"deductedAmount\\\": \\\"\\u20ac0.00\\\"\\n                }\\n            ],\\n            \\\"remainingAmount\\\": \\\"\\u20ac75.00\\\",\\n            \\\"totalDiscount\\\": \\\"\\u20ac50.00\\\"\\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>Compare the amount of the shopper's cart to the balance available on the gift card. The way you <a href=\"\/pt\/plugins\/adobe-commerce\/headless-integration?tab=graphql1_2#place-order\">place the order<\/a> depends on the outcome of the comparison:<\/p>\n<ul>\n<li>If the balance of the gift card is equal or higher than the order amount, place the order with <code>adyen_giftcard<\/code> for the <code>code<\/code> field.<\/li>\n<li>If the balance of the gift card is lower than the order amount, place the order with the payment method that is used to cover the remaining amount. The plugin handles the gift card redemption automatically using the <a href=\"#save-gift-card-state-data\">state data you have saved<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>After you have followed the above steps, <a href=\"\/pt\/plugins\/adobe-commerce\/headless-integration?tab=graphql4_2#payment-status\">check the payment status<\/a> as you would for other payment methods.<\/p>\n<h2>Tokenization<\/h2>\n<p>With your headless integration, you can securely store the payment details of shoppers and offer returning customers a faster checkout experience.<\/p>\n<p>Tokenization in a headless integration works similarly to <a href=\"\/pt\/plugins\/adobe-commerce\/set-up-tokenization\/#how-it-works\">tokenization in the standard plugin setup<\/a>, using the <a href=\"https:\/\/developer.adobe.com\/commerce\/php\/development\/payments-integrations\/vault\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce Vault<\/a>.<\/p>\n<h3>Tokenize shopper payment details<\/h3>\n<p>Follow the steps to <a href=\"\/pt\/plugins\/adobe-commerce\/set-up-tokenization\/#set-up-vault\">set up the vault in Adobe Commerce<\/a>.<\/p>\n<ul>\n<li>For alternative payment methods, the payment details of shoppers will be tokenized for payment methods that you <a href=\"\/pt\/plugins\/adobe-commerce\/set-up-tokenization\/#set-up-vault\">enable tokenization<\/a> for.<\/li>\n<li>For cards, you must <a href=\"\/pt\/payment-methods\/cards\/web-component\/?tab=store-card-details-payment-methods_2#store-card-details\">enable storing payment details<\/a> in your <a href=\"\/pt\/payment-methods\/cards\/web-component\/?tab=store-card-details-payment-methods_2#optional-configuration\">card component configuration<\/a>, by setting <code>enableStoreDetails<\/code> to <strong>true<\/strong>.<br \/>\nThis setting displays a <strong>Save\u00a0for\u00a0my\u00a0next\u00a0payment<\/strong> checkbox when a shopper is making a card payment.<\/li>\n<\/ul>\n<p>The shopper payment details are stored in the <code>vault_payment_token<\/code> database table.<\/p>\n<h3>Remove a shopper token<\/h3>\n<p>For each token, the <code>vault_payment_token<\/code> database table includes:<\/p>\n<ul>\n<li><code>shopperReference<\/code>: Stored in Adobe Commerce as the <code>customer_id<\/code>.<\/li>\n<li><code>storedPaymentMethodId<\/code>: Stored in Adobe Commerce as the <code>gateway_token<\/code>.<\/li>\n<\/ul>\n<p>To remove an existing shopper token, make a POST <strong>\/token\/deactivate<\/strong> request from your server. In your request, include the <code>customerId<\/code> parameter. This must match the <code>customer_id<\/code> value for the token in the database table.<\/p>\n<h2>Troubleshooting<\/h2>\n<p>When you get unexpected results, you can:<\/p>\n<ul>\n<li>\n<p>Check the <a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/blob\/master\/etc\/webapi.xml\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">endpoints<\/a> on Adyen's GitHub as a starting point to see if there are any changes. In addition, check your <code>\/swagger<\/code> where all the endpoints are listed.<\/p>\n<\/li>\n<li>\n<p>Use our <a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">API Explorer<\/a> to try out calls to the Adyen API endpoints and for example see what kind of errors you might get. Make sure that you select the API version that the Adobe Commerce plugin uses. <a href=\"#checking-versions\">Check the library and API versions you are using<\/a>.<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"checking-versions\">Checking library and API versions<\/h3>\n<p>The Adobe Commerce plugin uses a specific version of the Adyen PHP library, which uses specific versions of the Adyen APIs. You can try out calls to the Adyen APIs in our <a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">API Explorer<\/a>. The API Explorer is versioned, and you need to select the API version that your Adobe Commerce plugin version is using before trying calls.<\/p>\n<p>To look up which PHP library and Adyen API versions you are using, refer to the <a href=\"\/pt\/plugins\/release-notes\/?title%5B0%5D=Adobe%2BCommerce\">release notes<\/a>.<\/p>\n<p>Alternatively:<\/p>\n<ol>\n<li>Go to the <a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/blob\/main\/composer.json\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adyen Adobe Commerce (formerly Magento 2) plugin on GitHub<\/a>.<\/li>\n<li>In the <strong>Branch<\/strong> dropdown, on the <strong>Tags<\/strong> tab, select the version of your Adobe Commerce plugin.<\/li>\n<li>At <code>adyen\/php-api-library<\/code>, find the version of the Adyen PHP library that the plugin uses. For example, <code>\"adyen\/php-api-library\": \"~2.1\"<\/code>.<\/li>\n<li>Go to the <a href=\"https:\/\/github.com\/Adyen\/adyen-php-api-library\/blob\/develop\/src\/Adyen\/Client.php#23\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adyen PHP library<\/a>.<\/li>\n<li>In the <strong>Branch<\/strong> dropdown, on the <strong>Tags<\/strong> tab, select the library version you have just found.<\/li>\n<li>Refer to the API constants to find the versions of the Adyen APIs that the PHP library uses, for example <code>const API_CHECKOUT_VERSION = \"v41\"<\/code>.<\/li>\n<\/ol>\n<h2 id=\"see-also\">See also<\/h2>\n<ul>\n<li><a href=\"\/pt\/plugins\/adobe-commerce\">Adobe Commerce plugin<\/a><\/li>\n<li><a href=\"\/pt\/payment-methods\">Payment methods<\/a><\/li>\n<\/ul>","url":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/headless-integration","articleFields":{"description":"Integrate an Adobe Commerce headless storefront with the Adyen platform.","feedback_component":true,"last_edit_on":"05-01-2024 11:36","filters_component":false,"search_tags":["magento","magento 2","adobe","adobe commerce"],"page_id":"fa966870-a103-4464-81e6-dc039ef06fc9","decision_tree":"[]","parameters":{"logo_2":"![](\/docs\/plugins\/shopware-6\/github-icon.png?resize=25)","example_2":"[See our example integration on GitHub!](https:\/\/github.com\/adyen-examples\/magento-headless-demo)"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/headless-integration","title":"Headless integration","content":"\nImplementation examples&nbsp;&nbsp;See our example integration on GitHub!\n\nOn this page we provide Adyen-specific information for building a Progressive Web Application (PWA) storefront. The PWA storefront works with a headless Adobe Commerce back-end that has the Adyen plugin installed and configured.\nYou can use one of the following web APIs to get Adyen functionalities in your Adobe Commerce headless implementation:\n\nREST: The most widely used web API. This method allows you to access all the functionalities provided by the Adyen plugin.\nGraphQL: \n    \n        Requires plugin v8.2.0 or later\n    \n\nThe Adyen plugin utilizes the \/graphql endpoint exposed by the Adobe Commerce back-end, and adds functionality that is related to the plugin. You can access all functionalities provided by the Adyen plugin with this method. For more information, checkout the Adobe Commerce GraphQL documentation.\n\nEcommerce checkout flow\n\nPostman&nbsp;&nbsp; See the API flows for a guest shopper on PostmanREST APIGraphQL\n\nWith a headless Adobe Commerce back end, you build your own payment form for the Adobe Commerce PWA storefront. In the checkout flow, data passes from the PWA storefront through the Adobe Commerce back end to the Adyen API. Then, data passes back from the Adyen API through the Adobe Commerce back end to the PWA storefront. In the checkout flow, you need to do the following steps:\n\nGet the payment methods that are available on the Adyen platform, and for each of them determine the data that you need to collect.\nCollect shopper details by presenting the payment methods on your payment form. Then, when the shopper selects a payment method, present the fields to fill out or the options to choose from, and collect these details.\nPlace the order.\nCheck the payment status to see if you need to perform any extra steps before redirecting the user to the success page or showing an error message.\nHandle additional actions like redirecting the customer to the issue page for additional authentication,  or presenting a QR code to complete the payment. If the payment fails, the following attempts will need to handle the additional actions as well\n\nRequirements\nBefore you start integrating a Adobe Commerce PWA storefront with the Adyen platform:\n\n\nMake sure that you have completed the steps to configure the Adobe Commerce back end:\n\nSet up the Adyen Customer Area.\nSet up the plugin in Adobe Commerce.\nSet up the payment methods in Adobe Commerce.\nConfigured headless integration settings in Adobe Commerce.\nGet familiar with the front end components implementation. We suggest using the components to gather the payment related information in a secure way.\n\nSetting up in-person payments is not required for a PWA storefront.\n\n\nThe plugin uses Adobe Commerce\u2019s recommended authentication methods to authenticate requests coming from the front-end application. The endpoints use self resources for logged-in shoppers and anonymous resources for guest shoppers.\nTherefore, an integration token is no longer required. Customer token needs to be used as \n  Bearer Token\n for logged-in shoppers. For guest shoppers, no token is required because a masked card_id is used to authenticate requests.\n\n\n\nFor more information on resource access, refer to Adobe Commerce documentation.\n\nStep 1: Get available payment methods\nIn this step, the Adobe Commerce back end retrieves the available payment methods from the  \/paymentMethods API endpoint and adds some extra information that you will need for rendering the components on the front end.\nTo get the available payment methods and extra information:\n\nMake an API request to get the payment methods and data that you need to collect.\nParse the API response to get a JSON object that contains the Adyen \/paymentMethods response and required extra information.\n\n1. Make an API request\nIf you are using REST, the endpoint differs per use case. If you are using GraphQL, the endpoint is \/graphql.\n\n\n    \n        \n        \n    \n\n\n2. Parse the API response\nThe Adobe Commerce back end receives a response from Adyen containing all available payment methods for the current session filtered by currency, amount, country\/region, etc. For each payment method, the  \/paymentMethods response includes:\n\nname: Name of the payment method, which you can show to your shopper in your payments form.\ntype: Unique payment method code. Pass this back to indicate the shopper's selected payment method when you place an order.\n\nThe plugin also collects some extra information other than the \/paymentMethods response. This data is included in the response as the following fields:\n\nicon {url, width, height}: Payment method icon details.\nconfiguration: Includes any extra payment method specific configuration that the checkout component should get on the front end which is not accessible from the \/paymentMethods details response.\nisOpenInvoice (boolean): Indicates if the payment method is an open invoice payment method. Note that this field is deprecated and will be removed later.\n\nThe following is an example API response for the REST flow, a GraphQL query retrieves data similarly to a REST GET request. To learn more about the similarities and differences between REST and GraphQL, refer to Adobe Commerce GraphQL documentation.\n\n    \n\n\nThe response contains payment methods as a JSON encoded string. Parse this string to get a JSON object. For example, using JSON.parse();.\n\nAfter parsing the response, you get two root objects:\n\npaymentMethodsResponse: Includes the full and unmodified response object from the Adyen \/paymentMethods API endpoint.\npaymentMethodsExtraDetails: Holds the extra information that the plugin gathered for each payment method that is available in the paymentMethodsResponse.\n\n\n    \n    \n        \n            \n            \n                                    Example response after parsing\n                            \n        \n        \n            \n{\n    \"paymentMethodsExtraDetails\": {\n        \"applepay\": {\n            \"icon\": {\n                \"url\": \"full url for icon\",\n                \"width\": 1,\n                \"height\": 1\n            },\n            \"configuration\": {\n                \"amount\": {\n                    \"value\": 1,\n                    \"currency\": \"currency ISO code like EUR\"\n                }\n            }\n        },\n        \"klarna\": {...},\n        \"ideal\": {...},\n        \"klarna_paynow\": {...}\n    },\n    \"paymentMethodsResponse\": {\n        \"paymentMethods\": [\n            {\n                \"name\": \"iDEAL\",\n                \"type\": \"ideal\"\n            },\n            {\n                \"brands\": [\n                    \"mc\",\n                    \"visa\",\n                    \"maestro\"\n                ],\n                \"name\": \"Cards\",\n                \"type\": \"scheme\"\n            },\n            {\n                \"configuration\": {\n                    \"intent\": \"capture\",\n                    \"merchantId\": \"Merchant id\"\n                },\n                \"name\": \"PayPal\",\n                \"type\": \"paypal\"\n            },\n            {\n                \"name\": \"Pay later with Klarna.\",\n                \"type\": \"klarna\"\n            },\n            {\n                \"name\": \"SEPA Direct Debit\",\n                \"type\": \"sepadirectdebit\"\n            },\n            {\n                \"configuration\": {\n                    \"merchantId\": \"Merchant id\",\n                    \"merchantName\": \"Merchant name\"\n                },\n                \"name\": \"Apple Pay\",\n                \"type\": \"applepay\"\n            }\n        ]\n    }\n}\n\n        \n    \n\n\nStep 2: Collect shopper details\nNext, present the available payment methods on your front end, and collect the shopper details that are required for the payment method selected by the shopper.\n\n\nUse the name values from the  \/paymentMethods response to show all available payment methods to your shopper.\n\nIf you need payment methods and issuer logos for your payment form, use the paymentMethodsExtraDetails.icon from the \/payment-information response as described in the previous step.\n\n\n\nAfter the shopper selects a payment method, render the input fields to get the required payment details. You can do this by rendering the input fields with Adyen Components.\n\n\nRender the input fields with Adyen Components\nYou can use our Web Components to render individual payment methods anywhere on your website with our customizable UI components.\nWe recommend to pass the full paymentMethodsResponse object to the Web Component configuration when implementing multiple payment methods in your PWA storefront. After creating the new AdyenCheckout object, you can loop through the methods and generate the components instead of creating components manually for each payment method. This also ensures that your integration can handle new payment methods when enabled in your Customer Area.\nStep 3: Place the order\nAfter the customer has filled in their data, you can place the order. In this step, the storefront makes a request to the Adobe Commerce back end which then makes a payment request to the  \/payments endpoint.\nTo start the payment process, place the order from your front end in the way the default Adobe Commerce checkout flow requires:\n\nCreate a data object to send in the Adobe Commerce API request.\nPlace the order with the created object.\n\n1. Create a data object\n\n\n    \n        \n        \n    \n\n\n2. Place an order\n\n\n    \n        \n        \n    \n\n\nFor more information, refer to the Adobe Commerce API documentation.\nThe response contains the orderId field with an integer value that you need for the next step.\nStep 4: Check payment status\nTo see if there are any additional steps required after placing the order, call the payment status endpoint:\n\n\n    \n        \n        \n    \n\n\n\nParse the JSON response and evaluate it. There are two paths that you can follow based on the isFinal response field.\n\nThe isFinal field is true:\n\nIf the resultCode field is Authorised or Received, the payment was successful and you can redirect the customer to the success page.\nIf the resultCode field is PresentToShopper, present the voucher or QR code to the shopper so they can complete the payment.\nIf the resultCode field is Refused, Error or unhandled, you receive a response containing an HTTP 400  result code and a default Adobe Commerce localized error response.\nIf the action field is present and is not empty, then handle the additional action using the Web Component.\n\nThe isFinal field is false:\n\nThe action field is present and is not empty, then handle the additional action using the Web Component.\n\n\n\nStep 5: Handle additional actions\n\nThis step is only needed if the action field is present and not empty in the response of the previous step.\n\nSome payment methods require additional action from the shopper. For example, to scan a QR code, to authenticate a payment with 3D Secure, or to log in to their bank's website to complete the payment. To handle these additional front-end actions, follow the Web Components documentation or find specific documentation for each payment method in this list.\n\nAll payment methods use the createFromAction method, except for PayPal. The PayPal Component uses the handleAction method to process additional action from the PayPal pop-up window.\n\n\n\n    \n        \n        \n    \n\n\nGift card payments\nAfter you have followed the steps to get the available payment methods and present them in your front end, you can offer your shoppers to pay with gift cards.\nFor GraphQL integrations, the additional setup steps below are required to process gift card payments.\nStep 1: Mount the component\nAfter a shopper selects the option to pay with a gift card, mount the Adyen Web Component for gift cards and check the balance:\n\nFollow the steps to configure the Component.\nWhen creating an instance of the Component, in the onBalanceCheck event, call the adyenPaymentMethodsBalance GraphQL mutation that returns the available balance of a gift card.\n\nUse the JSON.stringify() function on the data object you get from the event. This is the payload for the adyenPaymentMethodsBalance mutation.\n\n\n\n\n\n\n\nThis mutation returns the balance of a gift card, and additional details like the currency and value. For example:\n\n\n\n\n\nStep 2: Save gift card state data\nTo redeem gift cards when making a payment, save the state data associated with the Adyen payment method.\nUse the adyenSaveStateData GraphQL mutation to save the state data after you have checked the balance of a gift card. For multiple gift cards payments, save the state data for each gift card after checking their balances.\n\n    \n\n\nstateData: The JSON string that contains state data to save.\ncart_id: Use the cart ID of your shopper's cart.\n\nThis mutation makes a request to save the state data:\n\n    \n\nYou get a stateDataId object that you can use to remove the saved state data later.\n\n    \n\nYou may no longer need the saved state data if your shopper deletes the gift card number in the checkout form, for example if they decide to pay with another gift card.\nTo remove the saved state data, use the adyenRemoveStateData GraphQL mutation:\n\n    \n\n\nstateDataId: The ID that you received in the response when you saved state data.\n\ncart_id: Use the cart ID of your shopper's cart.\nYou get a response containing the stateDataId for removed state data.\n\n\nStep 3: Redeem gift cards\n\n\nUse the adyenRedeemedGiftCards GraphQL mutation that returns an array of the gift cards, including identifiers and remaining balances to fetch redeemed gift cards. This allows you to present the gift cards and the deducted amounts in your front end.\n\n\n\n\n\n\n\n\n\nCompare the amount of the shopper's cart to the balance available on the gift card. The way you place the order depends on the outcome of the comparison:\n\nIf the balance of the gift card is equal or higher than the order amount, place the order with adyen_giftcard for the code field.\nIf the balance of the gift card is lower than the order amount, place the order with the payment method that is used to cover the remaining amount. The plugin handles the gift card redemption automatically using the state data you have saved.\n\n\n\nAfter you have followed the above steps, check the payment status as you would for other payment methods.\nTokenization\nWith your headless integration, you can securely store the payment details of shoppers and offer returning customers a faster checkout experience.\nTokenization in a headless integration works similarly to tokenization in the standard plugin setup, using the Adobe Commerce Vault.\nTokenize shopper payment details\nFollow the steps to set up the vault in Adobe Commerce.\n\nFor alternative payment methods, the payment details of shoppers will be tokenized for payment methods that you enable tokenization for.\nFor cards, you must enable storing payment details in your card component configuration, by setting enableStoreDetails to true.\nThis setting displays a Save\u00a0for\u00a0my\u00a0next\u00a0payment checkbox when a shopper is making a card payment.\n\nThe shopper payment details are stored in the vault_payment_token database table.\nRemove a shopper token\nFor each token, the vault_payment_token database table includes:\n\nshopperReference: Stored in Adobe Commerce as the customer_id.\nstoredPaymentMethodId: Stored in Adobe Commerce as the gateway_token.\n\nTo remove an existing shopper token, make a POST \/token\/deactivate request from your server. In your request, include the customerId parameter. This must match the customer_id value for the token in the database table.\nTroubleshooting\nWhen you get unexpected results, you can:\n\n\nCheck the endpoints on Adyen's GitHub as a starting point to see if there are any changes. In addition, check your \/swagger where all the endpoints are listed.\n\n\nUse our API Explorer to try out calls to the Adyen API endpoints and for example see what kind of errors you might get. Make sure that you select the API version that the Adobe Commerce plugin uses. Check the library and API versions you are using.\n\n\nChecking library and API versions\nThe Adobe Commerce plugin uses a specific version of the Adyen PHP library, which uses specific versions of the Adyen APIs. You can try out calls to the Adyen APIs in our API Explorer. The API Explorer is versioned, and you need to select the API version that your Adobe Commerce plugin version is using before trying calls.\nTo look up which PHP library and Adyen API versions you are using, refer to the release notes.\nAlternatively:\n\nGo to the Adyen Adobe Commerce (formerly Magento 2) plugin on GitHub.\nIn the Branch dropdown, on the Tags tab, select the version of your Adobe Commerce plugin.\nAt adyen\/php-api-library, find the version of the Adyen PHP library that the plugin uses. For example, \"adyen\/php-api-library\": \"~2.1\".\nGo to the Adyen PHP library.\nIn the Branch dropdown, on the Tags tab, select the library version you have just found.\nRefer to the API constants to find the versions of the Adyen APIs that the PHP library uses, for example const API_CHECKOUT_VERSION = \"v41\".\n\nSee also\n\nAdobe Commerce plugin\nPayment methods\n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Adobe Commerce","lvl3":"Headless integration"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/plugins","lvl2":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce","lvl3":"\/pt\/plugins\/adobe-commerce\/headless-integration"},"levels":4,"category":"Plugins","category_color":"green","tags":["magento","magento 2","adobe","adobe commerce"]},"articleFiles":{"postman-icon.svg":"<img style=\"width: 25px;\" alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/05.plugins\/04.adobe-commerce\/08.headless-integration\/postman-icon.svg?decoding=auto&amp;fetchpriority=auto\" \/>"}}