{"title":"Best practices for your online payments integration","category":"default","creationDate":1781186417,"content":"<p>Follow these best practices to ensure your standard integration for online payments is secure, performant, and compliant.<\/p>\n<h2>Requirements<\/h2>\n<p>Before you begin, take into account the following requirements, limitations, and preparations.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\">A <a href=\"\/standard\/integration\/drop-in\">standard online payments Drop-in<\/a> integration.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Keep your integration up-to-date<\/h2>\n<p><a href=\"\/online-payments\/upgrade-your-integration#staying-up-to-date\">Staying up-to-date<\/a> on the latest version of Drop-in is crucial for new features, security updates, and compliance.<\/p>\n<h2>Handle web framework re-renders<\/h2>\n<p>Modern <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Frameworks_libraries\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">frameworks<\/a> can re-render UI components, which can cause unexpected behavior in the checkout. To prevent this, initialize <code>AdyenCheckout<\/code> and mount your instance of Drop-in only once, when you are ready to display the payment methods.<\/p>\n<p>Some web frameworks might require some extra attention when using specific approaches.<\/p>\n<ul>\n<li><strong>React.StrictMode<\/strong>: This <a href=\"https:\/\/react.dev\/reference\/react\/StrictMode\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">leads to re-renders and re-executions<\/a> of effects and callbacks. Ensure that <code>AdyenCheckout<\/code> and Drop-in are not initialized multiple times.<\/li>\n<li><strong>Custom hooks<\/strong>: You can encapsulate the initialization of <code>AdyenCheckout<\/code> in a custom hook. If you do, ensure your hook returns the instance of the Drop-in that you mount in your UI. And most importantly, make sure that the mounting is executed only once, in the React component that consumes that hook.<\/li>\n<\/ul>\n<p>For example, when using a custom hook in React, ensure the component is not mounted multiple times on re-renders.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Prevent multiple initializations with React custom hooks'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;javascript&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;import React, { useRef, useEffect } from 'react';\\nimport { useAdyenCheckout } from '.\\\/hooks\\\/useAdyenCheckout; \\\/\\\/ Replace with your hook's path.\\n\\nconst CheckoutPaymentForm = ({ adyenCheckoutProps }) =&gt; {\\n  const container = useRef(null);\\n  const { dropin } = useAdyenCheckout(adyenCheckoutProps);\\n\\n  useEffect(() =&gt; {\\n    \\\/\\\/ Ensure the container and the Drop-in instance are available.\\n    if (container.current &amp;&amp; dropin) {\\n      \\\/\\\/ Mount the Drop-in component to the container element a single time.\\n      \\\/\\\/ Watch out for re-renders and do not let it be mounted multiple times.\\n      dropin.mount(container.current);\\n    }\\n  }, [dropin]);\\n\\n  return &lt;div ref={container} \\\/&gt;;\\n};&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2>Manage Server-Side Rendering (SSR)<\/h2>\n<p>Drop-in depends on browser APIs like <code>window<\/code> and <code>document<\/code>. If you use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/SSR\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">SSR<\/a>, make sure the code that creates an <code>AdyenCheckout<\/code> instance and mounts Drop-in is executed on the client side.<\/p>\n<h2>Securely implement a custom pay button<\/h2>\n<p>If you use a custom pay button in your integration, you need to take a few things into account.<\/p>\n<h3>Prevent multiple submissions<\/h3>\n<p>A shopper can trigger a payment in multiple ways, for example by selecting the <strong>Pay<\/strong> button, or by pressing the <strong>Enter<\/strong> key on their keyboard. To prevent multiple payments for the same order, you must disable your pay button as soon as a payment attempt has been made.<\/p>\n<p>You can detect when the payment flow is triggered by using <code>beforeSubmit<\/code> in your <code>AdyenCheckout<\/code> configuration.<\/p>\n<p>The <code>beforeSubmit<\/code> event is triggered when the shopper selects the pay button.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example of using beforeSubmit to track payment status and prevent multiple payments'\" :id=\"''\" :code-data='[{\"language\":\"javascript\",\"tabTitle\":\"\",\"content\":\"let isPaymentInProgress = false;\\n\\nconst checkout = await AdyenCheckout({\\n  ...\\n  beforeSubmit: (state, component, actions) =&gt; {\\n    \\\/\\\/ If a payment is already in progress, reject the new submission.\\n    if (isPaymentInProgress) {\\n      actions.reject();\\n      return;\\n    }\\n\\n    isPaymentInProgress = true;\\n    actions.resolve(state.data);\\n  }\\n});\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h3>Unsupported payment methods<\/h3>\n<p>The custom pay button is not supported for:<\/p>\n<ul>\n<li>PayPal<\/li>\n<li>Klarna<\/li>\n<li>Click to Pay<\/li>\n<\/ul>\n<p>For these payment methods, you must use the button provided by Drop-in.<\/p>\n<h2>Use HTTPS for your checkout<\/h2>\n<p>To protect sensitive payment data, host your Adyen checkout on a page that uses <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/HTTPS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">HTTPS<\/a>.<\/p>\n<p>In your live environment, you need to use HTTPS. It encrypts the connection between the shopper browser and your server, which prevents data interception and tampering. If you do not use HTTPS in production, it leads to security warnings and can cause payments to fail.<\/p>\n<p>For local development and testing, you can use HTTP. However, make sure you switch to HTTPS before you go live. Read about <a href=\"\/online-payments\/go-live-checklist#end-to-end-testing\">end-to-end online payments testing<\/a> for more information.<\/p>\n<h2>Avoid &lt;iframe> elements<\/h2>\n<p>We do not recommend integrating your checkout in an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/iframe\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">&lt;iframe&gt;<\/a> due to potential complexities. When an &lt;iframe> is hosted on a different domain than its parent, redirect payment flows do not work. This is because the &lt;iframe> cannot redirect when the parent is a different domain. This restriction leads to failed transactions and a poor user experience. Some payment methods may also behave differently or require a specific configuration when used in an &lt;iframe>.<\/p>\n<p>If you must use an &lt;iframe>, host it on the same domain as the parent page.<\/p>\n<h2>Avoid WebViews<\/h2>\n<p>For native mobile apps, we recommend that you do not use <a href=\"https:\/\/en.wikipedia.org\/wiki\/WebView\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">WebViews<\/a> to display the checkout.<\/p>\n<p>WebViews are less secure and functional than native components and can cause performance issues, especially with payment methods that require redirects.<\/p>\n<p>Instead, you should implement native components, for example:<\/p>\n<ul>\n<li>Custom Tabs for Android<\/li>\n<li>SFSafariViewController for iOS.<\/li>\n<\/ul>\n<h2>Ensure browser compatibility<\/h2>\n<p>We designed Drop-in to work seamlessly with recent versions of all major browsers. To ensure the highest security standards and optimal performance, we focus on modern browsers that receive regular security updates.<\/p>\n<h3>Supported desktop browsers<\/h3>\n<table>\n<thead>\n<tr>\n<th>Browser<\/th>\n<th>Version<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/www.google.com\/chrome\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Chrome<\/a><\/td>\n<td>80 or later<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/www.apple.com\/safari\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Safari<\/a><\/td>\n<td>15.4 or later<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/www.firefox.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Firefox<\/a><\/td>\n<td>74 or later<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/www.microsoft.com\/en-us\/edge\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Microsoft Edge<\/a><\/td>\n<td>80 or later<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/www.opera.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Opera<\/a><\/td>\n<td>67 or later<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Supported mobile browsers<\/h3>\n<table>\n    <tr>\n        <th>Platform<\/th>\n        <th>Browser<\/th>\n        <th>Version requirement<\/th>\n    <\/tr>\n    <tr>\n        <td>iOS<\/td>\n        <td>Safari or any browser using <a href=\"https:\/\/developer.apple.com\/documentation\/webkit\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">WebKit<\/a><\/td>\n        <td><a href=\"https:\/\/support.apple.com\/en-us\/108051\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">iOS 15.4<\/a> or later<\/td>\n    <\/tr>\n    <tr>\n        <td rowspan=\"2\">Android<\/td>\n        <td><a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.android.chrome\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Chrome<\/a><\/td>\n        <td>80 or later<\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"https:\/\/www.samsung.com\/us\/apps\/samsung-internet\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Samsung Internet<\/a><\/td>\n        <td>12 or later<\/td>\n    <\/tr>\n<\/table>\n<h2>Understand cookie usage<\/h2>\n<p>Drop-in may set one cookie, <strong>_RP_UID<\/strong>, which is <a href=\"\/risk-management\/fraud-data-collection\/#data-collection-data\">generated by our internal risk management module<\/a>. This module is enabled by default and helps identify suspicious browsing or purchasing patterns. We do not recommend disabling it.<br \/>\nOther cookies, from adyen.com, may be present if you previously visited our websites and accepted cookies. To see only the cookies used by your integration, clear your browser data or use an incognito window for testing.<\/p>\n<h2>Manage possible interactions with browser extensions<\/h2>\n<p>We do not take responsibility for how Drop-in interacts with browser extensions like ad blockers, cookie managers, or password managers. An improperly configured extension can block an &lt;iframe> or other elements required for payment methods to function correctly.<\/p>\n<h2>Enhance your integration with Adyen Uplift<\/h2>\n<p>We recommend that you use features of <a href=\"\/uplift\/\">Adyen Uplift<\/a> in your integration to increase payment conversion, simplify fraud management, and reduce the cost of payments.<\/p>\n<p>Adyen Uplift looks at your company's data, how your account is set up, which features and products you use, and which optimizations could make it even better. For a standard integration, you can keep the default Adyen Uplift settings. Periodically check the <a href=\"\/uplift#uplift-dashboards\">recommendations<\/a> to find out if there are any potential opportunities to improve, such as adding a payment method.<\/p>\n<h2 id=\"client-side-resources\">Manage client-side resources<\/h2>\n<p>There are two ways to load the client-side resources for Web Drop-in:<\/p>\n<ul>\n<li><div data-component-wrapper=\"tag\">\n    <tag :variant=&quot;success&quot;>\n        Recommended\n    <\/tag>\n<\/div>\n Load through the <a href=\"https:\/\/www.npmjs.com\/package\/@adyen\/adyen-web\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adyen Web npm package<\/a>.<\/li>\n<li><a href=\"#embed-script-and-stylesheet\">Embed the Adyen Web script and stylesheet into your HTML file<\/a>.<\/li>\n<\/ul>\n<h3 id=\"embed-script-and-stylesheet\">Embed the Adyen Web script and stylesheet into your HTML file<\/h3>\n<p>When embedding the script and stylesheet, make sure that the URL region matches with the region of your <a href=\"\/development-resources\/live-endpoints\">live endpoints<\/a> and the <code>environment<\/code> you configured for Drop-in in your integration.<\/p>\n<p>We also recommend to use <a href=\"#implement-subresource-integrity-hashes\">Subresource Integrity hashes<\/a> to ensure security.<\/p>\n<table>\n<thead>\n<tr>\n<th>Environment<\/th>\n<th>URL<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Test<\/td>\n<td>https&#58;\/\/checkoutshopper-<strong>test<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.js <br> https&#58;\/\/checkoutshopper-<strong>test<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.css<\/td>\n<\/tr>\n<tr>\n<td>Europe (EU) live<\/td>\n<td>https&#58;\/\/checkoutshopper-<strong>live<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.js <br> https&#58;\/\/checkoutshopper-<strong>live<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.css<\/td>\n<\/tr>\n<tr>\n<td>United States (US) live<\/td>\n<td>https&#58;\/\/checkoutshopper-<strong>live-us<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.js  <br>   https&#58;\/\/checkoutshopper-<strong>live-us<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.css<\/td>\n<\/tr>\n<tr>\n<td>Australia (AU) live<\/td>\n<td>https&#58;\/\/checkoutshopper-<strong>live-au<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.js <br>  https&#58;\/\/checkoutshopper-<strong>live-au<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.css<\/td>\n<\/tr>\n<tr>\n<td>Northeast Asia (NEA) live<\/td>\n<td>https&#58;\/\/checkoutshopper-<strong>live-nea<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.js <br>  https&#58;\/\/checkoutshopper-<strong>live-nea<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.css<\/td>\n<\/tr>\n<tr>\n<td>India (IN) live<\/td>\n<td>https&#58;\/\/checkoutshopper-<strong>live-in<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.js <br>  https&#58;\/\/checkoutshopper-<strong>live-in<\/strong>.cdn.adyen.com\/checkoutshopper\/sdk\/<code>version<\/code>\/adyen.css<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"implement-subresource-integrity-hashes\">Implement Subresource Integrity hashes<\/h4>\n<p>We recommend that you implement <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Subresource_Integrity\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Subresource Integrity (SRI)<\/a> to ensure that the files you are loading from Adyen have not been manipulated or tampered with by malicious actors.<\/p>\n<p>To use the SRI hash, you need to add an <code>integrity<\/code> attribute when specifying <code>&lt;script&gt;<\/code> or <code>&lt;link&gt;<\/code> elements. Browsers will also check for the <code>crossorigin<\/code> attribute to ensure that the origin allows <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CORS\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Cross-Origin Resource Sharing (CORS)<\/a>.  If a browser detects that the file's hash does not match the specified hash, the browser will not load the resource. To know which browsers support SRI, refer to this <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Subresource_Integrity#Browser_compatibility\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">browser compatibility list<\/a>.<\/p>\n<p>Adyen provides the SRI hash that you include as the integrity attribute. You can find the SRI hashes for all versions of our JavaScript and CSS files in our <a href=\"\/online-payments\/release-notes\">release notes<\/a>, under <strong>Updating to this version<\/strong>.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Embed script and stylesheet for v6.33.0'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"&lt;script src=\\\"https:\\\/\\\/checkoutshopper-live.adyen.com\\\/checkoutshopper\\\/sdk\\\/6.33.0\\\/adyen.js\\\"\\n   integrity=\\\"sha384-uMgOOe++KK9JoyxeIxzR7IyT6Ef8pOCVNKC499aRlxfYR1ofL0Ytv3w1WU547KXP\\\"\\n   crossorigin=\\\"anonymous\\\"&gt;&lt;\\\/script&gt;\\n\\n&lt;link rel=\\\"stylesheet\\\"\\n  href=\\\"https:\\\/\\\/checkoutshopper-live.adyen.com\\\/checkoutshopper\\\/sdk\\\/6.33.0\\\/adyen.css\\\"\\n  integrity=\\\"sha384-Kxk+HDAUmRogabIUxszUgK7HjuEtcwCqxw8ecoDrF8WxjrfcVlVaRSImp\\\/\\\/bEp8W\\\"\\n  crossorigin=\\\"anonymous\\\"&gt;\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2>Test your integration<\/h2>\n<p>When you have a working online payments integration, test:<\/p>\n<ul>\n<li>In a <a href=\"\/online-payments\/go-live-checklist#end-to-end-testing\">secure context<\/a><\/li>\n<li>On real mobile devices<\/li>\n<\/ul>\n<p>For more information, read:<\/p>\n<ul>\n<li><a href=\"\/online-payments\/go-live-checklist#end-to-end-testing\">End-to-end testing documentation<\/a>, providing more general testing advice.<\/li>\n<li><a href=\"\/development-resources\/testing\/payments-and-modifications\/\">Testing payments and modifications documentation<\/a>, listing scenarios you can test your integration on.<\/li>\n<\/ul>\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/standard\/integration\/drop-in\/optional-drop-in-configuration\"\n                        target=\"_self\"\n                        >\n                    Drop-in optional configuration\n                <\/a><\/li><li><a href=\"\/standard\/integration\/drop-in\/optional-server-configuration\"\n                        target=\"_self\"\n                        >\n                    Optional server configuration\n                <\/a><\/li><li><a href=\"\/standard\/integration\/drop-in\/customize-checkout\"\n                        target=\"_self\"\n                        >\n                    Customize the checkout experience\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/standard\/integration\/drop-in\/best-practices","articleFields":{"description":"Follow these best practices to get the most out of your integration.","type":"page","feedback_component":true,"filters_component":false,"decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/standard\/integration\/drop-in\/best-practices","title":"Best practices for your online payments integration","content":"Follow these best practices to ensure your standard integration for online payments is secure, performant, and compliant.\nRequirements\nBefore you begin, take into account the following requirements, limitations, and preparations.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nA standard online payments Drop-in integration.\n\n\n\nKeep your integration up-to-date\nStaying up-to-date on the latest version of Drop-in is crucial for new features, security updates, and compliance.\nHandle web framework re-renders\nModern frameworks can re-render UI components, which can cause unexpected behavior in the checkout. To prevent this, initialize AdyenCheckout and mount your instance of Drop-in only once, when you are ready to display the payment methods.\nSome web frameworks might require some extra attention when using specific approaches.\n\nReact.StrictMode: This leads to re-renders and re-executions of effects and callbacks. Ensure that AdyenCheckout and Drop-in are not initialized multiple times.\nCustom hooks: You can encapsulate the initialization of AdyenCheckout in a custom hook. If you do, ensure your hook returns the instance of the Drop-in that you mount in your UI. And most importantly, make sure that the mounting is executed only once, in the React component that consumes that hook.\n\nFor example, when using a custom hook in React, ensure the component is not mounted multiple times on re-renders.\n\n    \n\nManage Server-Side Rendering (SSR)\nDrop-in depends on browser APIs like window and document. If you use SSR, make sure the code that creates an AdyenCheckout instance and mounts Drop-in is executed on the client side.\nSecurely implement a custom pay button\nIf you use a custom pay button in your integration, you need to take a few things into account.\nPrevent multiple submissions\nA shopper can trigger a payment in multiple ways, for example by selecting the Pay button, or by pressing the Enter key on their keyboard. To prevent multiple payments for the same order, you must disable your pay button as soon as a payment attempt has been made.\nYou can detect when the payment flow is triggered by using beforeSubmit in your AdyenCheckout configuration.\nThe beforeSubmit event is triggered when the shopper selects the pay button.\n\n    \n\nUnsupported payment methods\nThe custom pay button is not supported for:\n\nPayPal\nKlarna\nClick to Pay\n\nFor these payment methods, you must use the button provided by Drop-in.\nUse HTTPS for your checkout\nTo protect sensitive payment data, host your Adyen checkout on a page that uses HTTPS.\nIn your live environment, you need to use HTTPS. It encrypts the connection between the shopper browser and your server, which prevents data interception and tampering. If you do not use HTTPS in production, it leads to security warnings and can cause payments to fail.\nFor local development and testing, you can use HTTP. However, make sure you switch to HTTPS before you go live. Read about end-to-end online payments testing for more information.\nAvoid &lt;iframe> elements\nWe do not recommend integrating your checkout in an &lt;iframe&gt; due to potential complexities. When an &lt;iframe> is hosted on a different domain than its parent, redirect payment flows do not work. This is because the &lt;iframe> cannot redirect when the parent is a different domain. This restriction leads to failed transactions and a poor user experience. Some payment methods may also behave differently or require a specific configuration when used in an &lt;iframe>.\nIf you must use an &lt;iframe>, host it on the same domain as the parent page.\nAvoid WebViews\nFor native mobile apps, we recommend that you do not use WebViews to display the checkout.\nWebViews are less secure and functional than native components and can cause performance issues, especially with payment methods that require redirects.\nInstead, you should implement native components, for example:\n\nCustom Tabs for Android\nSFSafariViewController for iOS.\n\nEnsure browser compatibility\nWe designed Drop-in to work seamlessly with recent versions of all major browsers. To ensure the highest security standards and optimal performance, we focus on modern browsers that receive regular security updates.\nSupported desktop browsers\n\n\n\nBrowser\nVersion\n\n\n\n\nChrome\n80 or later\n\n\nSafari\n15.4 or later\n\n\nFirefox\n74 or later\n\n\nMicrosoft Edge\n80 or later\n\n\nOpera\n67 or later\n\n\n\nSupported mobile browsers\n\n    \n        Platform\n        Browser\n        Version requirement\n    \n    \n        iOS\n        Safari or any browser using WebKit\n        iOS 15.4 or later\n    \n    \n        Android\n        Chrome\n        80 or later\n    \n    \n        Samsung Internet\n        12 or later\n    \n\nUnderstand cookie usage\nDrop-in may set one cookie, _RP_UID, which is generated by our internal risk management module. This module is enabled by default and helps identify suspicious browsing or purchasing patterns. We do not recommend disabling it.\nOther cookies, from adyen.com, may be present if you previously visited our websites and accepted cookies. To see only the cookies used by your integration, clear your browser data or use an incognito window for testing.\nManage possible interactions with browser extensions\nWe do not take responsibility for how Drop-in interacts with browser extensions like ad blockers, cookie managers, or password managers. An improperly configured extension can block an &lt;iframe> or other elements required for payment methods to function correctly.\nEnhance your integration with Adyen Uplift\nWe recommend that you use features of Adyen Uplift in your integration to increase payment conversion, simplify fraud management, and reduce the cost of payments.\nAdyen Uplift looks at your company's data, how your account is set up, which features and products you use, and which optimizations could make it even better. For a standard integration, you can keep the default Adyen Uplift settings. Periodically check the recommendations to find out if there are any potential opportunities to improve, such as adding a payment method.\nManage client-side resources\nThere are two ways to load the client-side resources for Web Drop-in:\n\n\n    \n        Recommended\n    \n\n Load through the Adyen Web npm package.\nEmbed the Adyen Web script and stylesheet into your HTML file.\n\nEmbed the Adyen Web script and stylesheet into your HTML file\nWhen embedding the script and stylesheet, make sure that the URL region matches with the region of your live endpoints and the environment you configured for Drop-in in your integration.\nWe also recommend to use Subresource Integrity hashes to ensure security.\n\n\n\nEnvironment\nURL\n\n\n\n\nTest\nhttps&#58;\/\/checkoutshopper-test.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.js  https&#58;\/\/checkoutshopper-test.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.css\n\n\nEurope (EU) live\nhttps&#58;\/\/checkoutshopper-live.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.js  https&#58;\/\/checkoutshopper-live.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.css\n\n\nUnited States (US) live\nhttps&#58;\/\/checkoutshopper-live-us.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.js     https&#58;\/\/checkoutshopper-live-us.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.css\n\n\nAustralia (AU) live\nhttps&#58;\/\/checkoutshopper-live-au.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.js   https&#58;\/\/checkoutshopper-live-au.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.css\n\n\nNortheast Asia (NEA) live\nhttps&#58;\/\/checkoutshopper-live-nea.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.js   https&#58;\/\/checkoutshopper-live-nea.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.css\n\n\nIndia (IN) live\nhttps&#58;\/\/checkoutshopper-live-in.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.js   https&#58;\/\/checkoutshopper-live-in.cdn.adyen.com\/checkoutshopper\/sdk\/version\/adyen.css\n\n\n\nImplement Subresource Integrity hashes\nWe recommend that you implement Subresource Integrity (SRI) to ensure that the files you are loading from Adyen have not been manipulated or tampered with by malicious actors.\nTo use the SRI hash, you need to add an integrity attribute when specifying &lt;script&gt; or &lt;link&gt; elements. Browsers will also check for the crossorigin attribute to ensure that the origin allows Cross-Origin Resource Sharing (CORS).  If a browser detects that the file's hash does not match the specified hash, the browser will not load the resource. To know which browsers support SRI, refer to this browser compatibility list.\nAdyen provides the SRI hash that you include as the integrity attribute. You can find the SRI hashes for all versions of our JavaScript and CSS files in our release notes, under Updating to this version.\n\n    \n\nTest your integration\nWhen you have a working online payments integration, test:\n\nIn a secure context\nOn real mobile devices\n\nFor more information, read:\n\nEnd-to-end testing documentation, providing more general testing advice.\nTesting payments and modifications documentation, listing scenarios you can test your integration on.\n\nSee also\n\n\n                    Drop-in optional configuration\n                \n                    Optional server configuration\n                \n                    Customize the checkout experience\n                \n","type":"page","locale":"en","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Standard payments integration","lvl2":"Build your integration","lvl3":"Drop-in","lvl4":"Best practices for your online payments integration"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/standard","lvl2":"https:\/\/docs.adyen.com\/standard\/integration","lvl3":"https:\/\/docs.adyen.com\/standard\/integration\/drop-in","lvl4":"\/standard\/integration\/drop-in\/best-practices"},"levels":5,"category":"","category_color":"","tags":["practices","online","payments","integration"]}}