{"title":"Upgrade to Adyen Web v6","category":"default","creationDate":1776961627,"content":"<div class=\"additional-info-block output-inline\">\n<h5 class=\"article__heading additional-info-block__title\">Benefits to upgrading<\/h5><div class=\"additional-info-block__body\"><p>Read our <a href=\"\/pt\/online-payments\/release-notes?Web%20Components%2FDrop-in=&amp;title%5B0%5D=Web%20Components%2FDrop-in&amp;version%5B0%5D=6.0.0#releaseNote=2024-07-24-web-componentsdrop-in-6.0.0\">release notes<\/a> to learn about the benefits of upgrading.<\/p><\/div><\/div>\n\n<p>To upgrade from <a href=\"https:\/\/github.com\/Adyen\/adyen-web\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Web Drop-in\/Components<\/a> v4.x.x to v6.x.x, complete the following steps.<\/p>\n<div class=\"sc-notice info\"><div>\n<p>If you are upgrading from a different version than v4, you need to follow a different upgrade guide:<\/p>\n<ul>\n<li><a href=\"\/pt\/online-payments\/upgrade-your-integration\/upgrade-to-web-v6\">From <strong>v5.x.x<\/strong> to v6.x.x<\/a>.<\/li>\n<li><a href=\"\/pt\/online-payments\/upgrade-your-integration\/upgrade-to-web-v6\/from-v3\">From <strong>v3.x.x<\/strong> to v6.x.x<\/a>.\n<\/div><\/div><\/li>\n<\/ul>\n<h2>Required API version<\/h2>\n<p>Using Web Drop-in\/Components v6.0.0 requires <a href=\"\/pt\/online-payments\/release-notes\/?title%5B0%5D=Checkout%2BAPI&amp;version%5B0%5D=69#releaseNote=2022-05-24-checkout-api-69\">Checkout API v69<\/a> or later.<\/p>\n<h2 id=\"use-the-new-package\">Step 1: Use the new package<\/h2>\n\n<div id=\"tabW5PRp\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;npm (recommended)&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Install this version of the &lt;a href=\\&quot;https:\\\/\\\/www.npmjs.com\\\/package\\\/@adyen\\\/adyen-web\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Adyen Drop-in\\\/Components Node.js package&lt;\\\/a&gt;:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;bash\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;npm install @adyen\\\\\\\/adyen-web@latest --save\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:null,&quot;oldTabId&quot;:&quot;npm_(recommended)_0_1&quot;,&quot;relation&quot;:&quot;&quot;},{&quot;title&quot;:&quot;Embed script and stylesheet&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Find the &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/live-endpoints\\\/#subresource-integrity-hashes\\&quot;&gt;Subresource Integrity hashes&lt;\\\/a&gt; for the latest version in our &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes\\&quot;&gt;release notes&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The base URLs for the script source are different for each environment. Use the one that corresponds to your &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/live-endpoints#checkout-endpoints\\&quot;&gt;live endpoint&lt;\\\/a&gt;:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Environment&lt;\\\/th&gt;\\n&lt;th&gt;URL&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Test&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;https:\\\/\\\/checkoutshopper-test.cdn.adyen.com&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Europe (EU) live&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;https:\\\/\\\/checkoutshopper-live.cdn.adyen.com&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;United States (US) live&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;https:\\\/\\\/checkoutshopper-live-us.cdn.adyen.com&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Australia (AU) live&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;https:\\\/\\\/checkoutshopper-live-au.cdn.adyen.com&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Asia Pacific &amp;amp; Southeast (APSE) live&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;https:\\\/\\\/checkoutshopper-live-apse.cdn.adyen.com&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;India (IN) live&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;https:\\\/\\\/checkoutshopper-live-in.cdn.adyen.com&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;bash\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;&amp;lt;script src=\\\\\\&quot;https:\\\\\\\/\\\\\\\/checkoutshopper-test.cdn.adyen.com\\\\\\\/checkoutshopper\\\\\\\/sdk\\\\\\\/6.0.0\\\\\\\/adyen.js\\\\\\&quot;\\\\n     integrity=\\\\\\&quot;sha384-GDA6txYXS6ka6zCgDtLmgI80TQMlYST32KjDtdiyFi\\\\\\\/k\\\\\\\/zp9rXP64qbziIXVOI5h\\\\\\&quot;\\\\n     crossorigin=\\\\\\&quot;anonymous\\\\\\&quot;&amp;gt;&amp;lt;\\\\\\\/script&amp;gt;\\\\n\\\\n&amp;lt;link rel=\\\\\\&quot;stylesheet\\\\\\&quot;\\\\n     href=\\\\\\&quot;https:\\\\\\\/\\\\\\\/checkoutshopper-test.cdn.adyen.com\\\\\\\/checkoutshopper\\\\\\\/sdk\\\\\\\/6.0.0\\\\\\\/adyen.css\\\\\\&quot;\\\\n     integrity=\\\\\\&quot;sha384-Gngchfiq4JxdVPMOwrUaDK70raLnMJ7IgBKi2OE0VSlbUeHysN7Mwd4aHREEvEAw\\\\\\&quot;\\\\n     crossorigin=\\\\\\&quot;anonymous\\\\\\&quot;&amp;gt;\\&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;:null,&quot;oldTabId&quot;:&quot;embed_script_and_stylesheet_1_2&quot;,&quot;relation&quot;:&quot;&quot;}]\"\n            :should-update-when-url-changes='false'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"upgrade-import-statements\">Step 2: Upgrade import statements<\/h2>\n\n<div id=\"tabdE7JP\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Drop-in&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;You can import Drop-in &lt;a href=\\&quot;#import-using-npm\\&quot;&gt;using npm&lt;\\\/a&gt; or by &lt;a href=\\&quot;#import-using-embedded-scripts\\&quot;&gt;embedding the scripts&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;h3 id=\\&quot;import-using-npm\\&quot;&gt;Using npm&lt;\\\/h3&gt;\\n&lt;p&gt;Starting from Drop-in v6, we offer two ways of importing with npm:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#npm-auto\\&quot;&gt;Import Drop-in with all payment methods&lt;\\\/a&gt;: this method resembles what you are used to before v6. You do not need to import individual payment methods, at the cost of a slower loading time.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#npm-reduced-bundle-size\\&quot;&gt;Import Drop-in with individual payment methods&lt;\\\/a&gt;: this method uses tree shaking to let you import only the payment methods you use, speeding up loading time. However, adding new payment methods requires developer resources.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;h4 id=\\&quot;npm-auto\\&quot;&gt;Import Drop-in with all payment methods&lt;\\\/h4&gt;\\n&lt;p&gt;This method of importing resembles what you were used to before v6. With this method, you do not need to import every individual payment method for Drop-in. This allows for a simpler integration where adding a new payment method doesn&#039;t require any development resources.&lt;\\\/p&gt;\\n&lt;p&gt;However, this results in a larger bundle size and slower loading times, as all module exports are imported client-side. If a smaller bundle size and faster page load times is a priority to you, consider importing &lt;a href=\\&quot;#npm-reduced-bundle-size\\&quot;&gt;Drop-in with individual payment methods&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;For example, to load the Drop-in with all available payment methods:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenCheckout, Dropin } from &#039;@adyen\\\\\\\/adyen-web\\\\\\\/auto&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To add new payment methods, you only need to &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\\/\\&quot;&gt;add the payment method to you account&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;h4 id=\\&quot;npm-reduced-bundle-size\\&quot;&gt;Import Drop-in with individual payment methods&lt;\\\/h4&gt;\\n&lt;p&gt;Our tree-shakable &lt;code&gt;@adyen\\\/adyen-web&lt;\\\/code&gt; npm package lets your import only the Components you use. This reduces the bundle size and loading times.&lt;\\\/p&gt;\\n&lt;p&gt;For example, to load the Drop-in with card payments, PayPal, Google Pay, Apple Pay and Cash App Pay:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenCheckout, Dropin, Card, PayPal, GooglePay, ApplePay, CashAppPay} from &#039;@adyen\\\\\\\/adyen-web&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To add new payment methods, you need to:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\\/\\&quot;&gt;Add the payment methods to you account&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Import them (see code sample above).&lt;\\\/li&gt;\\n&lt;li&gt;Assign them to the &lt;code&gt;paymentMethodComponents&lt;\\\/code&gt; property &lt;a href=\\&quot;#upgrade-creating-an-instance\\&quot;&gt;within the Drop-in configuration&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;For an overview of available Components, see &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-web\\\/blob\\\/main\\\/packages\\\/lib\\\/src\\\/components\\\/index.ts\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;The library&#039;s Component exports&lt;\\\/a&gt;. To know what Component you need for your payment methods, go to the relevant &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\&quot;&gt;payment method&#039;s Web Drop-in\\\/Components page&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;h3 id=\\&quot;import-using-embedded-scripts\\&quot;&gt;Using embedded scripts&lt;\\\/h3&gt;\\n&lt;p&gt;After you &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/upgrade-your-integration\\\/upgrade-to-web-v6?tab=embed_script_and_stylesheet_2#use-the-new-package\\&quot;&gt;import the scripts&lt;\\\/a&gt;, the Drop-in\\\/Components resources are available on the &lt;code&gt;window&lt;\\\/code&gt; global variable.&lt;\\\/p&gt;\\n&lt;p&gt;Before v6, you would use the &lt;code&gt;window.AdyenCheckout()&lt;\\\/code&gt; method to create an instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Before v6&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const checkout = new window.AdyenCheckout({ \\\\\\\/* Configuration *\\\\\\\/ });\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;From v6 onwards, the &lt;code&gt;AdyenCheckout()&lt;\\\/code&gt; function is a property of &lt;code&gt;window.AdyenWeb&lt;\\\/code&gt;, alongside &lt;code&gt;Dropin&lt;\\\/code&gt; and all the payment method-specific Components:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;From v6 onwards&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const { AdyenCheckout, Dropin, Card } = window.AdyenWeb;\\\\nconst checkout = await AdyenCheckout({ \\\\\\\/* Configuration *\\\\\\\/ });\\&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;dropin&quot;,&quot;oldTabId&quot;:&quot;dropin-step1_1&quot;,&quot;relation&quot;:&quot;dropin&quot;},{&quot;title&quot;:&quot;Components&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;You can import Components &lt;a href=\\&quot;#import-using-npm}\\&quot;&gt;using npm&lt;\\\/a&gt; or by &lt;a href=\\&quot;#import-using-embedded-scripts\\&quot;&gt;embedding the scripts&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;h3 id=\\&quot;import-using-npm\\&quot;&gt;Using npm&lt;\\\/h3&gt;\\n&lt;p&gt;We&#039;re introducing more granular imports for the &lt;code&gt;@adyen\\\/adyen-web&lt;\\\/code&gt; package to let you load only the Components that you need, reducing the bundle size and improving overall performance.&lt;\\\/p&gt;\\n&lt;p&gt;For example, to load only the card Component:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;import { AdyenCheckout, Card } from &#039;@adyen\\\/adyen-web&#039;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;p&gt;For an overview of available Components, see &lt;a href=\\&quot;https:\\\/\\\/github.com\\\/Adyen\\\/adyen-web\\\/blob\\\/main\\\/packages\\\/lib\\\/src\\\/components\\\/index.ts\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;The library&#039;s Component exports&lt;\\\/a&gt;. To know what Component you need for your payment methods, go to the payment method pages.&lt;\\\/p&gt;\\n&lt;p&gt;If you do not find a specific Component for a payment method, and the payment method redirects the shopper, use the &lt;code&gt;Redirect&lt;\\\/code&gt; Component. For example, for iDEAL:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Use the Redirect Component for iDEAL&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;new Redirect(checkout, { type: &#039;ideal&#039; });&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h3 id=\\&quot;import-using-embedded-scripts\\&quot;&gt;Using embedded scripts&lt;\\\/h3&gt;\\n&lt;p&gt;After you &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?tab=embed_script_and_stylesheet_3&amp;amp;platform=Web&amp;amp;version=latest#install-adyen-web\\&quot;&gt;import the scripts&lt;\\\/a&gt;, the Drop-in\\\/Components resources are available on the &lt;code&gt;window&lt;\\\/code&gt; global variable.&lt;\\\/p&gt;\\n&lt;p&gt;Before v6, you would use the &lt;code&gt;window.AdyenCheckout()&lt;\\\/code&gt; method to create an instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Before v6&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const checkout = new window.AdyenCheckout({ \\\\\\\/* Configuration *\\\\\\\/ });\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;From v6 onwards, the &lt;code&gt;AdyenCheckout()&lt;\\\/code&gt; function is and property of &lt;code&gt;window.AdyenWeb&lt;\\\/code&gt;, alongside all the payment method-specific Components:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;From v6 onwards&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const { AdyenCheckout, Card, PayPal } = window.AdyenWeb;\\&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;components&quot;,&quot;oldTabId&quot;:&quot;component-step1_2&quot;,&quot;relation&quot;:&quot;components&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"upgrade-configuration\">Step 3: Upgrade your configuration<\/h2>\n<p>Make the following changes to your configuration properties:<\/p>\n<ul>\n<li><code>countryCode<\/code> is now a mandatory configuration property. Set it during the <code>AdyenCheckout<\/code> initialization.\n<ul>\n<li>If you use the Sessions flow, you can also set <code>countryCode<\/code> in the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a> request.<\/li>\n<\/ul><\/li>\n<li>The <code>setStatusAutomatically<\/code> property is no longer used. To disable the Drop-in animation, set <code>disableFinalAnimation<\/code> to <strong>true<\/strong>.<\/li>\n<li>You can no longer set <code>installmentOptions<\/code> during the <code>AdyenCheckout<\/code> instantiation. Set it directly in the Card configuration instead.<\/li>\n<li>The <code>showBrandsUnderCardNumber<\/code> property is no longer used. Upgrade your code accordingly.<\/li>\n<li>The <code>showFormInstruction<\/code> property is no longer used. Upgrade your code accordingly.<\/li>\n<li>If you integrate with the custom card component, use the <code>onValidationError()<\/code> event listener to access the field errors.<\/li>\n<\/ul>\n<h2 id=\"upgrade-creating-an-instance\">Step 4: Upgrade creating an instance<\/h2>\n<p>In earlier versions of Drop-in\/Components, creating an instance of a Component or the Drop-in used the <code>AdyenCheckout.create()<\/code> method. We've upgraded this to use a constructor function instead.<\/p>\n\n<div id=\"tabJIoCu\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Drop-in&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Before v6, creating an instance of Drop-in was as follows:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Before v6&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const checkout = new AdyenCheckout({ \\\\\\\/* Configuration *\\\\\\\/ });\\\\nconst dropin = checkout.create(&#039;dropin&#039;).mount(&#039;#dropin&#039;)&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;From v6 onwards, creating an instance of Drop-in is as follows:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;From v6 onwards&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const checkout = await AdyenCheckout({ \\\\\\\/* Configuration *\\\\\\\/ });\\\\n\\\\nconst dropin = new Dropin(checkout, {\\\\n  paymentMethodComponents: [Card, PayPal, GooglePay] \\\\\\\/\\\\\\\/ Only needed with tree-shakable npm package\\\\n  paymentMethodsConfiguration: { \\\\\\\/* Configuration *\\\\\\\/ }\\\\n}).mount(&#039;#dropin&#039;)&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;If you import through &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/upgrade-your-integration\\\/upgrade-to-web-v6?tab=dropin-step1_1#npm-auto\\&quot;&gt;npm auto&lt;\\\/a&gt; or &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/upgrade-your-integration\\\/upgrade-to-web-v6?tab=dropin-step1_1#import-using-embedded-scripts\\&quot;&gt;embedded scripts&lt;\\\/a&gt;, you do not need to set &lt;code&gt;paymentMethodComponents&lt;\\\/code&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The Drop-in constructor function takes two positional arguments:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Your &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?platform=Web&amp;amp;integration=Drop-in&amp;amp;version=6.0.0#configure\\&quot;&gt;Drop-in configuration&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;dropin&quot;,&quot;oldTabId&quot;:&quot;dropin-step2_1&quot;,&quot;relation&quot;:&quot;dropin&quot;},{&quot;title&quot;:&quot;Components&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Before v6, creating an instance of the Card Component is as follows:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Before v6&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const checkout = new AdyenCheckout({ \\\\\\\/* Configuration *\\\\\\\/ });\\\\n\\\\nconst card = checkout.create(&#039;card&#039;, {\\\\n    hideCVC: true,\\\\n    enableStoreDetails: true\\\\n}).mount(&#039;#card&#039;);&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;From v6 onwards, creating an instance of the Card Component is as follows:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;From v6 onwards&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const checkout = await AdyenCheckout({\\\\n    \\\\\\\/\\\\\\\/ configuration\\\\n});\\\\n\\\\nconst card = new Card(checkout, {\\\\n    hideCVC: true,\\\\n    enableStoreDetails: true\\\\n}).mount(&#039;#card&#039;);&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;The Component constructor function takes two positional arguments:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Your payment method-specific configuration.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;components&quot;,&quot;oldTabId&quot;:&quot;component-step2_2&quot;,&quot;relation&quot;:&quot;components&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"upgrade-your-event-handlers\">Step 5: Upgrade your event handlers<\/h2>\n<p>In v6, we're introducing changes to several of the library's event handlers:<\/p>\n<h3><code>onValid<\/code><\/h3>\n<p>The <code>onValid()<\/code> event listener is no longer used. Remove it from your configuration.<\/p>\n<h3><code>onSubmit<\/code> and <code>onAdditionalDetails<\/code><\/h3>\n<p>These events handlers now have access to the new <code>actions<\/code> parameter, which lets you:<\/p>\n<ul>\n<li>Continue the payment flow: <code>actions.resolve()<\/code>. Call <code>actions.resolve()<\/code> and pass the <code>resultCode<\/code>, also when the payment is unsuccessful.<\/li>\n<li>Stop the payment flow: <code>actions.reject()<\/code>. Stop the payment flow only in the following cases:\n<ul>\n<li>When your server's request to Adyen's API fails.<\/li>\n<li>When you experience network connection issues.<\/li>\n<\/ul><\/li>\n<\/ul>\n<p>Use the <code>actions<\/code> object to manage the payment flow, for example:<\/p>\n<pre><code class=\"language-javascript\">const checkout = await AdyenCheckout({\n  \/\/ Insert your global configuration here\n  onSubmit: async (state, component, actions) =&gt; {\n    try {\n      const { action, order, resultCode, donationToken } = await makePayment(state.data);\n\n      if (!resultCode) actions.reject();\n\n      actions.resolve({\n        resultCode,\n        action,\n        order,\n        donationToken\n      });\n    } catch (error) {\n      actions.reject();\n    }\n  },\n});<\/code><\/pre>\n<h3><code>onPaymentCompleted<\/code><\/h3>\n<p>This event now works both in the <a href=\"\/pt\/online-payments\/build-your-integration#sessions-flow-a-single-api-request\">Sessions Flow<\/a> and <a href=\"\/pt\/online-payments\/build-your-integration#advanced-flow-three-api-requests\">Advanced Flow<\/a>.<\/p>\n<p>This event is no longer triggered for failed payments. For failed payments, we now use the <a href=\"#onpaymentfailed\">\n  <code>onPaymentFailed<\/code>\n<\/a> event handler instead.<\/p>\n<p>Once this event is triggered, initiate the successful transaction flow on your web page.<\/p>\n<h3><code>onPaymentFailed<\/code><\/h3>\n<p>This is a new event, which is triggered when a payment fails. Previously, this event was part of <code>onPaymentCompleted<\/code>.<\/p>\n<p>This event is triggered when the <code>resultCode<\/code> of a payment is <strong>Cancelled<\/strong>, <strong>Error<\/strong>, or <strong>Refused<\/strong>.<\/p>\n<p>Once this event is triggered, initiate the failed transaction flow on your web page.<\/p>\n<h3><code>onOrderCreated<\/code> and <code>onPaymentMethodsRequest<\/code><\/h3>\n<p>These events are used for <a href=\"\/pt\/online-payments\/partial-payments\/\">partial payments<\/a>.<\/p>\n<p><code>onOrderCreated<\/code> is renamed to <code>onOrderUpdated<\/code>. Upgrade your codebase accordingly.<\/p>\n<p><code>onPaymentMethodsRequest<\/code> is a new event, which is triggered when a partial payment is made and the associated order isn't fully paid. Use the event handler to request payment methods for a new payment:<\/p>\n<pre><code class=\"language-js\">const checkout = await AdyenCheckout({\n  \/\/ core configuration\n  onPaymentMethodsRequest: async (data, { resolve, reject }) =&gt; {\n\n    const paymentMethods = await getPaymentMethods({\n      amount,\n      shopperLocale: data.locale,\n      order: data.order,\n    });\n\n    resolve(paymentMethods);\n  },\n});<\/code><\/pre>\n<div class=\"notices green\">\n<p>The <code>onPaymentMethodsRequest<\/code> event is only evoked in the <a href=\"\/pt\/online-payments\/build-your-integration#advanced-flow-three-api-requests\">Advanced flow<\/a>, as you do not need to request payment methods yourself in the Sessions flow.<\/p>\n<\/div>\n<h3><code>onError<\/code><\/h3>\n<p>The <code>onError<\/code> callback now returns:<\/p>\n<ul>\n<li>an error object that contains details about the error<\/li>\n<li>a reference to the payment method component for which the error occurs<\/li>\n<\/ul>\n<h2 id=\"upgrade-your-styling\">Step 6: Upgrade your styling<\/h2>\n<p>Starting from v6.0.0, we use CSS custom properties to give you more fine-grained control over Drop-in and Components' look and feel.<\/p>\n<p>For an overview of all available CSS variables, see <a href=\"https:\/\/github.com\/Adyen\/adyen-web?tab=readme-ov-file#where-do-we-define-those-css-variables-and-what-is-the-default-value\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">our GitHub repository<\/a>.<\/p>\n<p>If you previously added your own styles to Components, make sure that these styles are being applied, because this version introduces different class names and DOM structures.<\/p>\n<div class=\"notices green\">\n<p>Although we recommend you use CSS custom properties to style your Drop-in and Components, you can still override the CSS class names as before.<\/p>\n<\/div>\n<h3 id=\"overriding-styles\">Overriding styles with custom properties<\/h3>\n<p>You can customize elements that are not inside an iFrame, by overriding the styles:<\/p>\n<ol>\n<li>Create a CSS file <code>override.css<\/code>, with the <a href=\"https:\/\/github.com\/Adyen\/adyen-web?tab=readme-ov-file#where-do-we-define-those-css-variables-and-what-is-the-default-value\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">CSS variables<\/a> you want to style:\n<pre><code class=\"language-css\">:root {\n  --adyen-sdk-color-background-secondary: #f7f7f8;\n}<\/code><\/pre><\/li>\n<li>Import the <code>override.css<\/code> file after importing the Adyen library's main CSS file:\n<pre><code class=\"language-css\">import '@adyen\/adyen-web\/styles\/adyen.css';\nimport '.\/override.css';<\/code><\/pre><\/li>\n<\/ol>\n<h3 id=\"upgrade-placeholder-texts\">Upgrade placeholder texts<\/h3>\n<p>Placeholders are no longer added by default. To enhance the accessibility and UX, they are replaced with permanently visible contextual elements, which are shown below input fields.<\/p>\n<p>However, you can still add placeholder text to input fields. Placeholder texts are no longer part of the <code>translations<\/code> object, but part of the payment method configuration, as the placeholder texts are specific to payment methods.<\/p>\n<p>For example, to upgrade the placeholder text for the card number in the Card Component:<\/p>\n\n<div id=\"tabQYayl\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Drop-in&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Placeholders for cards in Drop-in&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const dropin = new Dropin({\\\\n    paymentMethodsConfiguration: {\\\\n        card: {\\\\n            placeholders: { cardNumber: &#039;Enter your card number&#039; }\\\\n        }\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;placeholder-drop-in&quot;,&quot;oldTabId&quot;:&quot;placeholder-drop-in_1&quot;,&quot;relation&quot;:&quot;&quot;},{&quot;title&quot;:&quot;Card Component&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Placeholders in Card Component&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const card = new Card(checkout, {\\\\n    placeholders: { cardNumber: &#039;Enter your card number&#039; }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;placeholder-component&quot;,&quot;oldTabId&quot;:&quot;placeholder-component_2&quot;,&quot;relation&quot;:&quot;&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"upgrade-express-payment-methods\">Step 7: (Optional) upgrade your express payment methods<\/h2>\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=\"#apple-pay\">\n                                    <h3 class=\"adl-accordion__title\">Apple Pay<\/h3>\n                            <\/div>\n        <\/div>\n        <div role=\"region\" class=\"adl-accordion__content\">\n            \n<h4>Express<\/h4>\n<p>The event handlers <code>onShippingContactSelected()<\/code> and <code>onShippingMethodSelected()<\/code> now work only when the Apple Pay Component configuration <code>isExpress<\/code> is set to <strong>true<\/strong>.<\/p>\n<h5><code>onAuthorized<\/code><\/h5>\n<p>This event is now triggered before the <code>onSubmit<\/code> event, and must be resolved or rejected to continue the payment flow. <code>onAuthorized<\/code> returns an object with the <code>authorizedEvent<\/code> (raw data from Apple Pay) along with the formatted <code>billingAddress<\/code> and <code>deliveryAddress<\/code>.<\/p>\n<p>Create an <code>onAuthorized<\/code> event handler to implement checks before continuing the payment flow:<\/p>\n<pre><code class=\"language-js\">const applepay = new ApplePay(checkout, {\n  onAuthorized({ authorizedEvent, billingAddress, deliveryAddress }, actions) {\n   if (\/* Your checks based on the raw data, billing and shipping address *\/) actions.resolve();\n   else actions.reject();\n  },\n});<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\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=\"#google-pay\">\n                                    <h3 class=\"adl-accordion__title\">Google Pay<\/h3>\n                            <\/div>\n        <\/div>\n        <div role=\"region\" class=\"adl-accordion__content\">\n            \n<ul>\n<li>The <code>isAvailable()<\/code> method does not return a boolean flag anymore. It now works same as <a href=\"\/pt\/payment-methods\/apple-pay\/web-component\/#step-3-mount-the-component\">Apple Pay's <code>isAvailable()<\/code><\/a>.<\/li>\n<li>The event handler <code>onPaymentDataChanged()<\/code> now works only when the Google Pay Component configuration <code>isExpress<\/code> is set to <strong>true<\/strong>.<\/li>\n<\/ul>\n<h5><code>onAuthorized<\/code><\/h5>\n<p>This event is now triggered before the <code>onSubmit<\/code> event, and must be resolved or rejected to continue the payment flow. <code>onAuthorized<\/code> returns an object with the <code>authorizedEvent<\/code> (raw data from Google Pay) along with the formatted <code>billingAddress<\/code> and `deliveryAddress).<\/p>\n<p>Create an <code>onAuthorized<\/code> event handler to implement checks before continuing the payment flow:<\/p>\n<pre><code class=\"language-js\">const googlepay = new GooglePay(checkout, {\n  onAuthorized({ authorizedEvent, billingAddress, deliveryAddress }, actions) {\n   if (\/* Your checks based on the raw data, billing and shipping address *\/) actions.resolve();\n   else actions.reject();\n  },\n});<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\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=\"#pay-pal\">\n                                    <h3 class=\"adl-accordion__title\">PayPal<\/h3>\n                            <\/div>\n        <\/div>\n        <div role=\"region\" class=\"adl-accordion__content\">\n            \n<ul>\n<li>The <code>onShopperDetails(shopperDetails, rawData, actions)<\/code> event handler is renamed to <code>onAuthorized({authorizedEvent, billingAddress, deliveryAddress}, actions)<\/code>.<\/li>\n<li>The <code>onShippingChange()<\/code> event handler is no longer supported. Implement <a href=\"\/pt\/payment-methods\/paypal\/web-component\/express-checkout\/#step-4-handle-delivery-address-changes\">\n  <code>onShippingAddressChange()<\/code>\n<\/a> and <a href=\"\/pt\/payment-methods\/paypal\/web-component\/express-checkout\/#handle-delivery-method-changes-sessions\">\n  <code>onShippingOptionsChange()<\/code>\n<\/a> instead.<\/li>\n<\/ul>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h2 id=\"upgrade-giving\">Step 8: (Optional) upgrade your Giving integration<\/h2>\n<p>From v6 onwards, your Adyen Giving integration must use the <a href=\"\/pt\/online-payments\/donations\/campaign-manager-web-component\/\">Giving Campaign Manager Component<\/a>.<\/p>\n<h2 id=\"upgrade-partial-payments\">Step 9: (Optional) upgrade partial payments in Advanced flow<\/h2>\n<p>If you use the <a href=\"\/pt\/online-payments\/build-your-integration\/#advanced-flow-three-api-requests\">Advanced flow<\/a> and process <a href=\"\/pt\/online-payments\/partial-payments\/\">partial payments<\/a>, make the following change.<\/p>\n<p>Previously, you initiated 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> call from your <code>onSubmit()<\/code> or <code>onAdditionalDetails()<\/code> event handlers to update the payment methods for the remaining amount to be paid. From v6 onwards, we introduce a new event handler named <a href=\"#onordercreated-and-onpaymentmethodsrequest\">\n  <code>onPaymentMethodsRequest()<\/code>\n<\/a> for this use case.<\/p>\n<p>To use it, pass the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments#request-order\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">order<\/a> from the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a> call to the <code>action.resolve()<\/code> method in your <code>onSubmit()<\/code> or <code>onAdditionalDetails()<\/code> event handler:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"''\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const checkout = await AdyenCheckout({\\n  onSubmit: async (state, component, actions) =&gt; {\\n    try {\\n      const {\\n        action,\\n        order,\\n        resultCode\\n      } = await makePayment(state.data);\\n\\n      if (!resultCode) actions.reject();\\n\\n      actions.resolve({\\n        resultCode,\\n        action,\\n        order,\\n      });\\n    } catch (error) {\\n      console.error('An error occured in the onSubmit() event handler:', error);\\n      actions.reject();\\n    }\\n  },\\n\\n  onPaymentMethodsRequest: async (data, actions) =&gt; {\\n    \\\/\\\/ Merchant custom implementation to fetch payment methods\\n    const paymentMethods = fetchPaymentMethods(data);\\n    actions.resolve(paymentMethods);\\n  },\\n});&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>","url":"https:\/\/docs.adyen.com\/pt\/online-payments\/upgrade-your-integration\/upgrade-to-web-v6\/from-v4","articleFields":{"description":"Make the changes required to upgrade from Web Drop-in\/Components v4.x.x to v6.x.x.","feedback_component":false},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/online-payments\/upgrade-your-integration\/upgrade-to-web-v6\/from-v4","title":"Upgrade to Adyen Web v6","content":"\nBenefits to upgradingRead our release notes to learn about the benefits of upgrading.\n\nTo upgrade from Web Drop-in\/Components v4.x.x to v6.x.x, complete the following steps.\n\nIf you are upgrading from a different version than v4, you need to follow a different upgrade guide:\n\nFrom v5.x.x to v6.x.x.\nFrom v3.x.x to v6.x.x.\n\n\nRequired API version\nUsing Web Drop-in\/Components v6.0.0 requires Checkout API v69 or later.\nStep 1: Use the new package\n\n\n    \n        \n        \n    \n\n\nStep 2: Upgrade import statements\n\n\n    \n        \n        \n    \n\n\nStep 3: Upgrade your configuration\nMake the following changes to your configuration properties:\n\ncountryCode is now a mandatory configuration property. Set it during the AdyenCheckout initialization.\n\nIf you use the Sessions flow, you can also set countryCode in the  \/sessions request.\n\nThe setStatusAutomatically property is no longer used. To disable the Drop-in animation, set disableFinalAnimation to true.\nYou can no longer set installmentOptions during the AdyenCheckout instantiation. Set it directly in the Card configuration instead.\nThe showBrandsUnderCardNumber property is no longer used. Upgrade your code accordingly.\nThe showFormInstruction property is no longer used. Upgrade your code accordingly.\nIf you integrate with the custom card component, use the onValidationError() event listener to access the field errors.\n\nStep 4: Upgrade creating an instance\nIn earlier versions of Drop-in\/Components, creating an instance of a Component or the Drop-in used the AdyenCheckout.create() method. We've upgraded this to use a constructor function instead.\n\n\n    \n        \n        \n    \n\n\nStep 5: Upgrade your event handlers\nIn v6, we're introducing changes to several of the library's event handlers:\nonValid\nThe onValid() event listener is no longer used. Remove it from your configuration.\nonSubmit and onAdditionalDetails\nThese events handlers now have access to the new actions parameter, which lets you:\n\nContinue the payment flow: actions.resolve(). Call actions.resolve() and pass the resultCode, also when the payment is unsuccessful.\nStop the payment flow: actions.reject(). Stop the payment flow only in the following cases:\n\nWhen your server's request to Adyen's API fails.\nWhen you experience network connection issues.\n\n\nUse the actions object to manage the payment flow, for example:\nconst checkout = await AdyenCheckout({\n  \/\/ Insert your global configuration here\n  onSubmit: async (state, component, actions) =&gt; {\n    try {\n      const { action, order, resultCode, donationToken } = await makePayment(state.data);\n\n      if (!resultCode) actions.reject();\n\n      actions.resolve({\n        resultCode,\n        action,\n        order,\n        donationToken\n      });\n    } catch (error) {\n      actions.reject();\n    }\n  },\n});\nonPaymentCompleted\nThis event now works both in the Sessions Flow and Advanced Flow.\nThis event is no longer triggered for failed payments. For failed payments, we now use the \n  onPaymentFailed\n event handler instead.\nOnce this event is triggered, initiate the successful transaction flow on your web page.\nonPaymentFailed\nThis is a new event, which is triggered when a payment fails. Previously, this event was part of onPaymentCompleted.\nThis event is triggered when the resultCode of a payment is Cancelled, Error, or Refused.\nOnce this event is triggered, initiate the failed transaction flow on your web page.\nonOrderCreated and onPaymentMethodsRequest\nThese events are used for partial payments.\nonOrderCreated is renamed to onOrderUpdated. Upgrade your codebase accordingly.\nonPaymentMethodsRequest is a new event, which is triggered when a partial payment is made and the associated order isn't fully paid. Use the event handler to request payment methods for a new payment:\nconst checkout = await AdyenCheckout({\n  \/\/ core configuration\n  onPaymentMethodsRequest: async (data, { resolve, reject }) =&gt; {\n\n    const paymentMethods = await getPaymentMethods({\n      amount,\n      shopperLocale: data.locale,\n      order: data.order,\n    });\n\n    resolve(paymentMethods);\n  },\n});\n\nThe onPaymentMethodsRequest event is only evoked in the Advanced flow, as you do not need to request payment methods yourself in the Sessions flow.\n\nonError\nThe onError callback now returns:\n\nan error object that contains details about the error\na reference to the payment method component for which the error occurs\n\nStep 6: Upgrade your styling\nStarting from v6.0.0, we use CSS custom properties to give you more fine-grained control over Drop-in and Components' look and feel.\nFor an overview of all available CSS variables, see our GitHub repository.\nIf you previously added your own styles to Components, make sure that these styles are being applied, because this version introduces different class names and DOM structures.\n\nAlthough we recommend you use CSS custom properties to style your Drop-in and Components, you can still override the CSS class names as before.\n\nOverriding styles with custom properties\nYou can customize elements that are not inside an iFrame, by overriding the styles:\n\nCreate a CSS file override.css, with the CSS variables you want to style:\n:root {\n  --adyen-sdk-color-background-secondary: #f7f7f8;\n}\nImport the override.css file after importing the Adyen library's main CSS file:\nimport '@adyen\/adyen-web\/styles\/adyen.css';\nimport '.\/override.css';\n\nUpgrade placeholder texts\nPlaceholders are no longer added by default. To enhance the accessibility and UX, they are replaced with permanently visible contextual elements, which are shown below input fields.\nHowever, you can still add placeholder text to input fields. Placeholder texts are no longer part of the translations object, but part of the payment method configuration, as the placeholder texts are specific to payment methods.\nFor example, to upgrade the placeholder text for the card number in the Card Component:\n\n\n    \n        \n        \n    \n\n\nStep 7: (Optional) upgrade your express payment methods\n\n    \n    \n        \n            \n            \n                                    Apple Pay\n                            \n        \n        \n            \nExpress\nThe event handlers onShippingContactSelected() and onShippingMethodSelected() now work only when the Apple Pay Component configuration isExpress is set to true.\nonAuthorized\nThis event is now triggered before the onSubmit event, and must be resolved or rejected to continue the payment flow. onAuthorized returns an object with the authorizedEvent (raw data from Apple Pay) along with the formatted billingAddress and deliveryAddress.\nCreate an onAuthorized event handler to implement checks before continuing the payment flow:\nconst applepay = new ApplePay(checkout, {\n  onAuthorized({ authorizedEvent, billingAddress, deliveryAddress }, actions) {\n   if (\/* Your checks based on the raw data, billing and shipping address *\/) actions.resolve();\n   else actions.reject();\n  },\n});\n\n        \n    \n\n\n\n    \n    \n        \n            \n            \n                                    Google Pay\n                            \n        \n        \n            \n\nThe isAvailable() method does not return a boolean flag anymore. It now works same as Apple Pay's isAvailable().\nThe event handler onPaymentDataChanged() now works only when the Google Pay Component configuration isExpress is set to true.\n\nonAuthorized\nThis event is now triggered before the onSubmit event, and must be resolved or rejected to continue the payment flow. onAuthorized returns an object with the authorizedEvent (raw data from Google Pay) along with the formatted billingAddress and `deliveryAddress).\nCreate an onAuthorized event handler to implement checks before continuing the payment flow:\nconst googlepay = new GooglePay(checkout, {\n  onAuthorized({ authorizedEvent, billingAddress, deliveryAddress }, actions) {\n   if (\/* Your checks based on the raw data, billing and shipping address *\/) actions.resolve();\n   else actions.reject();\n  },\n});\n\n        \n    \n\n\n\n    \n    \n        \n            \n            \n                                    PayPal\n                            \n        \n        \n            \n\nThe onShopperDetails(shopperDetails, rawData, actions) event handler is renamed to onAuthorized({authorizedEvent, billingAddress, deliveryAddress}, actions).\nThe onShippingChange() event handler is no longer supported. Implement \n  onShippingAddressChange()\n and \n  onShippingOptionsChange()\n instead.\n\n\n        \n    \n\n\nStep 8: (Optional) upgrade your Giving integration\nFrom v6 onwards, your Adyen Giving integration must use the Giving Campaign Manager Component.\nStep 9: (Optional) upgrade partial payments in Advanced flow\nIf you use the Advanced flow and process partial payments, make the following change.\nPreviously, you initiated the  \/paymentMethods call from your onSubmit() or onAdditionalDetails() event handlers to update the payment methods for the remaining amount to be paid. From v6 onwards, we introduce a new event handler named \n  onPaymentMethodsRequest()\n for this use case.\nTo use it, pass the  order from the  \/payments call to the action.resolve() method in your onSubmit() or onAdditionalDetails() event handler:\n\n    \n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Upgrade your integration","lvl3":"Upgrade to Adyen Web v6","lvl4":"Upgrade to Adyen Web v6"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/online-payments","lvl2":"https:\/\/docs.adyen.com\/pt\/online-payments\/upgrade-your-integration","lvl3":"https:\/\/docs.adyen.com\/pt\/online-payments\/upgrade-your-integration\/upgrade-to-web-v6","lvl4":"\/pt\/online-payments\/upgrade-your-integration\/upgrade-to-web-v6\/from-v4"},"levels":5,"category":"Online Payments","category_color":"green","tags":["Upgrade","Adyen"]}}