{"title":"Our recommendation","category":"default","creationDate":1776961627,"content":"<p><a href=\"\/online-payments\/interactive-guide\/question-4\" class=\"adl-button adl-button--secondary\">Back to question<\/a><\/p>\n<h2>Components<\/h2>\n<p>Each Component renders a pre-built form for a payment method.<\/p>\n<p>You can customize the user interface of each Component, allowing you to match the styling to your brand, and the language to your customer.<\/p>\n<p>Adding payment methods to your integration requires you to enable them in the Adyen Customer Area, then configure the Component in your website or app.<\/p>\n<p>You configure each payment method separately, so you can choose how and where payment methods are presented in your website or app. For example, you can present payment methods in columns, tabs, or on separate pages or screens.<\/p>\n\n<div id=\"tabMUKc0\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Cards&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;The following payment form is our Card Component, which can be used to collect credit and debit card details from your shopper:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;component-background\\&quot;&gt;&lt;div id=\\&quot;card-container\\&quot;&gt;&lt;\\\/div&gt;&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:null,&quot;oldTabId&quot;:&quot;cards_0_1&quot;,&quot;relation&quot;:&quot;&quot;},{&quot;title&quot;:&quot;SEPA Direct Debit&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;The following payment form is our SEPA Direct Debit Component:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;component-background\\&quot;&gt;&lt;div id=\\&quot;sepa-container\\&quot;&gt;&lt;\\\/div&gt;&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:null,&quot;oldTabId&quot;:&quot;sepa_direct_debit_1_2&quot;,&quot;relation&quot;:&quot;&quot;},{&quot;title&quot;:&quot;iDEAL&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;The following payment form is our iDEAL Component:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;component-background\\&quot;&gt;&lt;div id=\\&quot;ideal-container\\&quot;&gt;&lt;\\\/div&gt;&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:null,&quot;oldTabId&quot;:&quot;ideal_2_3&quot;,&quot;relation&quot;:&quot;&quot;}]\"\n            :should-update-when-url-changes='false'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<script src=\"https:\/\/checkoutshopper-test.adyen.com\/checkoutshopper\/sdk\/3.11.0\/adyen.js\" integrity=\"sha384-sR3tFyFWM09aya\/mpkzB0fV4t+g6b4i64izXXy+lSSTmrgL\/9\/cdNFURV5T9gUbI\" crossorigin=\"anonymous\"><\/script>\n<script src=\"\/online-payments\/interactive-guide\/components\/ui-config.js\"><\/script>\n<script src=\"\/online-payments\/interactive-guide\/components\/custom-ui-components.js\"><\/script>\n<link href=\"\/online-payments\/interactive-guide\/components\/custom-component-default.css\" rel=\"stylesheet\">\n<h3>Integrate Components<\/h3>\n<style>\n    .fingerpost__link img.icon {\n        padding: 24px 18px 0 0;\n        margin-bottom: 12px;\n        margin-top: -24px;\n    }\n    .fingerpost {\n      margin-top: 24px;\n    }\n<\/style>\n<p>Ready to integrate <strong>Components<\/strong>? Select a platform below to start building your integration.<\/p>\n<div class=\"fingerpost output-inline\">\n<a href=\"\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components\" class=\"fingerpost__link fingerpost__link--small\" style=\"overflow:hidden;\" target=\"_self\"><div class=\"fingerpost__body\"><p><img alt=\"\" class=\"icon\" src=\"\/user\/pages\/docs\/02.online-payments\/01.interactive-guide\/components\/global.svg?decoding=auto&amp;fetchpriority=auto\" \/><span style=\"font-size: 18px;\"><strong>Web<\/strong><\/span><br \/>\nIntegrate Components into your website.<\/p><\/div><\/a><a href=\"\/online-payments\/build-your-integration\/sessions-flow?platform=iOS&amp;integration=Components\" class=\"fingerpost__link fingerpost__link--small\" style=\"overflow:hidden;\" target=\"_self\"><div class=\"fingerpost__body\"><p><img alt=\"\" class=\"icon\" src=\"\/user\/pages\/docs\/02.online-payments\/01.interactive-guide\/components\/apple-logo.svg?decoding=auto&amp;fetchpriority=auto\" \/><span style=\"font-size: 18px;\"><strong>iOS<\/strong><\/span><br \/>\nIntegrate Components into your iOS app.<\/p><\/div><\/a><a href=\"\/online-payments\/build-your-integration\/sessions-flow?platform=Android&amp;integration=Components\" class=\"fingerpost__link fingerpost__link--small\" style=\"overflow:hidden;\" target=\"_self\"><div class=\"fingerpost__body\"><p><img alt=\"\" class=\"icon\" src=\"\/user\/pages\/docs\/02.online-payments\/01.interactive-guide\/components\/android-logo.svg?decoding=auto&amp;fetchpriority=auto\" \/><span style=\"font-size: 18px;\"><strong>Android<\/strong><\/span><br \/>\nIntegrate Components into your Android app.<\/p><\/div><\/a><\/div>\n","url":"https:\/\/docs.adyen.com\/online-payments\/interactive-guide\/components","articleFields":{"description":"Based on your answers, this is the integration type we recommend.","robots":"noindex,nofollow","process":{"markdown":true,"twig":true},"twig_first":true},"algolia":{"url":"https:\/\/docs.adyen.com\/online-payments\/interactive-guide\/components","title":"Our recommendation","content":"Back to question\nComponents\nEach Component renders a pre-built form for a payment method.\nYou can customize the user interface of each Component, allowing you to match the styling to your brand, and the language to your customer.\nAdding payment methods to your integration requires you to enable them in the Adyen Customer Area, then configure the Component in your website or app.\nYou configure each payment method separately, so you can choose how and where payment methods are presented in your website or app. For example, you can present payment methods in columns, tabs, or on separate pages or screens.\n\n\n    \n        \n        \n    \n\n\n\n\n\n\nIntegrate Components\n\n    .fingerpost__link img.icon {\n        padding: 24px 18px 0 0;\n        margin-bottom: 12px;\n        margin-top: -24px;\n    }\n    .fingerpost {\n      margin-top: 24px;\n    }\n\nReady to integrate Components? Select a platform below to start building your integration.\n\nWeb\nIntegrate Components into your website.iOS\nIntegrate Components into your iOS app.Android\nIntegrate Components into your Android app.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Which integration should I use?","lvl3":"Our recommendation"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/interactive-guide","lvl3":"\/online-payments\/interactive-guide\/components"},"levels":4,"category":"Online Payments","category_color":"green","tags":["recommendation"]},"articleFiles":{"android-logo.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/01.interactive-guide\/components\/android-logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>","apple-logo.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/01.interactive-guide\/components\/apple-logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>","custom-component-default.css":"<p alt=\"\">custom-component-default.css<\/p>","custom-ui-components.js":"<p alt=\"\">custom-ui-components.js<\/p>","global.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/01.interactive-guide\/components\/global.svg?decoding=auto&amp;fetchpriority=auto\" \/>","ui-config.js":"<p alt=\"\">ui-config.js<\/p>"}}
