{"title":"Onboarding components","category":"default","creationDate":1688562840,"content":"<div class=\"notices green\">\n<p>The Onboarding components are only compatible with the legal entities created with v3 or v4 of the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/legalentity\/latest\/overview\" class=\" external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Legal Entity Management API<\/a>.<\/p>\n<\/div>\n<p>To onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers Onboarding components. You can integrate these components into your marketplace\u2019s UI to let your users enter their data. The component then uses the entered data to create the relevant resource. This means you do not need to implement the API call to create the resource yourself.<\/p>\n<p>We recommend using the Onboarding components in your <a href=\"\/pt\/marketplaces\/onboard-users\">API-only onboarding flow<\/a> to reduce engineering efforts and speed up implementation. It is important to note that the Onboarding components only cover certain functionality, and you still need to implement API calls for other parts of your API-only onboarding flow.<\/p>\n<p>Here are some scenarios where the Onboarding components can be particularly useful:<\/p>\n<ul>\n<li>You are developing your UI to onboard users with <a href=\"\/pt\/marketplaces\/onboard-users#api-only-onboarding\">API-only onboarding<\/a> and want to speed up the process.<\/li>\n<li>You have already built your UI to onboard users with <a href=\"\/pt\/marketplaces\/onboard-users#api-only-onboarding\">API-only onboarding<\/a> and want to reduce the effort required to maintain your code.<\/li>\n<li>You are using <a href=\"\/pt\/marketplaces\/onboard-users#hosted-onboarding\">hosted onboarding<\/a> to onboard users and want to let users manage their submitted data directly in your UI.<\/li>\n<\/ul>\n<p>You can integrate the following Onboarding components:<\/p>\n<table>\n<thead>\n<tr>\n<th><div style=\"width:190px\">Component<\/div><\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Individual legal entity components<\/strong><\/td>\n<td>Enable users to manage their personal details and verification status. Users can enter personal details and upload required documents, view their current verification status, and update their information when necessary.<\/td>\n<\/tr>\n<tr>\n<td><strong>Terms of Service components<\/strong><\/td>\n<td>Allow users to manage the Terms of Service documents. Users can accept the latest Terms of Service documents, view the status, and download signed copies for their records.<\/td>\n<\/tr>\n<tr>\n<td><strong>Transfer Instrument components<\/strong><\/td>\n<td>Provide users with full control over their bank accounts. Users can create a new bank account (transfer instrument) using instant verification or document uploads, and manage existing accounts by adding, deleting, and viewing their corresponding verification statuses and error messages, if applicable.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n<p>The guidance and features available may differ based on the library version in use. We recommend using the latest library version to take advantage of the newest features and improvements.<\/p>\n<p>Ensure you select a component type and a library version that suit your situation in the following sections.<\/p>\n<h2>Select a component type<\/h2>\n<p>Select the tab for the component you are interested in to view the relevant description and integration steps:<\/p>\n<div data-component-wrapper=\"in-page-filtering\">\n    <in-page-filtering\n        id=\"onboarding-components-marketplace\"\n        :in-page-filtering=\"{&quot;guides&quot;:{&quot;individual-legal-entity&quot;:{&quot;label&quot;:&quot;Individual legal entity&quot;,&quot;integrations&quot;:{&quot;individual-legal-entity-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Adyen&#039;s prebuilt UI components to collect information from your users as part of your onboarding flow.&quot;,&quot;displayVersionDropdown&quot;:true,&quot;visual_content&quot;:null,&quot;visual_images&quot;:null,&quot;external_content&quot;:null,&quot;external_icon&quot;:null,&quot;versions&quot;:{&quot;version-4.0.x&quot;:{&quot;sections&quot;:{&quot;placeholder&quot;:{&quot;$ref&quot;:&quot;0a01fea56822f109dc6f954f74bd78f3&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;4.0.x&quot;},&quot;config&quot;:{&quot;published&quot;:null,&quot;visible&quot;:null,&quot;api_version&quot;:null}},&quot;version-3.32.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;b3e69231a4163c94d03b681f182d84fb&quot;},&quot;component-description&quot;:{&quot;$ref&quot;:&quot;627b5c91d16277c2075ef60e7eb846f7&quot;},&quot;callback-functions&quot;:{&quot;$ref&quot;:&quot;0dc2547eda7dd689ede9290b4e8326d9&quot;},&quot;how-it-works&quot;:{&quot;$ref&quot;:&quot;15f152b8d0870147f3dd636d490e41ef&quot;},&quot;create-a-session&quot;:{&quot;$ref&quot;:&quot;ed11bb44371f04edcaefcbf8f04af7a7&quot;},&quot;install-component-library&quot;:{&quot;$ref&quot;:&quot;30a554856d80bd5cded543368efaf071&quot;},&quot;initialize-components&quot;:{&quot;$ref&quot;:&quot;c74c3b382b64ac2a29f9caca9add0d7c&quot;},&quot;customize-appearance&quot;:{&quot;$ref&quot;:&quot;b0d8d188a0c706f62ab2c4147d1062f3&quot;},&quot;supported-languages&quot;:{&quot;$ref&quot;:&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;3.32.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}}},&quot;sections&quot;:[],&quot;components&quot;:{&quot;b3e69231a4163c94d03b681f182d84fb&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have an Adyen for Platforms marketplace setup.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-lem_2\\&quot;&gt;Legal Entity Management API key&lt;\\\/a&gt; (for example, &lt;strong&gt;ws[_123456]@Scope.Company_[YourCompanyAccount]&lt;\\\/strong&gt;) to access the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Session authentication API&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin:&lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; and &lt;a href=\\&quot;\\\/marketplaces\\\/components-overview#supported-browsers\\&quot;&gt;browser versions&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Review our guidance on the &lt;a href=\\&quot;\\\/marketplaces\\\/verification-overview\\&quot;&gt;verification process&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;627b5c91d16277c2075ef60e7eb846f7&quot;:&quot;&lt;h2&gt;Individual legal entity components&lt;\\\/h2&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To integrate the individual legal entity components, the minimum required library version is &lt;strong&gt;3.32.0&lt;\\\/strong&gt;.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;You can speed up the process of creating legal entity resources for your users with Adyen&#039;s web components. You only need to create a legal entity using the POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/legalEntities\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/legalEntities&lt;\\\/a&gt; request with the minimum required information, then integrate the legal entity components into your marketplace\\u2019s user interface (UI).&lt;\\\/p&gt;\\n&lt;p&gt;After you have integrated the components, your users can enter other necessary verification information themselves. The component will then send this information to Adyen for verification checks and show your users their verification status.&lt;\\\/p&gt;\\n&lt;p&gt;This page provides information on:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;The available individual legal entity components, which include the &lt;strong&gt;Create Individual&lt;\\\/strong&gt; component and the &lt;strong&gt;Manage Individual&lt;\\\/strong&gt; component.&lt;\\\/li&gt;\\n&lt;li&gt;The steps needed to integrate these components into your marketplace&#039;s UI.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;h2&gt;Create Individual component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Create Individual&lt;\\\/strong&gt; component enables your users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Enter their personal details and upload any &lt;a href=\\&quot;\\\/marketplaces\\\/verification-requirements\\\/document-requirements\\&quot;&gt;additional documents&lt;\\\/a&gt; required for onboarding.&lt;\\\/li&gt;\\n&lt;li&gt;Submit the entered information to Adyen for verification.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab5rjsa82883\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;82883&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/create-individual-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/create-individual-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ind-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ind-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/create-individual-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/create-individual-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ind-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ind-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Manage Individual component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Manage Individual&lt;\\\/strong&gt; component enables your users to see their current verification status when used as a standalone component. You can also link the &lt;strong&gt;Manage Individual&lt;\\\/strong&gt; component to the &lt;strong&gt;Create Individual&lt;\\\/strong&gt; component by using a &lt;a href=\\&quot;#callback-functions\\&quot;&gt;callback function&lt;\\\/a&gt; to enable users to update their information if needed.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabvoZlW82883\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;82883&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/manage-individual-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/manage-individual-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ind-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ind-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/manage-individual-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/individual-legal-entity\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/manage-individual-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ind-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ind-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;0dc2547eda7dd689ede9290b4e8326d9&quot;:&quot;&lt;h2 id=\\&quot;callback-functions\\&quot;&gt;User flow and callback functions&lt;\\\/h2&gt;\\n&lt;p&gt;You can use each component independently to serve its primary purpose, such as to enable users to enter and submit their information and view their verification status.&lt;\\\/p&gt;\\n&lt;p&gt;Alternatively, you can integrate the two components into a single user flow by using the following callback functions:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;When integrating the &lt;strong&gt;Create Individual&lt;\\\/strong&gt; component, you can include the &lt;code&gt;onSubmitSuccess&lt;\\\/code&gt; callback function. This function is triggered when the user submits their personal details. It returns the user details in a payload and loads the &lt;strong&gt;Manage Individual&lt;\\\/strong&gt; component. This enables the user to view the verification status of the information they provided.&lt;\\\/li&gt;\\n&lt;li&gt;When integrating the &lt;strong&gt;Manage Individual&lt;\\\/strong&gt; component, you can include the &lt;code&gt;onClick&lt;\\\/code&gt; callback function. This function is triggered when the user selects their user profile in the component, and it loads the &lt;strong&gt;Create Individual&lt;\\\/strong&gt; component. This enables the user to view their prefilled personal details and any outstanding errors. The user can then update and submit the new information in the component.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;See the example data for the &lt;code&gt;onSubmitSuccess&lt;\\\/code&gt; callback function below.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;`onSubmitSuccess` data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;personalDetails\\\\\\&quot;: {\\\\n        \\\\\\&quot;firstName\\\\\\&quot;: \\\\\\&quot;Shelly\\\\\\&quot;,\\\\n        \\\\\\&quot;lastName\\\\\\&quot;: \\\\\\&quot;Eller\\\\\\&quot;,\\\\n        \\\\\\&quot;birthDate\\\\\\&quot;: \\\\\\&quot;1990-06-21\\\\\\&quot;,\\\\n        \\\\\\&quot;idNumber\\\\\\&quot;: \\\\\\&quot;1234\\\\\\&quot;,\\\\n        \\\\\\&quot;idNumberExempt\\\\\\&quot;: null,\\\\n        \\\\\\&quot;residencyCountry\\\\\\&quot;: \\\\\\&quot;US\\\\\\&quot;,\\\\n        \\\\\\&quot;phoneNumber\\\\\\&quot;: \\\\\\&quot;+123456789\\\\\\&quot;,\\\\n        \\\\\\&quot;email\\\\\\&quot;: \\\\\\&quot;s.hopper@email.com\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;address\\\\\\&quot;: {\\\\n        \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;US\\\\\\&quot;,\\\\n        \\\\\\&quot;address\\\\\\&quot;: \\\\\\&quot;71 5th Avenue\\\\\\&quot;,\\\\n        \\\\\\&quot;otherAddressInformation\\\\\\&quot;: \\\\\\&quot;1\\\\\\&quot;,\\\\n        \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;New York\\\\\\&quot;,\\\\n        \\\\\\&quot;stateOrProvince\\\\\\&quot;: \\\\\\&quot;NY\\\\\\&quot;,\\\\n        \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;10003\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;idVerificationMethod\\\\\\&quot;: {\\\\n        \\\\\\&quot;idVerificationMethod\\\\\\&quot;: \\\\\\&quot;instantVerification\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;idDocument\\\\\\&quot;: {},\\\\n    \\\\\\&quot;proofOfResidence\\\\\\&quot;: {},\\\\n    \\\\\\&quot;proofOfNationalId\\\\\\&quot;: {},\\\\n    \\\\\\&quot;proofOfRelationship\\\\\\&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;&quot;,&quot;15f152b8d0870147f3dd636d490e41ef&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;Follow these steps to integrate the individual legal entity components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#create-token\\&quot;&gt;Create an authentication session from your server&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#install-library\\&quot;&gt;Install component library in your front end&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#initialize-components\\&quot;&gt;Initialize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;ed11bb44371f04edcaefcbf8f04af7a7&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/legalEntities\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/legalEntities&lt;\\\/a&gt; request to create a legal entity for your user first. In your request, specify the following minimum required information.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To make this request, you can only use v3 or v4 of the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Legal Entity Management API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/legalEntities#request-individual-name\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;firstName&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The individual&#039;s first name. Must not be blank.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/legalEntities#request-individual-name\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;lastName&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The individual&#039;s last name. Must not be blank.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/legalEntities#request-individual-residentialAddress-country\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;residentialAddress.country&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The two-letter ISO 3166-1 alpha-2 country code.&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;Create an individual legal entity&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;json&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/kyc-test.adyen.com\\\\\\\/lem\\\\\\\/v3\\\\\\\/legalEntities \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_LEGAL_ENTITY_MANAGEMENT_API_KEY&#039; \\\\\\\\\\\\n-H &#039;content-type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-X POST \\\\\\\\\\\\n-d &#039;{\\\\n   \\\\&amp;quot;type\\\\&amp;quot;:\\\\&amp;quot;individual\\\\&amp;quot;,\\\\n   \\\\&amp;quot;individual\\\\&amp;quot;:{\\\\n      \\\\&amp;quot;residentialAddress\\\\&amp;quot;:{\\\\n         \\\\&amp;quot;country\\\\&amp;quot;:\\\\&amp;quot;US\\\\&amp;quot;\\\\n      },\\\\n      \\\\&amp;quot;name\\\\&amp;quot;:{\\\\n         \\\\&amp;quot;firstName\\\\&amp;quot;:\\\\&amp;quot;Shelly\\\\&amp;quot;,\\\\n         \\\\&amp;quot;lastName\\\\&amp;quot;:\\\\&amp;quot;Eller\\\\&amp;quot;\\\\n      }\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;From the response, save the generated &lt;code&gt;legalEntityId&lt;\\\/code&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Individual legal entity created&#039;\\&quot; :id=\\&quot;&#039;create-legalEntity-individual-response&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;individual\\\\\\&quot;: {\\\\n        \\\\\\&quot;name\\\\\\&quot;: {\\\\n            \\\\\\&quot;firstName\\\\\\&quot;: \\\\\\&quot;Shelly\\\\\\&quot;,\\\\n            \\\\\\&quot;lastName\\\\\\&quot;: \\\\\\&quot;Eller\\\\\\&quot;\\\\n        },\\\\n        \\\\\\&quot;residentialAddress\\\\\\&quot;: {\\\\n            \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;US\\\\\\&quot;\\\\n        }\\\\n    },\\\\n    \\\\\\&quot;type\\\\\\&quot;: \\\\\\&quot;individual\\\\\\&quot;,\\\\n    \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;LE00000000000000000000001\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request using the API key that you set up for the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Legal Entity Management API&lt;\\\/a&gt;. In the request body, specify these 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 style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL where the component will appear.&lt;\\\/td&gt;\\n&lt;td&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your marketplace. Can include a subdomain.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;legalEntityId&lt;\\\/code&gt;: The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and whose data you want to collect using the components. Set this to the legal entity ID value you created in step 1.1.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;strong&gt;legalEntity&lt;\\\/strong&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-roles\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;roles&lt;\\\/a&gt;: The role(s) required to use the component(s). Set this to &lt;strong&gt;createIndividualComponent&lt;\\\/strong&gt; and\\\/or &lt;strong&gt;manageIndividualComponent&lt;\\\/strong&gt;.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The type of product the component belongs to.&lt;\\\/td&gt;\\n&lt;td&gt;Set this to &lt;strong&gt;onboarding&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;Here is an example request for creating a session token.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create a session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/test.adyen.com\\\\\\\/authe\\\\\\\/api\\\\\\\/v1\\\\\\\/sessions \\\\\\\\\\\\n-H &#039;content-Type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_LEGAL_ENTITY_MANAGEMENT_API_KEY&#039; \\\\\\\\\\\\n-D &#039;{\\\\n   \\\\&amp;quot;allowOrigin\\\\&amp;quot;:\\\\&amp;quot;https:\\\\\\\/\\\\\\\/yourcompany.com\\\\&amp;quot;,\\\\n   \\\\&amp;quot;product\\\\&amp;quot;:\\\\&amp;quot;onboarding\\\\&amp;quot;,\\\\n   \\\\&amp;quot;policy\\\\&amp;quot;: {\\\\n     \\\\&amp;quot;resources\\\\&amp;quot;: [\\\\n       {\\\\n         \\\\&amp;quot;legalEntityId\\\\&amp;quot;: \\\\&amp;quot;LE00000000000000000000001\\\\&amp;quot;,\\\\n         \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;legalEntity\\\\&amp;quot;\\\\n       }\\\\n     ],\\\\n     \\\\&amp;quot;roles\\\\&amp;quot;: [\\\\n       \\\\&amp;quot;createIndividualComponent\\\\&amp;quot;,\\\\n       \\\\&amp;quot;manageIndividualComponent\\\\&amp;quot;\\\\n     ]\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end. Additionally, you need to pass the &lt;code&gt;token&lt;\\\/code&gt; value to the &lt;code&gt;sdkToken&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Session token created&#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;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&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;&quot;,&quot;30a554856d80bd5cded543368efaf071&quot;:&quot;&lt;h2 id=\\&quot;install-library\\&quot;&gt;2. Install component library in your front end&lt;\\\/h2&gt;\\n&lt;p&gt;Install the &lt;strong&gt;Adyen KYC Components&lt;\\\/strong&gt; library in your front-end application as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the npm package.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;npm install @adyen\\\/kyc-components --save&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the library, the components, and the style sheet.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;import AdyenKyc from &#039;@adyen\\\/kyc-components&#039;;\\nimport &#039;@adyen\\\/kyc-components\\\/styles.css&#039;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;c74c3b382b64ac2a29f9caca9add0d7c&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather the following information to be passed when initializing the library and its components.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Gather these parameters to initialize the library.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&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;country&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The two-letter &lt;a href=\\&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/ISO_3166-1_alpha-2\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 3166-1 alpha-2&lt;\\\/a&gt; country code of the legal entity.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;strong&gt;US&lt;\\\/strong&gt; for the United States of America.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL of the environment for the component integration.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;code&gt;https:\\\/\\\/test.adyen.com\\\/&lt;\\\/code&gt; for the test environment and &lt;code&gt;https:\\\/\\\/onboardingcomponents-live.adyen.com\\\/&lt;\\\/code&gt; for the live environment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;getSdkToken&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The callback function that retrieves an authentication session token and refreshes the current session.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;locale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The language of the component. See the list of &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;strong&gt;en-US&lt;\\\/strong&gt; for English.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;sdkToken&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The token received from the &lt;a href=\\&quot;#create-token\\&quot;&gt;create session token&lt;\\\/a&gt; API response.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather these parameters to initialize each component.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabmEqMU67230\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;67230&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:180%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;legalEntityId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and whose data you want to collect using the components. Set this to the legal entity ID value you created in step 1.1.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;modalView&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines how the component is shown in the user interface.&amp;lt;\\\\\\\/br&amp;gt;By default, the parameter is set to &amp;lt;strong&amp;gt;false&amp;lt;\\\\\\\/strong&amp;gt; and shows the component as an inline element on the page.&amp;lt;\\\\\\\/br&amp;gt;Set to &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt; to show the component as a modal window that overlays the main screen.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onClose&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If the &amp;lt;code&amp;gt;modalView&amp;lt;\\\\\\\/code&amp;gt; is &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;, this &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; is triggered when the user closes the modal window.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;() =&amp;amp;gt; { console.log(\\\\&amp;quot;I&amp;#039;ve been closed\\\\&amp;quot;)&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onSubmitSuccess&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user submits their information in the component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(submittedData) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ind-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ind&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;legalEntityId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and whose data you want to collect using the components. Set this to the legal entity ID value you created in step 1.1.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onClick&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user selects their user profile element in the component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ind-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ind&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabeZ1Gk67230\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;67230&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;create-individual-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ind-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ind&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;manage-individual-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ind-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ind&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabpwgvt67230\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;67230&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function getSdkToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;createIndividualComponent\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ind-add-function_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ind&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function getSdkToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;manageIndividualComponent\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ind-add-function_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ind&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;In this step, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt; by setting the &lt;code&gt;locale&lt;\\\/code&gt; parameter. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabXZCrS67230\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;67230&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;const adyenKycHandler = new AdyenKyc({\\\\\\\\n     locale: &amp;#039;en-US&amp;#039;,\\\\\\\\n     country: &amp;#039;US&amp;#039;,\\\\\\\\n     environment: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/test.adyen.com&amp;#039;,\\\\\\\\n     sdkToken: token,\\\\\\\\n     getSdkToken\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst createIndividualComponent = adyenKycHandler\\\\\\\\n     .create(&amp;#039;createIndividualComponent&amp;#039;, {\\\\\\\\n         legalEntityId,\\\\\\\\n         onSubmitSuccess: (submittedData) =&amp;amp;gt; {}, \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Upon form completion\\\\\\\\n         modalView: true, \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Show in a modal window or inline\\\\\\\\n         onClose: () =&amp;amp;gt; {} \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional, when the user selects Close. For the modal view only\\\\\\\\n    })\\\\\\\\n.mount(&amp;#039;#create-individual-container&amp;#039;); \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Mount to the container you created&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ind-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ind&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Individual component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;const adyenKycHandler = new AdyenKyc({\\\\\\\\n     locale: &amp;#039;en-US&amp;#039;,\\\\\\\\n     country: &amp;#039;US&amp;#039;,\\\\\\\\n     environment: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/test.adyen.com&amp;#039;,\\\\\\\\n     sdkToken: token,\\\\\\\\n     getSdkToken\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst manageIndividualComponent = adyenKycHandler\\\\\\\\n     .create(&amp;#039;manageIndividualComponent&amp;#039;, {\\\\\\\\n        legalEntityId,\\\\\\\\n        onClick: () =&amp;amp;gt; {} \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional, when the user selects their user profile element in the component\\\\\\\\n    })\\\\\\\\n.mount(&amp;#039;#manage-individual-container&amp;#039;)&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ind&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ind-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ind&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;If you use &lt;a href=\\&quot;#callback-functions\\&quot;&gt;callback functions&lt;\\\/a&gt; to integrate the two components into a single user flow, refer to the following example implementation:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Example callback function implementation&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const adyenKycHandler = new AdyenKyc({\\\\n     locale: &#039;en-US&#039;,\\\\n     country: &#039;US&#039;,\\\\n     environment: &#039;https:\\\\\\\/\\\\\\\/test.adyen.com&#039;,\\\\n     sdkToken: token,\\\\n     getSdkToken\\\\n});\\\\n\\\\n   \\\\\\\/\\\\\\\/ (Optional) Store reference to the Create Individual component to be used in the Manage Individual component\\\\nconst openIndividual = () =&amp;gt; adyenKycHandler\\\\n     .create(&#039;createIndividualComponent&#039;, {\\\\n        legalEntityId,\\\\n        onSubmitSuccess: (submittedData) =&amp;gt; {}, \\\\\\\/\\\\\\\/ Upon form completion\\\\n        modalView: true, \\\\\\\/\\\\\\\/ Show in a modal window or inline\\\\n        onClose: () =&amp;gt; {} \\\\\\\/\\\\\\\/ Optional, when the user selects Close. For the modal view only\\\\n     })\\\\n.mount(&#039;#create-individual-container&#039;); \\\\\\\/\\\\\\\/ Mount to the container you created\\\\n\\\\nconst manageIndividualComponent = adyenKycHandler\\\\n     .create(&#039;manageIndividualComponent&#039;, {\\\\n        legalEntityId,\\\\n        onClick: () =&amp;gt; openIndividual(), \\\\\\\/\\\\\\\/ Opens the Create Individual component stored above\\\\n     })\\\\n.mount(&#039;#manage-individual-container&#039;)&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;b0d8d188a0c706f62ab2c4147d1062f3&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;4. (Optional) Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The individual legal entity components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Inspect the components using your browser&#039;s developer tools.&lt;\\\/li&gt;\\n&lt;li&gt;Modify the styles in your style sheet file.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;For the best user experience when customizing components, we recommend the following:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Choose color combinations that complement each other well and provide enough contrast for readability, especially for text and navigation elements.&lt;\\\/li&gt;\\n&lt;li&gt;Follow accessibility guidelines to ensure that the color palette is inclusive and usable for individuals with visual impairments.&lt;\\\/li&gt;\\n&lt;li&gt;Test your customizations before implementing them live.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following tabs show the available CSS variables and their default values.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab58bvs32042\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;32042&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Font&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default font settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;font&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;css&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;\\\\\\\\\\\\\\\/** Font family *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-caption-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-m-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-l-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font size *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-font-size: 12px;\\\\\\\\n--adyen-sdk-text-body-font-size: 14px;\\\\\\\\n--adyen-sdk-text-title-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-mobile-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-font-size: 18px;\\\\\\\\n--adyen-sdk-text-title-m-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-font-size: 24px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font weight *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-weight: 400;\\\\\\\\n--adyen-sdk-text-caption-font-weight: 400;\\\\\\\\n--adyen-sdk-text-body-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-caption-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-body-strongest-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-m-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-l-font-weight: 600;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Line height *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-line-height: 18px;\\\\\\\\n--adyen-sdk-text-body-line-height: 20px;\\\\\\\\n--adyen-sdk-text-title-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-mobile-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-line-height: 28px;\\\\\\\\n--adyen-sdk-text-title-m-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-line-height: 34px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Primary font color - main font color for components *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-primary: #00112c;\\\\\\\\n--adyen-sdk-color-label-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-label-primary-active: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary font color - secondary font color (ex. helper text, captions) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-secondary: #5c687c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary font color - tertiary font color (ex. field placeholder text) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-tertiary: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Highlight font color - pop of color (ex. current form step indicator) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-highlight: #0070f5;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary font color - ex. button text color *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-inverse-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-active: #eeeff1;\\\\\\\\n--adyen-sdk-color-label-inverse-secondary: #9ea6b1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Link font color - sets color of links *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-link-primary: #00112c;\\\\\\\\n--adyen-sdk-color-link-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-link-primary-active: #8d95a3;\\\\\\\\n--adyen-sdk-color-link-primary-disabled: #8d95a3;&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;font_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Background color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default background color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;background-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary background - sets bg color for cards, form fields, task list *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-background-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-primary-active: #eeeff1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary background - sets bg color for actions menu, accordion, default alert, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-secondary: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-secondary-hover: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-secondary-active: #e3e5e9;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary background - sets bg color for text buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-tertiary: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-tertiary-hover: #e3e5e9;\\\\\\\\n--adyen-sdk-color-background-tertiary-active: #dbdee2;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary background - main button, radio, and checkbox colors *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-inverse-primary: #00112c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-active: #8d95a3;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;background_color_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Outline color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default outline color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;outline-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary outline - sets border color for cards, modal dividers, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-primary: #dbdee2;\\\\\\\\n--adyen-sdk-color-outline-primary-hover: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-primary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary outline - sets border color for dropzone and buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-secondary: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-secondary-hover: #b8bdc6;\\\\\\\\n--adyen-sdk-color-outline-secondary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary outline - sets border color for form fields (checkbox, input radio, select) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-tertiary: #8d95a3;\\\\\\\\n--adyen-sdk-color-outline-tertiary-hover: #6d7789;\\\\\\\\n--adyen-sdk-color-outline-tertiary-active: #00112c;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;outline_color_2_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Border&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default border settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;border&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Small border radius - for checkboxes and tags *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-s: 4px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Medium border radius - for input fields, buttons, toasts, task list items *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-m: 8px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Large border radius - for cards, alerts, modals, action menu *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-l: 12px;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;border_3_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The following tabs show examples of how to style the components.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;taboBQsl32042\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;32042&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Example 1: Override font settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-1&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the default font family to Inter *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-text-body-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-caption-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-m-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-l-font-family: Inter,sans-serif;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the font weights to custom values *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-text-body-font-weight: 500;\\\\\\\\n  --adyen-sdk-text-caption-font-weight: 500;\\\\\\\\n  --adyen-sdk-text-body-stronger-font-weight: 600;\\\\\\\\n  --adyen-sdk-text-caption-stronger-font-weight: 600;\\\\\\\\n  --adyen-sdk-text-body-strongest-font-weight: 700;\\\\\\\\n  --adyen-sdk-text-title-font-weight: 700;\\\\\\\\n  --adyen-sdk-text-title-m-font-weight: 700;\\\\\\\\n  --adyen-sdk-text-title-l-font-weight: 700;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_1:_override_font_settings_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Example 2: Override color settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-2&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the primary inverse background color (ex. main button colors) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-background-inverse-primary: #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-hover:  #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-active:  #7e5bed;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the primary text color (ex. main body\\\\\\\\\\\\\\\/heading colors) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-label-primary: #293d50;\\\\\\\\n  --adyen-sdk-color-label-primary-hover:  #293d50;\\\\\\\\n  --adyen-sdk-color-label-primary-active:  #293d50;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the secondary text color (ex. captions, helper text) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-label-secondary: rgba(117,117,117);\\\\\\\\n  --adyen-sdk-color-label-secondary-hover:  rgba(117,117,117);\\\\\\\\n  --adyen-sdk-color-label-secondary-active:  rgba(117,117,117);\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the color for links *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-link-primary: #7e5bed;\\\\\\\\n  --adyen-sdk-color-link-primary-hover: #7e5bed;\\\\\\\\n  --adyen-sdk-color-link-primary-active:  #7e5bed;\\\\\\\\n  --adyen-sdk-color-link-primary-disabled: #8d95a3;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_2:_override_color_settings_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Example 3: Override border settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-3&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting border radius for buttons and input fields *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-border-radius-m: 15px;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_3:_override_border_settings_2_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;:&quot;&lt;h2&gt;Supported languages&lt;\\\/h2&gt;\\n&lt;p&gt;You can localize the Onboarding components by setting one of the following languages.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;sticky-table-container\\&quot;&gt;\\n    \\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Language&lt;\\\/th&gt;\\n&lt;th&gt;Locale code&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Bulgarian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;bg-BG&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Croatian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;hr-HR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Czech&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;cs-CZ&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Danish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;da-DK&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Dutch&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;nl-NL&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;English&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;en-US&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Estonian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;et-EE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Finnish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fi-FI&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;French&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fr-FR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;German&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;de-DE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Greek&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;el-GR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Hungarian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;hu-HU&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Italian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;it-IT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Latvian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;lv-LV&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Lithuanian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;lt-LT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Norwegian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;no-NO&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Polish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pl-PL&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Portuguese&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pt-PT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Romanian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;ro-RO&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Slovak&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sk-SK&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Slovenian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sl-SI&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Spanish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Swedish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sv-SE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;\\\/div&gt;\\n&quot;,&quot;0a01fea56822f109dc6f954f74bd78f3&quot;:&quot;&lt;p&gt;Documentation for version 4.0.x of this component is not yet available. Please refer to version 3.32.x for current integration steps.&lt;\\\/p&gt;&quot;}}}},&quot;terms-of-service&quot;:{&quot;label&quot;:&quot;Terms of Service&quot;,&quot;integrations&quot;:{&quot;terms-of-service-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Adyen&#039;s prebuilt UI components to collect information from your users as part of your onboarding flow.&quot;,&quot;displayVersionDropdown&quot;:true,&quot;visual_content&quot;:null,&quot;visual_images&quot;:null,&quot;external_content&quot;:null,&quot;external_icon&quot;:null,&quot;versions&quot;:{&quot;version-4.0.x&quot;:{&quot;sections&quot;:{&quot;placeholder&quot;:{&quot;$ref&quot;:&quot;0a01fea56822f109dc6f954f74bd78f3&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;4.0.x&quot;},&quot;config&quot;:{&quot;published&quot;:null,&quot;visible&quot;:null,&quot;api_version&quot;:null}},&quot;version-3.32.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;ba40fa9ab63550f56f51f5d8fc3f4e69&quot;},&quot;component-description&quot;:{&quot;$ref&quot;:&quot;cab7a2d73246494f529cc658a43b03d4&quot;},&quot;callback-function&quot;:{&quot;$ref&quot;:&quot;a54152c477782e30f806892db2dbc0fb&quot;},&quot;how-it-works&quot;:{&quot;$ref&quot;:&quot;15f152b8d0870147f3dd636d490e41ef&quot;},&quot;create-a-session&quot;:{&quot;$ref&quot;:&quot;da70cd6e8f12b3db71d94af5c5517314&quot;},&quot;install-component-library&quot;:{&quot;$ref&quot;:&quot;30a554856d80bd5cded543368efaf071&quot;},&quot;initialize-components&quot;:{&quot;$ref&quot;:&quot;b9592be77f13cdd131e1d4b599512f6b&quot;},&quot;customize-appearance&quot;:{&quot;$ref&quot;:&quot;4cb6def21a0774f190a1e5ac1e40ca34&quot;},&quot;supported-languages&quot;:{&quot;$ref&quot;:&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;3.32.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}}},&quot;sections&quot;:[],&quot;components&quot;:{&quot;ba40fa9ab63550f56f51f5d8fc3f4e69&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have an Adyen for Platforms marketplace setup.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-lem_2\\&quot;&gt;Legal Entity Management API key&lt;\\\/a&gt; (for example, &lt;strong&gt;ws[_123456]@Scope.Company_[YourCompanyAccount]&lt;\\\/strong&gt;) to access the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Session authentication API&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin:&lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; and &lt;a href=\\&quot;\\\/marketplaces\\\/components-overview#supported-browsers\\&quot;&gt;browser versions&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Follow the &lt;a href=\\&quot;\\\/marketplaces\\\/onboard-users\\\/onboarding-steps\\&quot;&gt;API-only onboarding&lt;\\\/a&gt; guide to complete all necessary steps before determining the Terms of Service.&lt;\\\/li&gt;&lt;li&gt;Review our guidance on the &lt;a href=\\&quot;\\\/marketplaces\\\/verification-overview\\&quot;&gt;verification process&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;cab7a2d73246494f529cc658a43b03d4&quot;:&quot;&lt;h2&gt;Terms of Service components&lt;\\\/h2&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To integrate the terms of service components, the minimum required library version is &lt;strong&gt;3.32.0&lt;\\\/strong&gt;.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;You can integrate the terms of service components to enable your users to accept Adyen&#039;s &lt;a href=\\&quot;\\\/marketplaces\\\/onboard-users\\\/terms-of-service\\&quot;&gt;Terms of Service documents&lt;\\\/a&gt; directly within your marketplace&#039;s user interface (UI). The components present the relevant Terms of Service documents to the user and prompt them to sign the documents. After the user accepts the Terms of Service, the components notify Adyen automatically. This means you do not need to make multiple API calls to manage the service agreement process yourself.&lt;\\\/p&gt;\\n&lt;p&gt;This page provides information on:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;The available contract components, which include the &lt;strong&gt;Accept Terms of Service&lt;\\\/strong&gt; component and the &lt;strong&gt;Manage Terms of Service&lt;\\\/strong&gt; component.&lt;\\\/li&gt;\\n&lt;li&gt;The steps needed to integrate these components into your marketplace&#039;s UI.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;h2&gt;Accept Terms of Service component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Accept Terms of Service&lt;\\\/strong&gt; component enables your users to view and accept the required Terms of Service documents within your marketplace&#039;s UI.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;The Terms of Service documents are only available in English. As a result, these documents will not be translated into other languages, even if you choose a different &lt;a href=\\&quot;#initialize-components\\&quot;&gt;locale setting&lt;\\\/a&gt; for your components.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab0yGN786975\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;86975&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-accept-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-accept-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;accept-tos-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;accept-tos-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-accept-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-accept-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;accept-tos-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;accept-tos-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Manage Terms of Service component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Manage Terms of Service&lt;\\\/strong&gt; component enables your users to view the status of the Terms of Service documents when used as a standalone component. If the documents still need to be signed, the component prompts the user to do so.&lt;\\\/p&gt;\\n&lt;p&gt;You can also link the &lt;strong&gt;Manage Terms of Service&lt;\\\/strong&gt; component to the &lt;strong&gt;Accept Terms of Service&lt;\\\/strong&gt; component by using &lt;a href=\\&quot;#callback-functions\\&quot;&gt;callback functions&lt;\\\/a&gt;. This enables users to view and download the signed documents.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabY1Ntq86975\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;86975&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-manage-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-manage-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-tos-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-tos-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-manage-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/terms-of-service\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/tos-manage-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-tos-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-tos-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;a54152c477782e30f806892db2dbc0fb&quot;:&quot;&lt;h2 id=\\&quot;callback-functions\\&quot;&gt;User flow and callback functions&lt;\\\/h2&gt;\\n&lt;p&gt;You can use each component independently to serve its primary purpose, such as to enable users to view and sign the documents, and to view the status of the documents. Alternatively, you can integrate the two components into a single user flow by using the following callback functions:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;When integrating the &lt;strong&gt;Accept Terms of Service&lt;\\\/strong&gt; component, you can include:\\n&lt;ul&gt;\\n&lt;li&gt;the &lt;code&gt;onAccept&lt;\\\/code&gt; callback function. This function is triggered when the user signs the Terms of Service document. It returns information about the signed document(s) and the signer in a payload every time the user signs a new document.&lt;\\\/li&gt;\\n&lt;li&gt;the &lt;code&gt;onClose&lt;\\\/code&gt; callback function. This function is triggered when the user closes the modal window or selects &lt;strong&gt;Finish&lt;\\\/strong&gt; after signing the Terms of Service documents, and it loads the &lt;strong&gt;Manage Terms of Service&lt;\\\/strong&gt; component. This enables the user to view the status of the documents.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&lt;\\\/li&gt;\\n&lt;li&gt;When integrating the &lt;strong&gt;Manage Terms of Service&lt;\\\/strong&gt; component, you can include the &lt;code&gt;onClick&lt;\\\/code&gt; callback function. This function is triggered when the user selects &lt;strong&gt;Continue&lt;\\\/strong&gt; next to the Terms of Service documents, and it loads the &lt;strong&gt;Accept Terms of Service&lt;\\\/strong&gt; component. This enables the user to view and download the signed documents.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;See the example data for the &lt;code&gt;onAccept&lt;\\\/code&gt; callback function below.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;`onAccept` data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  unAcceptedTermsOfServiceTypes: [\\\\\\&quot;adyenIssuing\\\\\\&quot;];\\\\n  acceptedTermsOfServices: [\\\\n    {\\\\n      acceptedBy: \\\\\\&quot;LE00000000000000000000001\\\\\\&quot;;\\\\n      id: \\\\\\&quot;TOS0000000001\\\\\\&quot;;\\\\n      language: \\\\\\&quot;en\\\\\\&quot;;\\\\n      termsOfServiceDocumentId: \\\\\\&quot;TOS1234\\\\\\&quot;;\\\\n      type: \\\\\\&quot;adyenForPlatformsAdvanced\\\\\\&quot;;\\\\n    },\\\\n    {\\\\n      acceptedBy: \\\\\\&quot;LE00000000000000000000001\\\\\\&quot;;\\\\n      id: \\\\\\&quot;TOS0000000002\\\\\\&quot;;\\\\n      language: \\\\\\&quot;en\\\\\\&quot;;\\\\n      termsOfServiceDocumentId: \\\\\\&quot;TOS5678\\\\\\&quot;;\\\\n      type: \\\\\\&quot;adyenAccount\\\\\\&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;&quot;,&quot;15f152b8d0870147f3dd636d490e41ef&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;Follow these steps to integrate the individual legal entity components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#create-token\\&quot;&gt;Create an authentication session from your server&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#install-library\\&quot;&gt;Install component library in your front end&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#initialize-components\\&quot;&gt;Initialize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;da70cd6e8f12b3db71d94af5c5517314&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request using the API key that you set up for the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Legal Entity Management API&lt;\\\/a&gt;. In the request body, specify these 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 style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL where the component will appear.&lt;\\\/td&gt;\\n&lt;td&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your marketplace. Can include a subdomain.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;legalEntityId&lt;\\\/code&gt;: The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and who will sign the Terms of Service documents.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;strong&gt;legalEntity&lt;\\\/strong&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-roles\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;roles&lt;\\\/a&gt;: The role(s) required to use the component(s). Set this to &lt;strong&gt;acceptTermsOfServiceComponent&lt;\\\/strong&gt; and\\\/or &lt;strong&gt;manageTermsOfServiceComponent&lt;\\\/strong&gt;.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The type of product the component belongs to.&lt;\\\/td&gt;\\n&lt;td&gt;Set this to &lt;strong&gt;onboarding&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;Here is an example request for creating a session token.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create a session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/test.adyen.com\\\\\\\/authe\\\\\\\/api\\\\\\\/v1\\\\\\\/sessions \\\\\\\\\\\\n-H &#039;content-type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_LEGAL_ENTITY_MANAGEMENT_API_KEY&#039; \\\\\\\\\\\\n-D &#039;{\\\\n   \\\\&amp;quot;allowOrigin\\\\&amp;quot;:\\\\&amp;quot;https:\\\\\\\/\\\\\\\/yourcompany.com\\\\&amp;quot;,\\\\n   \\\\&amp;quot;product\\\\&amp;quot;:\\\\&amp;quot;onboarding\\\\&amp;quot;,\\\\n   \\\\&amp;quot;policy\\\\&amp;quot;: {\\\\n     \\\\&amp;quot;resources\\\\&amp;quot;: [\\\\n       {\\\\n         \\\\&amp;quot;legalEntityId\\\\&amp;quot;: \\\\&amp;quot;LE00000000000000000000001\\\\&amp;quot;,\\\\n         \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;legalEntity\\\\&amp;quot;\\\\n       }\\\\n     ],\\\\n     \\\\&amp;quot;roles\\\\&amp;quot;: [\\\\n       \\\\&amp;quot;acceptTermsOfServiceComponent\\\\&amp;quot;,\\\\n       \\\\&amp;quot;manageTermsOfServiceComponent\\\\&amp;quot;\\\\n     ]\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end. Additionally, you need to pass the &lt;code&gt;token&lt;\\\/code&gt; value to the &lt;code&gt;sdkToken&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#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;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;30a554856d80bd5cded543368efaf071&quot;:&quot;&lt;h2 id=\\&quot;install-library\\&quot;&gt;2. Install component library in your front end&lt;\\\/h2&gt;\\n&lt;p&gt;Install the &lt;strong&gt;Adyen KYC Components&lt;\\\/strong&gt; library in your front-end application as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the npm package.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;npm install @adyen\\\/kyc-components --save&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the library, the components, and the style sheet.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;import AdyenKyc from &#039;@adyen\\\/kyc-components&#039;;\\nimport &#039;@adyen\\\/kyc-components\\\/styles.css&#039;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;b9592be77f13cdd131e1d4b599512f6b&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather the following information to be passed when initializing the library and its components.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather these parameters to initialize the library.&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 style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&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;country&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The two-letter &lt;a href=\\&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/ISO_3166-1_alpha-2\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 3166-1 alpha-2&lt;\\\/a&gt; country code of the legal entity.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;strong&gt;US&lt;\\\/strong&gt; for the United States of America.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL of the environment for the component integration.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;code&gt;https:\\\/\\\/test.adyen.com\\\/&lt;\\\/code&gt; for the test environment and &lt;code&gt;https:\\\/\\\/onboardingcomponents-live.adyen.com\\\/&lt;\\\/code&gt; for the live environment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;getSdkToken&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The callback function that retrieves an authentication session token and refreshes the current session.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;locale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The language of the component. See the list of &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;strong&gt;en-US&lt;\\\/strong&gt; for English.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;sdkToken&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The token received from the &lt;a href=\\&quot;#create-token\\&quot;&gt;create session token&lt;\\\/a&gt; API response.&lt;\\\/td&gt;\\n&lt;td&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;Gather these parameters to initialize each component.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabPt6eO49913\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49913&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Accept Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:180%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;legalEntityId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and who will sign the Terms of Service documents.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;modalView&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines how the component is shown in the user interface.&amp;lt;\\\\\\\/br&amp;gt;By default, the parameter is set to &amp;lt;strong&amp;gt;false&amp;lt;\\\\\\\/strong&amp;gt; and shows the component as an inline element on the page.&amp;lt;\\\\\\\/br&amp;gt;Set to &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt; to show the component as a modal window that overlays the main screen.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onAccept&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user signs the Terms of Service documents in the component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(submittedData) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onClose&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If the &amp;lt;code&amp;gt;modalView&amp;lt;\\\\\\\/code&amp;gt; is &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;, this &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; is triggered when the user closes the modal window or selects &amp;lt;strong&amp;gt;Finish&amp;lt;\\\\\\\/strong&amp;gt; after signing the Terms of Service documents.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;() =&amp;amp;gt; { console.log(\\\\&amp;quot;I&amp;#039;ve been closed\\\\&amp;quot;)&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;accept-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;accept-tos-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;accept-tos&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;legalEntityId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and who will sign the Terms of Service documents.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onClick&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user selects &amp;lt;strong&amp;gt;Continue&amp;lt;\\\\\\\/strong&amp;gt; next to the Terms of Service documents in the component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-tos-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-tos&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;taboMIZ749913\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49913&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Accept Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;accept-tos-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;accept-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;accept-tos-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;accept-tos&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;manage-tos-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-tos-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-tos&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab3hlG749913\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49913&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Accept Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function getSdkToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;acceptTermsOfServiceComponent\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;accept-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;accept-tos-add-function_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;accept-tos&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function getSdkToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;manageTermsOfServiceComponent\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-tos-add-function_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-tos&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;In this step, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt; by setting the &lt;code&gt;locale&lt;\\\/code&gt; parameter. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabq1TyF49913\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49913&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Accept Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;const adyenKycHandler = new AdyenKyc({\\\\\\\\n     locale: &amp;#039;en-US&amp;#039;,\\\\\\\\n     country: &amp;#039;US&amp;#039;,\\\\\\\\n     environment: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/test.adyen.com&amp;#039;,\\\\\\\\n     sdkToken: token,\\\\\\\\n     getSdkToken\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst acceptTermsOfServiceComponent = adyenKycHandler\\\\\\\\n     .create(&amp;#039;acceptTermsOfServiceComponent&amp;#039;, {\\\\\\\\n         legalEntityId,\\\\\\\\n         onAccept: (data) =&amp;amp;gt; {}, \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Triggered every time the user signes a new document\\\\\\\\n         modalView: true, \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Show in a modal window or inline\\\\\\\\n         onClose: () =&amp;amp;gt; {} \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional, when the user selects Close. For the modal view only\\\\\\\\n    })\\\\\\\\n.mount(&amp;#039;#accept-tos-container&amp;#039;); \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Mount to the container you created&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;accept-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;accept-tos-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;accept-tos&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Terms of Service component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;const adyenKycHandler = new AdyenKyc({\\\\\\\\n     locale: &amp;#039;en-US&amp;#039;,\\\\\\\\n     country: &amp;#039;US&amp;#039;,\\\\\\\\n     environment: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/test.adyen.com&amp;#039;,\\\\\\\\n     sdkToken: token,\\\\\\\\n     getSdkToken\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst manageTermsOfServiceComponent = adyenKycHandler\\\\\\\\n     .create(&amp;#039;manageTermsOfServiceComponent&amp;#039;, {\\\\\\\\n        legalEntityId,\\\\\\\\n        onClick: () =&amp;amp;gt; {} \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional, when the user selects their user profile element in the component\\\\\\\\n    })\\\\\\\\n.mount(&amp;#039;#manage-tos-container&amp;#039;)&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-tos&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-tos-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-tos&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;If you use &lt;a href=\\&quot;#callback-functions\\&quot;&gt;callback functions&lt;\\\/a&gt; to integrate the two components into a single user flow, refer to the following example implementation:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Example callback function implementation&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const adyenKycHandler = new AdyenKyc({\\\\n     locale: &#039;en-US&#039;,\\\\n     country: &#039;US&#039;,\\\\n     environment: &#039;https:\\\\\\\/\\\\\\\/test.adyen.com&#039;,\\\\n     sdkToken: token,\\\\n     getSdkToken\\\\n});\\\\n\\\\n   \\\\\\\/\\\\\\\/ (Optional) Store reference to the Accept Terms of Service component to be used in the Manage Terms of Service component\\\\nconst openTermsOfService = () =&amp;gt; adyenKycHandler\\\\n     .create(&#039;acceptTermsOfServiceComponent&#039;, {\\\\n        legalEntityId,\\\\n        onAccept: (data) =&amp;gt; {}, \\\\\\\/\\\\\\\/ Triggered every time the user signes a new document\\\\n        modalView: true, \\\\\\\/\\\\\\\/ Show in a modal window or inline\\\\n        onClose: () =&amp;gt; {} \\\\\\\/\\\\\\\/ Optional, when the user selects Close or Finish. For the modal view only\\\\n     })\\\\n.mount(&#039;#accept-tos-container&#039;); \\\\\\\/\\\\\\\/ Mount to the container you created\\\\n\\\\nconst manageTermsOfServiceComponent = adyenKycHandler\\\\n     .create(&#039;manageTermsOfServiceComponent&#039;, {\\\\n        legalEntityId,\\\\n        onClick: () =&amp;gt; openTermsOfService(), \\\\\\\/\\\\\\\/ Opens the Accept Terms of Service component stored above\\\\n     })\\\\n.mount(&#039;#manage-tos-container&#039;)&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;4cb6def21a0774f190a1e5ac1e40ca34&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;4. (Optional) Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The terms of service components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Inspect the components using your browser&#039;s developer tools.&lt;\\\/li&gt;\\n&lt;li&gt;Modify the styles in your style sheet file.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;For the best user experience when customizing components, we recommend the following:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Choose color combinations that complement each other well and provide enough contrast for readability, especially for text and navigation elements.&lt;\\\/li&gt;\\n&lt;li&gt;Follow accessibility guidelines to ensure that the color palette is inclusive and usable for individuals with visual impairments.&lt;\\\/li&gt;\\n&lt;li&gt;Test your customizations before implementing them live.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following tabs show the available CSS variables and their default values.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabvYeyR811\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;811&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Font&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default font settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;font&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;css&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;\\\\\\\\\\\\\\\/** Font family *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-caption-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-m-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-l-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font size *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-font-size: 12px;\\\\\\\\n--adyen-sdk-text-body-font-size: 14px;\\\\\\\\n--adyen-sdk-text-title-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-mobile-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-font-size: 18px;\\\\\\\\n--adyen-sdk-text-title-m-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-font-size: 24px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font weight *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-weight: 400;\\\\\\\\n--adyen-sdk-text-caption-font-weight: 400;\\\\\\\\n--adyen-sdk-text-body-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-caption-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-body-strongest-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-m-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-l-font-weight: 600;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Line height *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-line-height: 18px;\\\\\\\\n--adyen-sdk-text-body-line-height: 20px;\\\\\\\\n--adyen-sdk-text-title-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-mobile-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-line-height: 28px;\\\\\\\\n--adyen-sdk-text-title-m-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-line-height: 34px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Primary font color - main font color for components *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-primary: #00112c;\\\\\\\\n--adyen-sdk-color-label-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-label-primary-active: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary font color - secondary font color (ex. helper text, captions) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-secondary: #5c687c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary font color - tertiary font color (ex. field placeholder text) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-tertiary: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Highlight font color - pop of color (ex. current form step indicator) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-highlight: #0070f5;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary font color - ex. button text color *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-inverse-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-active: #eeeff1;\\\\\\\\n--adyen-sdk-color-label-inverse-secondary: #9ea6b1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Link font color - sets color of links *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-link-primary: #00112c;\\\\\\\\n--adyen-sdk-color-link-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-link-primary-active: #8d95a3;\\\\\\\\n--adyen-sdk-color-link-primary-disabled: #8d95a3;&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;font_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Background color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default background color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;background-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary background - sets bg color for cards, form fields, task list *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-background-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-primary-active: #eeeff1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary background - sets bg color for actions menu, accordion, default alert, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-secondary: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-secondary-hover: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-secondary-active: #e3e5e9;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary background - sets bg color for text buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-tertiary: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-tertiary-hover: #e3e5e9;\\\\\\\\n--adyen-sdk-color-background-tertiary-active: #dbdee2;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary background - main button, radio, and checkbox colors *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-inverse-primary: #00112c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-active: #8d95a3;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;background_color_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Outline color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default outline color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;outline-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary outline - sets border color for cards, modal dividers, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-primary: #dbdee2;\\\\\\\\n--adyen-sdk-color-outline-primary-hover: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-primary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary outline - sets border color for dropzone and buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-secondary: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-secondary-hover: #b8bdc6;\\\\\\\\n--adyen-sdk-color-outline-secondary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary outline - sets border color for form fields (checkbox, input radio, select) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-tertiary: #8d95a3;\\\\\\\\n--adyen-sdk-color-outline-tertiary-hover: #6d7789;\\\\\\\\n--adyen-sdk-color-outline-tertiary-active: #00112c;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;outline_color_2_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Border&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default border settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;border&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Small border radius - for checkboxes and tags *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-s: 4px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Medium border radius - for input fields, buttons, toasts, task list items *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-m: 8px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Large border radius - for cards, alerts, modals, action menu *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-l: 12px;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;border_3_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The following tabs show examples of how to style the components.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabuPxaQ811\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;811&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Example 1: Override font settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-1&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the default font family to Inter *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-text-body-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-caption-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-m-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-l-font-family: Inter,sans-serif;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the font weights to custom values *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-text-body-font-weight: 500;\\\\\\\\n  --adyen-sdk-text-caption-font-weight: 500;\\\\\\\\n  --adyen-sdk-text-body-stronger-font-weight: 600;\\\\\\\\n  --adyen-sdk-text-caption-stronger-font-weight: 600;\\\\\\\\n  --adyen-sdk-text-body-strongest-font-weight: 700;\\\\\\\\n  --adyen-sdk-text-title-font-weight: 700;\\\\\\\\n  --adyen-sdk-text-title-m-font-weight: 700;\\\\\\\\n  --adyen-sdk-text-title-l-font-weight: 700;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_1:_override_font_settings_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Example 2: Override color settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-2&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the primary inverse background color (ex. main button colors) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-background-inverse-primary: #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-hover:  #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-active:  #7e5bed;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the primary text color (ex. main body\\\\\\\\\\\\\\\/heading colors) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-label-primary: #293d50;\\\\\\\\n  --adyen-sdk-color-label-primary-hover:  #293d50;\\\\\\\\n  --adyen-sdk-color-label-primary-active:  #293d50;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the secondary text color (ex. captions, helper text) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-label-secondary: rgba(117,117,117);\\\\\\\\n  --adyen-sdk-color-label-secondary-hover:  rgba(117,117,117);\\\\\\\\n  --adyen-sdk-color-label-secondary-active:  rgba(117,117,117);\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the color for links *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-link-primary: #7e5bed;\\\\\\\\n  --adyen-sdk-color-link-primary-hover: #7e5bed;\\\\\\\\n  --adyen-sdk-color-link-primary-active:  #7e5bed;\\\\\\\\n  --adyen-sdk-color-link-primary-disabled: #8d95a3;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_2:_override_color_settings_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Example 3: Override border settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-3&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting border radius for buttons and input fields *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-border-radius-m: 15px;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_3:_override_border_settings_2_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;:&quot;&lt;h2&gt;Supported languages&lt;\\\/h2&gt;\\n&lt;p&gt;You can localize the Onboarding components by setting one of the following languages.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;sticky-table-container\\&quot;&gt;\\n    \\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Language&lt;\\\/th&gt;\\n&lt;th&gt;Locale code&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Bulgarian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;bg-BG&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Croatian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;hr-HR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Czech&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;cs-CZ&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Danish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;da-DK&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Dutch&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;nl-NL&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;English&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;en-US&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Estonian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;et-EE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Finnish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fi-FI&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;French&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fr-FR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;German&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;de-DE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Greek&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;el-GR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Hungarian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;hu-HU&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Italian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;it-IT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Latvian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;lv-LV&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Lithuanian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;lt-LT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Norwegian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;no-NO&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Polish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pl-PL&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Portuguese&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pt-PT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Romanian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;ro-RO&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Slovak&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sk-SK&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Slovenian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sl-SI&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Spanish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Swedish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sv-SE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;\\\/div&gt;\\n&quot;,&quot;0a01fea56822f109dc6f954f74bd78f3&quot;:&quot;&lt;p&gt;Documentation for version 4.0.x of this component is not yet available. Please refer to version 3.32.x for current integration steps.&lt;\\\/p&gt;&quot;}}}},&quot;transfer-instrument&quot;:{&quot;label&quot;:&quot;Transfer Instrument&quot;,&quot;integrations&quot;:{&quot;transfer-instrument-marketplace-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Adyen&#039;s prebuilt UI components to collect information from your users as part of your onboarding flow.&quot;,&quot;displayVersionDropdown&quot;:true,&quot;visual_content&quot;:null,&quot;visual_images&quot;:null,&quot;external_content&quot;:null,&quot;external_icon&quot;:null,&quot;versions&quot;:{&quot;version-4.0.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;d72fc6b3361ee4387d3a806dcee691fa&quot;},&quot;component-description&quot;:{&quot;$ref&quot;:&quot;e077c74f1c213a54473a677828e6d267&quot;},&quot;how-it-works&quot;:{&quot;$ref&quot;:&quot;2bfff0a8b00cbbd38413f507b562b318&quot;},&quot;create-a-session&quot;:{&quot;$ref&quot;:&quot;c3ba0d498de5f20678b868a3f9614559&quot;},&quot;install-component-library&quot;:{&quot;$ref&quot;:&quot;d3ca3d56178828878202776f256cf358&quot;},&quot;configure-components&quot;:{&quot;$ref&quot;:&quot;e89afe5d5698a8dc60ae496f968cc3aa&quot;},&quot;customize-appearance&quot;:{&quot;$ref&quot;:&quot;59de0e7df99cda90a8f6f5a7353eb2eb&quot;},&quot;callback-functions&quot;:{&quot;$ref&quot;:&quot;772fe06d840d68d97d810557a3a3745e&quot;},&quot;supported-languages&quot;:{&quot;$ref&quot;:&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;4.0.x&quot;},&quot;config&quot;:{&quot;published&quot;:null,&quot;visible&quot;:null,&quot;api_version&quot;:null}},&quot;version-3.32.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;da20fdb5996d44885971fb25b204fca2&quot;},&quot;component-description&quot;:{&quot;$ref&quot;:&quot;e775ab17207cdf4cb051472aef333422&quot;},&quot;callback-functions&quot;:{&quot;$ref&quot;:&quot;16591d2e62cd9b923be19b8f4bea42ae&quot;},&quot;how-it-works&quot;:{&quot;$ref&quot;:&quot;15f152b8d0870147f3dd636d490e41ef&quot;},&quot;create-a-session&quot;:{&quot;$ref&quot;:&quot;c98e5f5419507d0b1a1a80e7e9e1912c&quot;},&quot;install-component-library&quot;:{&quot;$ref&quot;:&quot;30a554856d80bd5cded543368efaf071&quot;},&quot;initialize-components&quot;:{&quot;$ref&quot;:&quot;ba4c8a51f90f0fb60426c4609d368a42&quot;},&quot;customize-appearance&quot;:{&quot;$ref&quot;:&quot;ce4f1bc6d4a0f1ea2ccd18b442373ccd&quot;},&quot;supported-languages&quot;:{&quot;$ref&quot;:&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;3.32.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}}},&quot;sections&quot;:[],&quot;components&quot;:{&quot;da20fdb5996d44885971fb25b204fca2&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have an Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-lem_2\\&quot;&gt;Legal Entity Management API key&lt;\\\/a&gt; (for example, &lt;strong&gt;ws[_123456]@Scope.Company_[YourCompanyAccount]&lt;\\\/strong&gt;) to access the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Session authentication API&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin:&lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; and &lt;a href=\\&quot;\\\/marketplaces\\\/components-overview#supported-browsers\\&quot;&gt;browser versions&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Follow the &lt;a href=\\&quot;\\\/marketplaces\\\/onboard-users\\\/onboarding-steps\\&quot;&gt;API-only onboarding&lt;\\\/a&gt; guide to complete all necessary steps before creating transfer instruments.&lt;\\\/li&gt;&lt;li&gt;Review our guidance on the &lt;a href=\\&quot;\\\/marketplaces\\\/verification-overview\\&quot;&gt;verification process&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;e775ab17207cdf4cb051472aef333422&quot;:&quot;&lt;h2&gt;Transfer instrument components&lt;\\\/h2&gt;\\n&lt;p&gt;You can integrate the transfer instrument components in your user interface to let your marketplace\\u2019s users enter their bank account details. The components then use the entered data to create a transfer instrument resource, so you do not have to make any API calls yourself.&lt;\\\/p&gt;\\n&lt;p&gt;This page provides information on:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;The available transfer instrument components, which include the &lt;strong&gt;Create Transfer Instrument&lt;\\\/strong&gt; component and the &lt;strong&gt;Manage Transfer Instrument&lt;\\\/strong&gt; component.&lt;\\\/li&gt;\\n&lt;li&gt;The steps needed to integrate these components into your marketplace.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;h2&gt;Create Transfer Instrument component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Create Transfer Instrument&lt;\\\/strong&gt; component enables users to add information about their bank accounts, also known as transfer instruments. Users can either give permission for the &lt;a href=\\&quot;\\\/marketplaces\\\/onboard-users#instant-bank-account-verification\\&quot;&gt;instant verification&lt;\\\/a&gt; of their bank account, or upload documents which Adyen uses to validate the bank account.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabnhU7C63287\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;63287&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-create-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-create-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-it-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-it-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-create-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-create-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-it-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-it-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Manage Transfer Instrument component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Manage Transfer Instrument&lt;\\\/strong&gt; component enables users to view a list of all bank accounts (transfer instruments) that have been added, along with their corresponding verification statuses and error messages, if applicable.&lt;\\\/p&gt;\\n&lt;p&gt;Users can also add a new bank account or delete an existing one if it is no longer needed. Any changes made are applied immediately, ensuring that payouts are delivered to the correct transfer instrument. If a bank account still needs to be added, users will be prompted to do so when accessing the component. Learn how to use &lt;a href=\\&quot;#callback-functions\\&quot;&gt;callback functions&lt;\\\/a&gt; to create a complete user flow.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabeOu3q63287\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;63287&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-manage-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-manage-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-it-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-it-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-manage-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/3-32-0\\\\\\\/component-description\\\\\\\/transfer-instrument-manage-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-it-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-it-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;16591d2e62cd9b923be19b8f4bea42ae&quot;:&quot;&lt;h2 id=\\&quot;callback-functions\\&quot;&gt;User flow and callback functions&lt;\\\/h2&gt;\\n&lt;p&gt;When integrating components, you can use callback functions to link the two components into a single user flow.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;When integrating the &lt;strong&gt;Create Transfer Instrument&lt;\\\/strong&gt; component, you can include the &lt;code&gt;onSubmitSuccess&lt;\\\/code&gt; callback function. This function is triggered when the user submits their bank account details. It returns the submitted bank account information in a payload and loads the &lt;strong&gt;Manage Transfer Instrument&lt;\\\/strong&gt; component. This enables the user to view the provided bank account details and their verification status after submitting the information.&lt;\\\/li&gt;\\n&lt;li&gt;When integrating the &lt;strong&gt;Manage Transfer Instrument&lt;\\\/strong&gt; component, you can include:\\n&lt;ul&gt;\\n&lt;li&gt;the &lt;code&gt;onAdd&lt;\\\/code&gt; callback function. This function is triggered when the user selects &lt;strong&gt;Add bank account&lt;\\\/strong&gt;, and it loads the &lt;strong&gt;Create Transfer Instrument&lt;\\\/strong&gt; component. This enables the user to enter their bank account details.&lt;\\\/li&gt;\\n&lt;li&gt;the &lt;code&gt;onEdit&lt;\\\/code&gt;callback function. This function is triggered when the user selects &lt;strong&gt;Edit details&lt;\\\/strong&gt;, and it loads the &lt;strong&gt;Create Transfer Instrument&lt;\\\/strong&gt; component. This enables the user to view their prefilled bank account details and any outstanding errors. The user can then update and submit the new information in the component.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;See the example data for the &lt;code&gt;onSubmitSuccess&lt;\\\/code&gt; callback function below.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example `onSubmitSuccess` data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;id: \\\\\\&quot;SE322JV223222F5GJVKHH8DTC\\\\\\&quot;\\\\npayoutAccountDetails: {\\\\n\\\\taccountHolder: \\\\\\&quot;Shelly Eller\\\\\\&quot;,\\\\n\\\\tbankAccountNumber: \\\\\\&quot;12312311\\\\\\&quot;,\\\\n\\\\tbranchCode: \\\\\\&quot;121121121\\\\\\&quot;,\\\\n\\\\tcurrency: \\\\\\&quot;USD\\\\\\&quot;,\\\\n}\\\\npayoutAccountDocuments: {\\\\n\\\\tbankStatementDocument: null,\\\\n\\\\tdescription: null,\\\\n}\\\\npayoutAccountVerification: {\\\\n\\\\tverifiedAccountHolder: \\\\\\&quot;Shelly Eller\\\\\\&quot;,\\\\n\\\\tverifiedBankAccountNumber: null,\\\\n\\\\tverifiedBankCountry: \\\\\\&quot;US\\\\\\&quot;,\\\\n\\\\tverifiedBankName: null,\\\\n\\\\tverifiedCurrencyCode: null,\\\\n}\\\\npayoutVerificationMethod: {\\\\n\\\\tbankCountry: \\\\\\&quot;US\\\\\\&quot;,\\\\n\\\\tpayoutVerificationMethod: \\\\\\&quot;manualVerification\\\\\\&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;&quot;,&quot;15f152b8d0870147f3dd636d490e41ef&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;Follow these steps to integrate the individual legal entity components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#create-token\\&quot;&gt;Create an authentication session from your server&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#install-library\\&quot;&gt;Install component library in your front end&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#initialize-components\\&quot;&gt;Initialize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;c98e5f5419507d0b1a1a80e7e9e1912c&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request using the API key that you set up for the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Legal Entity Management API&lt;\\\/a&gt;. In the request body, specify these parameters:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL where the component will appear.&lt;\\\/td&gt;\\n&lt;td&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your marketplace. Can include a subdomain.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;legalEntityId&lt;\\\/code&gt;: The unique identifier of the legal entity that has the contractual relationship with your marketplace and owns the bank account. For sole proprietorships, this is the legal entity ID of the individual owner.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;strong&gt;legalEntity&lt;\\\/strong&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-roles\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;roles&lt;\\\/a&gt;: The role(s) required to use the component(s). Set this to &lt;strong&gt;createTransferInstrumentComponent&lt;\\\/strong&gt; and\\\/or &lt;strong&gt;manageTransferInstrumentComponent&lt;\\\/strong&gt;.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The type of product the component belongs to.&lt;\\\/td&gt;\\n&lt;td&gt;Set this to &lt;strong&gt;onboarding&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;Here is an example request for creating a session token.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Create a session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/test.adyen.com\\\\\\\/authe\\\\\\\/api\\\\\\\/v1\\\\\\\/sessions \\\\\\\\\\\\n-H &#039;content-type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_LEGAL_ENTITY_MANAGEMENT_API_KEY&#039; \\\\\\\\\\\\n-D &#039;{\\\\n    \\\\&amp;quot;allowOrigin\\\\&amp;quot;:\\\\&amp;quot;https:\\\\\\\/\\\\\\\/yourcompany.com\\\\&amp;quot;,\\\\n    \\\\&amp;quot;product\\\\&amp;quot;:\\\\&amp;quot;onboarding\\\\&amp;quot;,\\\\n    \\\\&amp;quot;policy\\\\&amp;quot;: {\\\\n        \\\\&amp;quot;resources\\\\&amp;quot;: [\\\\n           {\\\\n               \\\\&amp;quot;legalEntityId\\\\&amp;quot;: \\\\&amp;quot;LE00000000000000000000001\\\\&amp;quot;,\\\\n               \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;legalEntity\\\\&amp;quot;\\\\n           }\\\\n        ],\\\\n        \\\\&amp;quot;roles\\\\&amp;quot;: [\\\\n            \\\\&amp;quot;createTransferInstrumentComponent\\\\&amp;quot;,\\\\n            \\\\&amp;quot;manageTransferInstrumentComponent\\\\&amp;quot;\\\\n        ]\\\\n    }\\\\n}&#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;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end. Additionally, you need to pass the &lt;code&gt;token&lt;\\\/code&gt; value to the &lt;code&gt;sdkToken&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#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;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;30a554856d80bd5cded543368efaf071&quot;:&quot;&lt;h2 id=\\&quot;install-library\\&quot;&gt;2. Install component library in your front end&lt;\\\/h2&gt;\\n&lt;p&gt;Install the &lt;strong&gt;Adyen KYC Components&lt;\\\/strong&gt; library in your front-end application as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the npm package.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;npm install @adyen\\\/kyc-components --save&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the library, the components, and the style sheet.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;import AdyenKyc from &#039;@adyen\\\/kyc-components&#039;;\\nimport &#039;@adyen\\\/kyc-components\\\/styles.css&#039;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;ba4c8a51f90f0fb60426c4609d368a42&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather the following information to be passed when initializing the library and its components.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather these parameters to initialize the library.&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 style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&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;country&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The two-letter &lt;a href=\\&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/ISO_3166-1_alpha-2\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 3166-1 alpha-2&lt;\\\/a&gt; country code of the legal entity.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;strong&gt;US&lt;\\\/strong&gt; for the United States of America.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL of the environment for the component integration.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;code&gt;https:\\\/\\\/test.adyen.com\\\/&lt;\\\/code&gt; for the test environment and &lt;code&gt;https:\\\/\\\/onboardingcomponents-live.adyen.com\\\/&lt;\\\/code&gt; for the live environment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;getSdkToken&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The callback function that retrieves an authentication session token and refreshes the current session.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;locale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The language of the component. See the list of &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;Use &lt;strong&gt;en-US&lt;\\\/strong&gt; for English.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;sdkToken&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The token received from the &lt;a href=\\&quot;#create-token\\&quot;&gt;create session token&lt;\\\/a&gt; API response.&lt;\\\/td&gt;\\n&lt;td&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;Gather these parameters to initialize each component.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabPv0gA92582\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92582&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:180%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;legalEntityId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity to which the transfer instrument belongs.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onSubmitSuccess&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the transfer instrument is successfully submitted.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(submittedData) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;openBankingPartnerConfigId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt; &amp;lt;\\\\\\\/br&amp;gt;For US, CA&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of your brand name shown to your user during instant bank account verification. They can initiate the verification process through open banking providers, like Plaid or Tink.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;To customize the parameter value, reach out to your Adyen contact.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;settings&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains: &amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;&amp;lt;code&amp;gt;allowIntraRegionCrossBorderPayout&amp;lt;\\\\\\\/code&amp;gt;: if set to &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;, users can select a payout account in a different EU\\\\\\\/EEA country (including Switzerland and the UK) than the country of their legal entity.&amp;lt;\\\\\\\/li&amp;gt; &amp;lt;li&amp;gt;&amp;lt;code&amp;gt;allowBankAccountFormatSelection&amp;lt;\\\\\\\/code&amp;gt;: if set to &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;, users can choose between a local format or IBAN for their payout account, if applicable.&amp;lt;\\\\\\\/li&amp;gt; &amp;lt;\\\\\\\/ul&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowIntraRegionCrossBorderPayout:true&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;code&amp;gt;allowBankAccountFormatSelection:false&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;transferInstrumentId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transfer instrument. When the parameter is passed, the component shows information about this transfer instrument.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;SE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ti-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ti&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;legalEntityId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity to which the transfer instrument belongs.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onAdd&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user selects &amp;lt;strong&amp;gt;Add bank account&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(legalEntityId) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onEdit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user selects &amp;lt;strong&amp;gt;Edit details&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(transferInstrumentId, legalEntityId) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onInitiateRemove&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered when the user selects the option to delete the transfer instrument.&amp;lt;\\\\\\\/br&amp;gt;It expects a boolean return value of &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt; if the user confirms the deletion; otherwise, it should return &amp;lt;strong&amp;gt;false&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt; &amp;lt;div class=\\\\&amp;quot;notices green\\\\&amp;quot;&amp;gt;The minimum required library version is 3.30.&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;() =&amp;amp;gt; { return doesUserConfirm }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRemoveSuccess&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered when the transfer instrument is removed.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(transferInstrumentId, legalEntityId) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ti-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ti&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabNzLuF92582\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92582&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;create-transfer-instrument-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ti-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ti&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;manage-transfer-instrument-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ti-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ti&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabbETe792582\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92582&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function getSdkToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;createTransferInstrumentComponent\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ti-add-function_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ti&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function getSdkToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;manageTransferInstrumentComponent\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ti-add-function_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ti&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;In this step, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt; by setting the &lt;code&gt;locale&lt;\\\/code&gt; parameter. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabtSOYm92582\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92582&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Create Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;const adyenKycHandler = new AdyenKyc({\\\\\\\\n    locale: &amp;#039;en-US&amp;#039;,\\\\\\\\n    country: &amp;#039;US&amp;#039;,\\\\\\\\n    environment: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/test.adyen.com&amp;#039;,\\\\\\\\n    sdkToken: token,\\\\\\\\n    getSdkToken\\\\\\\\n  });\\\\\\\\n\\\\\\\\nconst createTransferInstrumentComponent = adyenKycHandler\\\\\\\\n    .create(&amp;#039;createTransferInstrumentComponent&amp;#039;, {\\\\\\\\n      legalEntityId,\\\\\\\\n      transferInstrumentId, \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional\\\\\\\\n      openBankingPartnerConfigId: &amp;#039;YourBrandOBConfigId&amp;#039;,\\\\\\\\n      settings: {\\\\\\\\n        allowIntraRegionCrossBorderPayout: true, \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional\\\\\\\\n        allowBankAccountFormatSelection: true \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional\\\\\\\\n      },\\\\\\\\n      onSubmitSuccess: (submittedData) =&amp;amp;gt; {}\\\\\\\\n    })\\\\\\\\n    .mount(&amp;#039;#create-transfer-instrument-container&amp;#039;); \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Mount to the container you created&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-ti-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;create-ti&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Manage Transfer Instrument component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;const adyenKycHandler = new AdyenKyc({\\\\\\\\n    locale: &amp;#039;en-US&amp;#039;,\\\\\\\\n    country: &amp;#039;US&amp;#039;,\\\\\\\\n    environment: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/test.adyen.com&amp;#039;,\\\\\\\\n    sdkToken: token,\\\\\\\\n    getSdkToken\\\\\\\\n  });\\\\\\\\n\\\\\\\\nconst manageTransferInstrumentComponent = adyenKycHandler\\\\\\\\n    .create(&amp;#039;manageTransferInstrumentComponent&amp;#039;, {\\\\\\\\n     legalEntityId,\\\\\\\\n     onAdd: (legalEntityId) =&amp;amp;gt; {},\\\\\\\\n     onEdit: (transferInstrumentId, legalEntityId) =&amp;amp;gt; {},\\\\\\\\n     onRemoveSuccess: (transferInstrumentId, legalEntityId) =&amp;amp;gt; {} \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional\\\\\\\\n     onInitiateRemove: () =&amp;amp;gt; {} \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Optional. The minimum library version is 3.30\\\\\\\\n    })\\\\\\\\n    .mount(&amp;#039;#manage-transfer-instrument-container&amp;#039;); \\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/ Mount to the container you created&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-ti&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-ti-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;manage-ti&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;ce4f1bc6d4a0f1ea2ccd18b442373ccd&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;4. (Optional) Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The transfer instrument components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables (recommended) and the class settings:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Inspect the components using your browser&#039;s developer tools.&lt;\\\/li&gt;\\n&lt;li&gt;Modify the styles in your style sheet file.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;For the best user experience when customizing components, we recommend the following:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Choose color combinations that complement each other well and provide enough contrast for readability, especially for text and navigation elements.&lt;\\\/li&gt;\\n&lt;li&gt;Follow accessibility guidelines to ensure that the color palette is inclusive and usable for individuals with visual impairments.&lt;\\\/li&gt;\\n&lt;li&gt;Test your customizations before implementing them live.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following tabs show the available CSS variables and their default values.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabHTLpX67328\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;67328&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Font&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default font settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;font&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;css&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;\\\\\\\\\\\\\\\/** Font family *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-caption-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-m-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-l-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font size *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-font-size: 12px;\\\\\\\\n--adyen-sdk-text-body-font-size: 14px;\\\\\\\\n--adyen-sdk-text-title-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-mobile-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-font-size: 18px;\\\\\\\\n--adyen-sdk-text-title-m-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-font-size: 24px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font weight *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-weight: 400;\\\\\\\\n--adyen-sdk-text-caption-font-weight: 400;\\\\\\\\n--adyen-sdk-text-body-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-caption-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-body-strongest-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-m-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-l-font-weight: 600;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Line height *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-line-height: 18px;\\\\\\\\n--adyen-sdk-text-body-line-height: 20px;\\\\\\\\n--adyen-sdk-text-title-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-mobile-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-line-height: 28px;\\\\\\\\n--adyen-sdk-text-title-m-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-line-height: 34px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Primary font color - main font color for components *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-primary: #00112c;\\\\\\\\n--adyen-sdk-color-label-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-label-primary-active: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary font color - secondary font color (ex. helper text, captions) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-secondary: #5c687c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary font color - tertiary font color (ex. field placeholder text) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-tertiary: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Highlight font color - pop of color (ex. current form step indicator) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-highlight: #0070f5;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary font color - ex. button text color *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-inverse-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-active: #eeeff1;\\\\\\\\n--adyen-sdk-color-label-inverse-secondary: #9ea6b1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Link font color - sets color of links *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-link-primary: #00112c;\\\\\\\\n--adyen-sdk-color-link-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-link-primary-active: #8d95a3;\\\\\\\\n--adyen-sdk-color-link-primary-disabled: #8d95a3;&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;font_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Background color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default background color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;background-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary background - sets bg color for cards, form fields, task list *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-background-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-primary-active: #eeeff1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary background - sets bg color for actions menu, accordion, default alert, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-secondary: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-secondary-hover: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-secondary-active: #e3e5e9;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary background - sets bg color for text buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-tertiary: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-tertiary-hover: #e3e5e9;\\\\\\\\n--adyen-sdk-color-background-tertiary-active: #dbdee2;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary background - main button, radio, and checkbox colors *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-inverse-primary: #00112c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-active: #8d95a3;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;background_color_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Outline color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default outline color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;outline-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary outline - sets border color for cards, modal dividers, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-primary: #dbdee2;\\\\\\\\n--adyen-sdk-color-outline-primary-hover: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-primary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary outline - sets border color for dropzone and buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-secondary: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-secondary-hover: #b8bdc6;\\\\\\\\n--adyen-sdk-color-outline-secondary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary outline - sets border color for form fields (checkbox, input radio, select) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-tertiary: #8d95a3;\\\\\\\\n--adyen-sdk-color-outline-tertiary-hover: #6d7789;\\\\\\\\n--adyen-sdk-color-outline-tertiary-active: #00112c;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;outline_color_2_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Border&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default border settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;border&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Small border radius - for checkboxes and tags *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-s: 4px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Medium border radius - for input fields, buttons, toasts, task list items *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-m: 8px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Large border radius - for cards, alerts, modals, action menu *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-l: 12px;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;border_3_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The following tabs show examples of how to style the components.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabF7VS067328\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;67328&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Example 1: Override CSS variables&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-1&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the default font family to Inter *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-text-body-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-caption-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-m-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-l-font-family: Inter,sans-serif;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the primary inverse background color (ex. main button colors) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-background-inverse-primary: #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-hover:  #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-active:  #7e5bed;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting border radius for buttons and input fields *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-border-radius-m: 15px;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_1:_override_css_variables_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Example 2: Update CSS class settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-2&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;.adyen-kyc-label__text {\\\\\\\\nfont-weight: bold;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adyen-kyc-dropin__content {\\\\\\\\n  background-color: #f1f1f1;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adyen-kyc-field-verification-methods__card {\\\\\\\\n  background-color: #e2e2e2;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adyen-action-bar {\\\\\\\\n  background-color: #f1f1f1;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adyen-action-bar__button {\\\\\\\\n  background-color: #71e6af;\\\\\\\\n  border-radius: 60px;\\\\\\\\n  color: #000000;\\\\\\\\n  font-weight: 100;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adl-button--secondary {\\\\\\\\n  background-color: #ffffff;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_2:_update_css_class_settings_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;981689cceb5c1cc73ee3d3626f6ffe72&quot;:&quot;&lt;h2&gt;Supported languages&lt;\\\/h2&gt;\\n&lt;p&gt;You can localize the Onboarding components by setting one of the following languages.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;sticky-table-container\\&quot;&gt;\\n    \\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Language&lt;\\\/th&gt;\\n&lt;th&gt;Locale code&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Bulgarian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;bg-BG&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Croatian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;hr-HR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Czech&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;cs-CZ&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Danish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;da-DK&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Dutch&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;nl-NL&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;English&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;en-US&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Estonian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;et-EE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Finnish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fi-FI&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;French&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fr-FR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;German&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;de-DE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Greek&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;el-GR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Hungarian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;hu-HU&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Italian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;it-IT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Latvian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;lv-LV&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Lithuanian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;lt-LT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Norwegian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;no-NO&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Polish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pl-PL&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Portuguese&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pt-PT&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Romanian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;ro-RO&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Slovak&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sk-SK&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Slovenian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sl-SI&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Spanish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;Swedish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;sv-SE&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;\\\/div&gt;\\n&quot;,&quot;d72fc6b3361ee4387d3a806dcee691fa&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have an Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/platforms\\\/manage-access\\\/api-credentials-web-service?tab=create-lem_2\\&quot;&gt;Legal Entity Management API key&lt;\\\/a&gt; (for example, &lt;strong&gt;ws[_123456]@Scope.Company_[YourCompanyAccount]&lt;\\\/strong&gt;) to access the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Session authentication API&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin:&lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; and &lt;a href=\\&quot;\\\/platforms\\\/components-overview#supported-browsers\\&quot;&gt;browser versions&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Follow the &lt;a href=\\&quot;\\\/platforms\\\/onboard-users\\\/onboarding-steps\\&quot;&gt;API-only onboarding&lt;\\\/a&gt; guide to complete all necessary steps before creating transfer instruments.&lt;\\\/li&gt;&lt;li&gt;Review our guidance on the &lt;a href=\\&quot;\\\/platforms\\\/verification-overview\\&quot;&gt;verification process&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;e077c74f1c213a54473a677828e6d267&quot;:&quot;&lt;h2&gt;Transfer Instrument Configuration component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transfer Instrument Configuration&lt;\\\/strong&gt; component enables users to add information about their bank accounts, also known as transfer instruments. Users can either give permission for the &lt;a href=\\&quot;\\\/platforms\\\/onboard-users#instant-bank-account-verification\\&quot;&gt;instant verification&lt;\\\/a&gt; of their bank account, or upload documents which Adyen uses to validate the bank account.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;taboQfRC65507\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65507&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-configuration-mobile.jpg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-configuration-mobile.jpg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-it-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-it-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-configuration-desktop.jpg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-configuration-desktop.jpg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;create-it-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;create-it-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transfer Instrument Management component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transfer Instrument Management&lt;\\\/strong&gt; component enables users to view a list of all bank accounts (transfer instruments) that have been added, along with their corresponding verification statuses and error messages, if applicable.&lt;\\\/p&gt;\\n&lt;p&gt;Users can also add a new bank account or delete an existing one if it is no longer needed. Any changes made are applied immediately, ensuring that payouts are delivered to the correct transfer instrument. If a bank account still needs to be added, users will be prompted to do so when accessing the component. Learn how to use the events emitted to create a complete &lt;a href=\\&quot;#user-flow-and-events\\&quot;&gt;user flow&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabVdaYc65507\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65507&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-management-mobile.jpg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-management-mobile.jpg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-it-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-it-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-management-desktop.jpg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/onboarding-components-marketplace\\\\\\\/transfer-instrument\\\\\\\/4-0-0\\\\\\\/component-description\\\\\\\/transfer-instrument-management-desktop.jpg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;manage-it-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;manage-it-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;2bfff0a8b00cbbd38413f507b562b318&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;Follow these steps to integrate the transfer instrument components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#create-token\\&quot;&gt;Create an authentication session from your server&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#install-library\\&quot;&gt;Install component library in your front end&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#configure-component-properties\\&quot;&gt;Configure component properties&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;c3ba0d498de5f20678b868a3f9614559&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request using the API key that you set up for the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Legal Entity Management API&lt;\\\/a&gt;. In the request body, specify these 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 style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:180%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Example&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The URL where the component will appear.&lt;\\\/td&gt;\\n&lt;td&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your marketplace. Can include a subdomain.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;legalEntityId&lt;\\\/code&gt;: The unique identifier of the legal entity that has the contractual relationship with your marketplace and owns the bank account. For sole proprietorships, this is the legal entity ID of the individual owner.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;strong&gt;legalEntity&lt;\\\/strong&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-roles\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;roles&lt;\\\/a&gt;: The role(s) required to use the component(s). Set this to &lt;strong&gt;transferInstrumentConfiguration&lt;\\\/strong&gt; and\\\/or &lt;strong&gt;transferInstrumentManagement&lt;\\\/strong&gt;&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&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;The type of product the component belongs to.&lt;\\\/td&gt;\\n&lt;td&gt;Set this to &lt;strong&gt;onboarding&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;Here is an example request for creating a session token.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create a session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/test.adyen.com\\\\\\\/authe\\\\\\\/api\\\\\\\/v1\\\\\\\/sessions \\\\\\\\\\\\n-H &#039;content-type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_LEGAL_ENTITY_MANAGEMENT_API_KEY&#039; \\\\\\\\\\\\n-D &#039;{\\\\n    \\\\&amp;quot;allowOrigin\\\\&amp;quot;:\\\\&amp;quot;https:\\\\\\\/\\\\\\\/yourcompany.com\\\\&amp;quot;,\\\\n    \\\\&amp;quot;product\\\\&amp;quot;:\\\\&amp;quot;onboarding\\\\&amp;quot;,\\\\n    \\\\&amp;quot;policy\\\\&amp;quot;: {\\\\n        \\\\&amp;quot;resources\\\\&amp;quot;: [\\\\n           {\\\\n               \\\\&amp;quot;legalEntityId\\\\&amp;quot;: \\\\&amp;quot;LE00000000000000000000001\\\\&amp;quot;,\\\\n               \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;legalEntity\\\\&amp;quot;\\\\n           }\\\\n        ],\\\\n        \\\\&amp;quot;roles\\\\&amp;quot;: [\\\\n            \\\\&amp;quot;transferInstrumentConfiguration\\\\&amp;quot;,\\\\n            \\\\&amp;quot;transferInstrumentManagement\\\\&amp;quot;\\\\n        ]\\\\n    }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#configure-component-properties\\&quot;&gt;configuring the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end. Additionally, you need to pass the &lt;code&gt;token&lt;\\\/code&gt; value to the &lt;code&gt;sdkToken&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#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;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;d3ca3d56178828878202776f256cf358&quot;:&quot;&lt;h2 id=\\&quot;install-library\\&quot;&gt;2. Install component library in your front end&lt;\\\/h2&gt;\\n&lt;p&gt;Install the &lt;strong&gt;Adyen KYC Components&lt;\\\/strong&gt; library in your front-end application as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the npm package.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;npm install @adyen\\\/kyc-components --save&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the component you need.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;import &#039;@adyen\\\/kyc-components\\\/transfer-instrument&#039;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Simply by importing the module, the web component is automatically registered and ready for use.&lt;\\\/p&gt;&quot;,&quot;e89afe5d5698a8dc60ae496f968cc3aa&quot;:&quot;&lt;h2 id=\\&quot;configure-component-properties\\&quot;&gt;3. Configure component properties&lt;\\\/h2&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabumSeT23823\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;23823&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transfer Instrument Configuration component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:180%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;environment&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The URL of the environment for the component integration.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Use &amp;lt;code&amp;gt;test&amp;lt;\\\\\\\/code&amp;gt; for the test environment and &amp;lt;code&amp;gt;live&amp;lt;\\\\\\\/code&amp;gt; for the live environment.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fetchToken&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#create-token\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; that retrieves an authentication session token and refreshes the current session.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;locale&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The language of the component. See the list of &amp;lt;a href=\\\\&amp;quot;#supported-languages\\\\&amp;quot;&amp;gt;supported languages&amp;lt;\\\\\\\/a&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Use &amp;lt;strong&amp;gt;en-US&amp;lt;\\\\\\\/strong&amp;gt; for English.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;rootlegalentityid&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity to which the transfer instrument belongs.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;complete&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the transfer instrument is successfully submitted and the component has finished its task.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(submittedData) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;openBankingPartnerConfigId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;     For US, CA&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of your brand name shown to your user during instant bank account verification. They can initiate the verification process through open banking providers, like Plaid or Tink.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;To customize the parameter value, reach out to your Adyen contact.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;settings&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains: &amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;&amp;lt;code&amp;gt;allowIntraRegionCrossBorderPayout&amp;lt;\\\\\\\/code&amp;gt;: if set to &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;, users can select a payout account in a different EU\\\\\\\/EEA country (including Switzerland and the UK) than the country of their legal entity.&amp;lt;\\\\\\\/li&amp;gt; &amp;lt;li&amp;gt;&amp;lt;code&amp;gt;allowBankAccountFormatSelection&amp;lt;\\\\\\\/code&amp;gt;: if set to &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;, users can choose between a local format or IBAN for their payout account, if applicable.&amp;lt;\\\\\\\/li&amp;gt; &amp;lt;\\\\\\\/ul&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowIntraRegionCrossBorderPayout:true&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;code&amp;gt;allowBankAccountFormatSelection:false&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;transferInstrumentId&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transfer instrument. When the parameter is passed, the component shows information about this transfer instrument.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;SE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transfer Instrument Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;Example&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;environment&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Refers to the application environment The URL of the environment for the component integration.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Use &amp;lt;a href=\\\\&amp;quot;https:\\\\\\\/\\\\\\\/test.adyen.com\\\\\\\/\\\\&amp;quot; target=\\\\&amp;quot;_blank\\\\&amp;quot; rel=\\\\&amp;quot;nofollow noopener noreferrer\\\\&amp;quot; class=\\\\&amp;quot;external-link no-image\\\\&amp;quot;&amp;gt;test&amp;lt;\\\\\\\/a&amp;gt; for the test environment and &amp;lt;a href=\\\\&amp;quot;https:\\\\\\\/\\\\\\\/onboardingcomponents-live.adyen.com\\\\\\\/\\\\&amp;quot; target=\\\\&amp;quot;_blank\\\\&amp;quot; rel=\\\\&amp;quot;nofollow noopener noreferrer\\\\&amp;quot; class=\\\\&amp;quot;external-link no-image\\\\&amp;quot;&amp;gt;live&amp;lt;\\\\\\\/a&amp;gt; for the live environment.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fetchToken&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; that retrieves an authentication session token and refreshes the current session.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;locale&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The language of the component. See the list of &amp;lt;a href=\\\\&amp;quot;#supported-languages\\\\&amp;quot;&amp;gt;supported languages&amp;lt;\\\\\\\/a&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Use &amp;lt;strong&amp;gt;en-US&amp;lt;\\\\\\\/strong&amp;gt; for English.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;rootlegalentityid&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the legal entity to which the transfer instrument belongs.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;strong&amp;gt;LE00000000000000000000001&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;add&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user selects &amp;lt;strong&amp;gt;Add bank account&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(legalEntityId) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;edit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The &amp;lt;a href=\\\\&amp;quot;#callback-functions\\\\&amp;quot;&amp;gt;callback function&amp;lt;\\\\\\\/a&amp;gt; triggered when the user selects &amp;lt;strong&amp;gt;Edit details&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(transferInstrumentId, legalEntityId) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;remove&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered when the transfer instrument is removed.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;(transferInstrumentId, legalEntityId) =&amp;amp;gt; {}&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-management_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabenIu823823\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;23823&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transfer Instrument Configuration component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function fetchToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;transferInstrumentConfiguration\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration-add-function_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transfer Instrument Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Add function to refresh a session token&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;function fetchToken() {\\\\\\\\n  return fetch(&amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/api.yourcompany.com\\\\\\\\\\\\\\\/adyen-onboarding-sdk-token&amp;#039;,\\\\\\\\n        { \\\\\\\\&amp;amp;quot;policy\\\\\\\\&amp;amp;quot;: { \\\\\\\\&amp;amp;quot;roles\\\\\\\\&amp;amp;quot;: [\\\\\\\\&amp;amp;quot;transferInstrumentManagement\\\\\\\\&amp;amp;quot;] } });\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-management-add-function_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add the component in your template, for example in HTML, JSX, or Vue.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;In this step, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt; by setting the &lt;code&gt;locale&lt;\\\/code&gt; parameter. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;For &lt;strong&gt;Transfer Instrument Configuration&lt;\\\/strong&gt; component, select the tab below corresponding to the framework you are using:\\n\\n&lt;div id=\\&quot;tabWsrTB23823\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;23823&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;HTML&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Configure library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;html&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;&amp;amp;lt;adyen-transfer-instrument-configuration\\\\\\\\n    locale=\\\\\\\\&amp;amp;quot;en-US\\\\\\\\&amp;amp;quot;\\\\\\\\n    environment=\\\\\\\\&amp;amp;quot;test\\\\\\\\&amp;amp;quot;\\\\\\\\n    rootlegalentityid=\\\\\\\\&amp;amp;quot;myLegalEntityId\\\\\\\\&amp;amp;quot;\\\\\\\\n    fetchToken=\\\\\\\\&amp;amp;quot;fetchToken\\\\\\\\&amp;amp;quot;\\\\\\\\n&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/adyen-transfer-instrument-configuration&amp;amp;gt;\\\\\\\\n\\\\\\\\n&amp;amp;lt;script&amp;amp;gt;\\\\\\\\n    document.querySelector(&amp;#039;adyen-transfer-instrument-configuration&amp;#039;).addEventListener(&amp;#039;complete&amp;#039;,\\\\\\\\n        (data) =&amp;amp;gt; {\\\\\\\\n            console.log(\\\\\\\\&amp;amp;quot;submitted the transfer instrument with:\\\\\\\\&amp;amp;quot;, data);\\\\\\\\n        }\\\\\\\\n    );\\\\\\\\n&amp;amp;lt;\\\\\\\\\\\\\\\/script&amp;amp;gt;&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration-html&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration-html&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;React&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Configure library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;jsx\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;const oncomplete = (data) =&amp;amp;gt; {\\\\\\\\n    console.log(\\\\\\\\\\\\&amp;quot;submitted the transfer instrument with:\\\\\\\\\\\\&amp;quot;, data);\\\\\\\\n};\\\\\\\\n\\\\\\\\n&amp;amp;lt;adyen-transfer-instrument-configuration\\\\\\\\n    locale=\\\\\\\\\\\\&amp;quot;en-US\\\\\\\\\\\\&amp;quot;\\\\\\\\n    environment=\\\\\\\\\\\\&amp;quot;test\\\\\\\\\\\\&amp;quot;\\\\\\\\n    fetchToken={fetchToken}\\\\\\\\n    rootlegalentityid=\\\\\\\\\\\\&amp;quot;myLegalEntityId\\\\\\\\\\\\&amp;quot;\\\\\\\\n    transferInstrumentId=\\\\\\\\\\\\&amp;quot;myTransferInstrumentId\\\\\\\\\\\\&amp;quot;\\\\\\\\n    oncomplete={oncomplete}\\\\\\\\n&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/adyen-transfer-instrument-configuration&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration-react&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration-react&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Vue&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Configure library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\n &amp;amp;lt;template&amp;amp;gt;\\\\\\\\n  &amp;amp;lt;adyen-transfer-instrument-configuration\\\\\\\\n      locale=\\\\\\\\\\\\&amp;quot;en-US\\\\\\\\\\\\&amp;quot;\\\\\\\\n      environment=\\\\\\\\\\\\&amp;quot;test\\\\\\\\\\\\&amp;quot;\\\\\\\\n      rootlegalentityid=\\\\\\\\\\\\&amp;quot;myLegalEntityId\\\\\\\\\\\\&amp;quot;\\\\\\\\n      :fetchToken=\\\\\\\\\\\\&amp;quot;fetchToken\\\\\\\\\\\\&amp;quot;\\\\\\\\n      @complete=\\\\\\\\\\\\&amp;quot;handleOnComplete\\\\\\\\\\\\&amp;quot;\\\\\\\\n  &amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/adyen-transfer-instrument-configuration&amp;amp;gt;\\\\\\\\n&amp;amp;lt;\\\\\\\\\\\\\\\/template&amp;amp;gt;\\\\\\\\n\\\\\\\\n&amp;amp;lt;script&amp;amp;gt;\\\\\\\\nconst handleOnComplete = (data: AdyenTransferInstrumentProps[\\\\\\\\\\\\&amp;quot;onComplete\\\\\\\\\\\\&amp;quot;]) =&amp;amp;gt; {\\\\\\\\n  console.log(\\\\\\\\\\\\&amp;quot;submitted the transfer instrument with:\\\\\\\\\\\\&amp;quot;, data);\\\\\\\\n};\\\\\\\\n&amp;amp;lt;\\\\\\\\\\\\\\\/script&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration-vue&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration-vue&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;b. For &lt;strong&gt;Transfer Instrument Management&lt;\\\/strong&gt; component, select the tab below corresponding to the framework you are using:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabH5pF423823\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;23823&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;HTML&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Configure library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;html&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;&amp;amp;lt;adyen-transfer-instrument-management\\\\\\\\n    locale=\\\\\\\\&amp;amp;quot;en-US\\\\\\\\&amp;amp;quot;\\\\\\\\n    environment=\\\\\\\\&amp;amp;quot;test\\\\\\\\&amp;amp;quot;\\\\\\\\n    fetchToken=\\\\\\\\&amp;amp;quot;{fetchToken}\\\\\\\\&amp;amp;quot;\\\\\\\\n    rootlegalentityid=\\\\\\\\&amp;amp;quot;myLegalEntityId\\\\\\\\&amp;amp;quot;\\\\\\\\n&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/adyen-transfer-instrument-management&amp;amp;gt;\\\\\\\\n\\\\\\\\n&amp;amp;lt;script&amp;amp;gt;\\\\\\\\n    document.querySelector(&amp;#039;adyen-transfer-instrument-management&amp;#039;).addEventListener(&amp;#039;add&amp;#039;, (rootLegalEntityId) =&amp;amp;gt; {\\\\\\\\n         console.log(\\\\\\\\&amp;amp;quot;User wants to add a transfer instrument\\\\\\\\&amp;amp;quot;);\\\\\\\\n         })\\\\\\\\n\\\\\\\\n    document.querySelector(&amp;#039;adyen-transfer-instrument-management&amp;#039;).addEventListener(&amp;#039;remove&amp;#039;, (transferInstrumentId, rootLegalEntityId) =&amp;amp;gt; {\\\\\\\\n         console.log(\\\\\\\\&amp;amp;quot;User wants to remove a transfer instrument\\\\\\\\&amp;amp;quot;);\\\\\\\\n         })\\\\\\\\n\\\\\\\\n    document.querySelector(&amp;#039;adyen-transfer-instrument-management&amp;#039;).addEventListener(&amp;#039;edit&amp;#039;, (transferInstrumentId, rootLegalEntityId) =&amp;amp;gt; {\\\\\\\\n         console.log(\\\\\\\\&amp;amp;quot;User wants to edit a transfer instrument\\\\\\\\&amp;amp;quot;);\\\\\\\\n         })\\\\\\\\n&amp;amp;lt;\\\\\\\\\\\\\\\/script&amp;amp;gt;&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration-html&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration-html&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;React&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Configure library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;jsx\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;const onAdd = (rootLegalEntityId: string) =&amp;amp;gt; {\\\\\\\\n    console.log(\\\\\\\\\\\\&amp;quot;User wants to add a transfer instrument\\\\\\\\\\\\&amp;quot;);\\\\\\\\n};\\\\\\\\n\\\\\\\\nconst onRemove = (transferInstrumentId: string, rootLegalEntityId: string) =&amp;amp;gt; {\\\\\\\\n    console.log(\\\\\\\\\\\\&amp;quot;User wants to remove a transfer instrument\\\\\\\\\\\\&amp;quot;);\\\\\\\\n};\\\\\\\\n\\\\\\\\nconst onEdit = (transferInstrumentId: string, rootLegalEntityId: string) =&amp;amp;gt; {\\\\\\\\n    console.log(\\\\\\\\\\\\&amp;quot;User wants to edit a transfer instrument\\\\\\\\\\\\&amp;quot;);\\\\\\\\n};\\\\\\\\n\\\\\\\\n&amp;amp;lt;adyen-transfer-instrument-management\\\\\\\\n    locale=\\\\\\\\\\\\&amp;quot;en-US\\\\\\\\\\\\&amp;quot;\\\\\\\\n    environment=\\\\\\\\\\\\&amp;quot;test\\\\\\\\\\\\&amp;quot;\\\\\\\\n    fetchToken={fetchToken}\\\\\\\\n    rootlegalentityid=\\\\\\\\\\\\&amp;quot;myLegalEntityId\\\\\\\\\\\\&amp;quot;\\\\\\\\n    transferInstrumentId=\\\\\\\\\\\\&amp;quot;myTransferInstrumentId\\\\\\\\\\\\&amp;quot;\\\\\\\\n    onadd={onAdd}\\\\\\\\n    onremove={onRemove}\\\\\\\\n    onedit={onEdit}\\\\\\\\n&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/adyen-transfer-instrument-management&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration-react&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration-react&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Vue&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Configure library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\n\\\\\\\\n&amp;amp;lt;template&amp;amp;gt;\\\\\\\\n  &amp;amp;lt;adyen-transfer-instrument-management\\\\\\\\n      locale=\\\\\\\\\\\\&amp;quot;en-US\\\\\\\\\\\\&amp;quot;\\\\\\\\n      environment=\\\\\\\\\\\\&amp;quot;test\\\\\\\\\\\\&amp;quot;\\\\\\\\n      rootlegalentityid=\\\\\\\\\\\\&amp;quot;myLegalEntityId\\\\\\\\\\\\&amp;quot;\\\\\\\\n      :fetchToken=\\\\\\\\\\\\&amp;quot;fetchToken\\\\\\\\\\\\&amp;quot;\\\\\\\\n      @add=\\\\\\\\\\\\&amp;quot;onAdd\\\\\\\\\\\\&amp;quot;\\\\\\\\n      @remove=\\\\\\\\\\\\&amp;quot;onRemove\\\\\\\\\\\\&amp;quot;\\\\\\\\n      @edit=\\\\\\\\\\\\&amp;quot;onEdit\\\\\\\\\\\\&amp;quot;\\\\\\\\n  &amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/adyen-transfer-instrument-management&amp;amp;gt;\\\\\\\\n&amp;amp;lt;\\\\\\\\\\\\\\\/template&amp;amp;gt;\\\\\\\\n\\\\\\\\n&amp;amp;lt;script&amp;amp;gt;\\\\\\\\n  const onAdd: AdyenTransferInstrumentManagementProps[\\\\\\\\\\\\&amp;quot;add\\\\\\\\\\\\&amp;quot;] = (rootLegalEntityId: string) =&amp;amp;gt; {\\\\\\\\n      console.log(\\\\\\\\\\\\&amp;quot;User wants to add a transfer instrument\\\\\\\\\\\\&amp;quot;);\\\\\\\\n  };\\\\\\\\n\\\\\\\\n  const onRemove: AdyenTransferInstrumentManagementProps[\\\\\\\\\\\\&amp;quot;remove\\\\\\\\\\\\&amp;quot;] = (transferInstrumentId: string, rootLegalEntityId: string) =&amp;amp;gt; {\\\\\\\\n      console.log(\\\\\\\\\\\\&amp;quot;User wants to remove a transfer instrument\\\\\\\\\\\\&amp;quot;);\\\\\\\\n  };\\\\\\\\n\\\\\\\\n  const onEdit: AdyenTransferInstrumentManagementProps[\\\\\\\\\\\\&amp;quot;edit\\\\\\\\\\\\&amp;quot;] = (transferInstrumentId: string, rootLegalEntityId: string) =&amp;amp;gt; {\\\\\\\\n      console.log(\\\\\\\\\\\\&amp;quot;User wants to edit a transfer instrument\\\\\\\\\\\\&amp;quot;);\\\\\\\\n  };\\\\\\\\n&amp;amp;lt;\\\\\\\\\\\\\\\/script&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;ti-configuration-vue&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;ti-configuration_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;ti-configuration-vue&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;59de0e7df99cda90a8f6f5a7353eb2eb&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;4. (Optional) Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;You can customize the appearance of your components by overriding the default values of CSS variables.&lt;\\\/p&gt;\\n&lt;p&gt;For the best user experience when customizing components, we recommend the following:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Choose color combinations that complement each other well and provide enough contrast for readability, especially for text and navigation elements.&lt;\\\/li&gt;\\n&lt;li&gt;Follow accessibility guidelines to ensure that the color palette is inclusive and usable for individuals with visual impairments.&lt;\\\/li&gt;\\n&lt;li&gt;Test your customizations before implementing them live.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following tabs show the available CSS variables and their default values.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabhHx9V60079\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;60079&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Font&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default font settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;font&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;css&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;\\\\\\\\\\\\\\\/** Font family *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-caption-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-m-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n--adyen-sdk-text-title-l-font-family: \\\\\\\\&amp;amp;quot;Inter; Roboto; Oxygen; &amp;#039;Open Sans&amp;#039;; &amp;#039;Helvetica Neue&amp;#039;; Arial; sans-serif\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font size *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-font-size: 12px;\\\\\\\\n--adyen-sdk-text-body-font-size: 14px;\\\\\\\\n--adyen-sdk-text-title-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-mobile-font-size: 16px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-font-size: 18px;\\\\\\\\n--adyen-sdk-text-title-m-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-font-size: 20px;\\\\\\\\n--adyen-sdk-text-title-l-font-size: 24px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Font weight *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-body-font-weight: 400;\\\\\\\\n--adyen-sdk-text-caption-font-weight: 400;\\\\\\\\n--adyen-sdk-text-body-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-caption-stronger-font-weight: 500;\\\\\\\\n--adyen-sdk-text-body-strongest-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-m-font-weight: 600;\\\\\\\\n--adyen-sdk-text-title-l-font-weight: 600;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Line height *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-text-caption-line-height: 18px;\\\\\\\\n--adyen-sdk-text-body-line-height: 20px;\\\\\\\\n--adyen-sdk-text-title-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-mobile-line-height: 26px;\\\\\\\\n--adyen-sdk-text-title-m-mobile-line-height: 28px;\\\\\\\\n--adyen-sdk-text-title-m-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-mobile-line-height: 30px;\\\\\\\\n--adyen-sdk-text-title-l-line-height: 34px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Primary font color - main font color for components *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-primary: #00112c;\\\\\\\\n--adyen-sdk-color-label-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-label-primary-active: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary font color - secondary font color (ex. helper text, captions) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-secondary: #5c687c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary font color - tertiary font color (ex. field placeholder text) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-tertiary: #8d95a3;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Highlight font color - pop of color (ex. current form step indicator) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-highlight: #0070f5;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary font color - ex. button text color *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-label-inverse-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-label-inverse-primary-active: #eeeff1;\\\\\\\\n--adyen-sdk-color-label-inverse-secondary: #9ea6b1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Link font color - sets color of links *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-link-primary: #00112c;\\\\\\\\n--adyen-sdk-color-link-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-link-primary-active: #8d95a3;\\\\\\\\n--adyen-sdk-color-link-primary-disabled: #8d95a3;&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;font_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Background color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default background color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;background-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary background - sets bg color for cards, form fields, task list *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-primary: #ffffff;\\\\\\\\n--adyen-sdk-color-background-primary-hover: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-primary-active: #eeeff1;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary background - sets bg color for actions menu, accordion, default alert, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-secondary: #f7f7f8;\\\\\\\\n--adyen-sdk-color-background-secondary-hover: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-secondary-active: #e3e5e9;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary background - sets bg color for text buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-tertiary: #eeeff1;\\\\\\\\n--adyen-sdk-color-background-tertiary-hover: #e3e5e9;\\\\\\\\n--adyen-sdk-color-background-tertiary-active: #dbdee2;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Inverse primary background - main button, radio, and checkbox colors *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-background-inverse-primary: #00112c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-hover: #5c687c;\\\\\\\\n--adyen-sdk-color-background-inverse-primary-active: #8d95a3;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;background_color_1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Outline color&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default outline color settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;outline-color&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Primary outline - sets border color for cards, modal dividers, etc. *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-primary: #dbdee2;\\\\\\\\n--adyen-sdk-color-outline-primary-hover: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-primary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Secondary outline - sets border color for dropzone and buttons *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-secondary: #c9cdd3;\\\\\\\\n--adyen-sdk-color-outline-secondary-hover: #b8bdc6;\\\\\\\\n--adyen-sdk-color-outline-secondary-active: #00112c;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Tertiary outline - sets border color for form fields (checkbox, input radio, select) *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-color-outline-tertiary: #8d95a3;\\\\\\\\n--adyen-sdk-color-outline-tertiary-hover: #6d7789;\\\\\\\\n--adyen-sdk-color-outline-tertiary-active: #00112c;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;outline_color_2_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Border&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Default border settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;border&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;\\\\\\\\\\\\\\\/** Small border radius - for checkboxes and tags *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-s: 4px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Medium border radius - for input fields, buttons, toasts, task list items *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-m: 8px;\\\\\\\\n\\\\\\\\n\\\\\\\\\\\\\\\/** Large border radius - for cards, alerts, modals, action menu *\\\\\\\\\\\\\\\/\\\\\\\\n--adyen-sdk-border-radius-l: 12px;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;border_3_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The following tab shows an example of how to style the components.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabymdx760079\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;60079&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Example 1: Override CSS variables&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-1&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;css\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the default font family to Inter *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-text-body-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-caption-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-m-font-family: Inter,sans-serif;\\\\\\\\n  --adyen-sdk-text-title-l-font-family: Inter,sans-serif;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting the primary inverse background color (ex. main button colors) *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-color-background-inverse-primary: #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-hover:  #7e5bed;\\\\\\\\n  --adyen-sdk-color-background-inverse-primary-active:  #7e5bed;\\\\\\\\n\\\\\\\\n  \\\\\\\\\\\\\\\/** Setting border radius for buttons and input fields *\\\\\\\\\\\\\\\/\\\\\\\\n  --adyen-sdk-border-radius-m: 15px;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;example_1:_override_css_variables_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;false&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;772fe06d840d68d97d810557a3a3745e&quot;:&quot;&lt;h2 id=\\&quot;user-flow-and-events\\&quot;&gt;User flow and events&lt;\\\/h2&gt;\\n&lt;p&gt;When integrating components, you must listen to the events they dispatch. These events inform your application about the user&#039;s progress or actions within the component, allowing you to execute specific callback functions to manage the user flow.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;The &lt;strong&gt;Transfer Instrument Configuration&lt;\\\/strong&gt; component dispatches a &lt;code&gt;complete&lt;\\\/code&gt; event. Listening for this event allows you to understand when the user has finished their interaction, enabling you to react accordingly, for example navigating the UI to a new page.&lt;\\\/li&gt;\\n&lt;li&gt;The &lt;strong&gt;Transfer Instrument Management&lt;\\\/strong&gt; component emit multiple events to help you react to granular user actions. For example, this component dispatches three custom events:\\n&lt;ul&gt;\\n&lt;li&gt;The &lt;code&gt;add&lt;\\\/code&gt; event: Emitted when the user initiates the action to create a new transfer instrument.&lt;\\\/li&gt;\\n&lt;li&gt;The &lt;code&gt;edit&lt;\\\/code&gt; event: Emitted when the user modifies an existing transfer instrument.&lt;\\\/li&gt;\\n&lt;li&gt;The &lt;code&gt;remove&lt;\\\/code&gt; event: Emitted when the user deletes a transfer instrument.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;See the example data for the &lt;code&gt;complete&lt;\\\/code&gt; callback function below.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example `complete` data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;id: \\\\\\&quot;SE322JV223222F5GJVKHH8DTC\\\\\\&quot;\\\\npayoutAccountDetails: {\\\\n\\\\taccountHolder: \\\\\\&quot;Shelly Eller\\\\\\&quot;,\\\\n\\\\tbankAccountNumber: \\\\\\&quot;12312311\\\\\\&quot;,\\\\n\\\\tbranchCode: \\\\\\&quot;121121121\\\\\\&quot;,\\\\n\\\\tcurrency: \\\\\\&quot;USD\\\\\\&quot;,\\\\n}\\\\npayoutAccountDocuments: {\\\\n\\\\tbankStatementDocument: null,\\\\n\\\\tdescription: null,\\\\n}\\\\npayoutAccountVerification: {\\\\n\\\\tverifiedAccountHolder: \\\\\\&quot;Shelly Eller\\\\\\&quot;,\\\\n\\\\tverifiedBankAccountNumber: null,\\\\n\\\\tverifiedBankCountry: \\\\\\&quot;US\\\\\\&quot;,\\\\n\\\\tverifiedBankName: null,\\\\n\\\\tverifiedCurrencyCode: null,\\\\n}\\\\npayoutVerificationMethod: {\\\\n\\\\tbankCountry: \\\\\\&quot;US\\\\\\&quot;,\\\\n\\\\tpayoutVerificationMethod: \\\\\\&quot;manualVerification\\\\\\&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;&quot;}}}}}}\"\n        query-param-tab=\"component\"\n        query-param-box=\"integration\"\n        query-param-dropdown=\"version\">\n    <\/in-page-filtering>\n<\/div>\n<div class=\"version_docs__image-placeholder u-display-none\">\n    <\/div>\n\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/marketplaces\/onboard-users\/onboarding-steps\"\n                        target=\"_self\"\n                        >\n                    Onboarding steps\n                <\/a><\/li><li><a href=\"\/marketplaces\/components-overview\"\n                        target=\"_self\"\n                        >\n                    Component libraries\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/marketplaces\/onboard-users\/components","articleFields":{"description":"Use Adyen's prebuilt UI components to collect information from your users as part of your onboarding flow.","feedback_component":true,"parameters":{"directoryPath":"\/marketplaces","model":"marketplace"},"filters_component":false,"last_edit_on":"11-01-2024 16:13","page_id":"f29dc107-8455-4796-8a8f-af0741182857","decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/marketplaces\/onboard-users\/components","title":"Onboarding components","content":"\nThe Onboarding components are only compatible with the legal entities created with v3 or v4 of the  Legal Entity Management API.\n\nTo onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers Onboarding components. You can integrate these components into your marketplace\u2019s UI to let your users enter their data. The component then uses the entered data to create the relevant resource. This means you do not need to implement the API call to create the resource yourself.\nWe recommend using the Onboarding components in your API-only onboarding flow to reduce engineering efforts and speed up implementation. It is important to note that the Onboarding components only cover certain functionality, and you still need to implement API calls for other parts of your API-only onboarding flow.\nHere are some scenarios where the Onboarding components can be particularly useful:\n\nYou are developing your UI to onboard users with API-only onboarding and want to speed up the process.\nYou have already built your UI to onboard users with API-only onboarding and want to reduce the effort required to maintain your code.\nYou are using hosted onboarding to onboard users and want to let users manage their submitted data directly in your UI.\n\nYou can integrate the following Onboarding components:\n\n\n\nComponent\nDescription\n\n\n\n\nIndividual legal entity components\nEnable users to manage their personal details and verification status. Users can enter personal details and upload required documents, view their current verification status, and update their information when necessary.\n\n\nTerms of Service components\nAllow users to manage the Terms of Service documents. Users can accept the latest Terms of Service documents, view the status, and download signed copies for their records.\n\n\nTransfer Instrument components\nProvide users with full control over their bank accounts. Users can create a new bank account (transfer instrument) using instant verification or document uploads, and manage existing accounts by adding, deleting, and viewing their corresponding verification statuses and error messages, if applicable.\n\n\n\n\n\nThe guidance and features available may differ based on the library version in use. We recommend using the latest library version to take advantage of the newest features and improvements.\nEnsure you select a component type and a library version that suit your situation in the following sections.\nSelect a component type\nSelect the tab for the component you are interested in to view the relevant description and integration steps:\n\n    \n    \n\n\n    \n\nSee also\n\n\n                    Onboarding steps\n                \n                    Component libraries\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Marketplaces","lvl2":"Onboard and verify users","lvl3":"Onboarding components"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/marketplaces","lvl2":"https:\/\/docs.adyen.com\/pt\/marketplaces\/onboard-users","lvl3":"\/pt\/marketplaces\/onboard-users\/components"},"levels":4,"category":"Marketplaces","category_color":"green","tags":["Onboarding","components"]},"articleFiles":{"flow.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/04.marketplaces\/10.onboard-users\/05.components\/flow.png\" \/>","int-component.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/04.marketplaces\/10.onboard-users\/05.components\/int-component.png\" \/>","session-request.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/04.marketplaces\/10.onboard-users\/05.components\/session-request.png\" \/>","session-response.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/04.marketplaces\/10.onboard-users\/05.components\/session-response.png\" \/>","session-token.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/04.marketplaces\/10.onboard-users\/05.components\/session-token.png\" \/>","troubleshooting.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/04.marketplaces\/10.onboard-users\/05.components\/troubleshooting.png\" \/>"}}
