{"title":"Integration steps for capital components","category":"default","creationDate":1776961628,"content":"<div class=\"additional-info-block output-inline\">\n<h5 class=\"article__heading additional-info-block__title\">Learn more<\/h5><div class=\"additional-info-block__body\"><p><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/github-logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/github.com\/Adyen\/adyen-platform-experience-web\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">View our repository on GitHub<\/a><\/p><p><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/click.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/demotool.adyen.com\/se\/pie\/platform-tx\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Try it out with a live demo<\/a><\/p><p><img style=\"width: 22px;\" alt=\"\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/megaphone.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"\/pt\/release-notes\/platforms-and-financial-products\">Explore the latest updates<\/a><\/p><\/div><\/div>\n\n<p>This page provides guidance on integrating the <a href=\"\/pt\/capital\/capital-components\">capital components<\/a> into your portal's user interface (UI).<\/p>\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 version in the next section before starting your integration.<\/p>\n<div data-component-wrapper=\"in-page-filtering\">\n    <in-page-filtering\n        id=\"pe-components-capital-steps\"\n        :in-page-filtering=\"{&quot;guides&quot;:{&quot;capital&quot;:{&quot;label&quot;:&quot;Capital&quot;,&quot;integrations&quot;:{&quot;capital-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to offer business financing to your users.&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-1.10.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f6cebda56e2606488ccff3c20dd877bd&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.10.x&quot;}},&quot;version-1.9.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f6cebda56e2606488ccff3c20dd877bd&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.9.x&quot;}},&quot;version-1.8.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f6cebda56e2606488ccff3c20dd877bd&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.8.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.7.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;de546aeb5077565f01982b26ae2bbeb7&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.7.x&quot;}},&quot;version-1.6.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;de546aeb5077565f01982b26ae2bbeb7&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.6.x&quot;}},&quot;version-1.5.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;de546aeb5077565f01982b26ae2bbeb7&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.5.x&quot;}},&quot;version-1.4.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;de546aeb5077565f01982b26ae2bbeb7&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.4.x&quot;}},&quot;version-1.3.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;de546aeb5077565f01982b26ae2bbeb7&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;a157c4c60ad7a9e945d7024e5722820b&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.3.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.2.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;},&quot;methods_and_parameters&quot;:{&quot;$ref&quot;:&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;324344c1ab1aaad94c3d379d684bcba1&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;cda8005c9b92a37292001fbc8ba8588f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;de546aeb5077565f01982b26ae2bbeb7&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;7332e83a73b685bce5e5a999e738dd46&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;fe748613578e06927a6531ef6498fcd8&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;516538f0402df449f466a42beec5770d&quot;},&quot;use_cases&quot;:{&quot;$ref&quot;:&quot;8c14b805e23390cdb3579117fab3d103&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.2.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;5e0b443e3d7b3632f58ba5cfdcb3635c&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements, limitations, 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;\\\/capital\\\/manage-access#manage-api-credentials\\&quot;&gt;Balance Platform API key&lt;\\\/a&gt; (for example, &lt;strong&gt;ws[_123456]@BalancePlatform.[YourBalancePlatform]&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;br\\\/&gt;&lt;br\\\/&gt;Ensure that you have asked your Adyen contact to assign the following role to your API credential: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Capital Component: Manage&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;\\\/ul&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;Capabilities&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that your account holders have the following &lt;a href=\\&quot;\\\/capital\\\/manage-user-capabilities\\&quot;&gt;capability&lt;\\\/a&gt;: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;getGrantOffers&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;\\\/ul&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;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;With the capital components, you can only pay out the business financing funds to the user&#039;s balance account. Payouts to transfer instruments are not supported in this implementation.&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; Reach out to your Adyen contact to set up the necessary configurations to add the Capital financial product to your integration.&lt;\\\/li&gt; &lt;li&gt;Review our &lt;a href=\\&quot;\\\/capital\\\/compliance-guidelines\\&quot;&gt;compliance guidelines&lt;\\\/a&gt; for Capital.&lt;\\\/li&gt;&lt;li&gt;Verify that the components are available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;li&gt;Check our &lt;a href=\\&quot;\\\/platforms\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;d1130baa1d5d3d9a57ecc904a92b2dde&quot;:&quot;&lt;h2 id=\\&quot;component-methods\\&quot;&gt;Component instance methods and parameters&lt;\\\/h2&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component, creating a &lt;a href=\\&quot;\\\/capital\\\/capital-components#standard-user-flow\\&quot;&gt;standard user flow&lt;\\\/a&gt;. This flow consists of a series of interactive screens that users engage with, all rendered within a single component element on the same portal&#039;s UI page.&lt;\\\/p&gt;\\n&lt;p&gt;You can modify this standard user flow to create a more tailored and relevant experience for your users. For example, you may want to show a message about their eligibility for a grant on one page while directing users to complete the remaining steps on another page in your portal&#039;s UI. To do this, you can use additional methods and parameters that enable you to register and unregister events, making it easier to manage multiple instances of components. There are various approaches you can take for each of the components.&lt;\\\/p&gt;\\n&lt;p&gt;When integrating the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component, you can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Decide whether to render the component based on its state. For example, if the state is &lt;strong&gt;isUnqualified&lt;\\\/strong&gt;, you can choose not to render the component.&lt;\\\/li&gt;\\n&lt;li&gt;Interrupt the standard user flow at certain points to redirect a user to a different page in your interface to continue their flow.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When integrating the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component, you can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Render it as standalone component and place it on a separate page in your portal&#039;s UI.&lt;\\\/li&gt;\\n&lt;li&gt;Configure the component to only show a specific screen.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;You can specify the necessary methods and parameters when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing components&lt;\\\/a&gt;. Refer to the &lt;a href=\\&quot;#use-cases\\&quot;&gt;use case examples&lt;\\\/a&gt; for more details.&lt;\\\/p&gt;&quot;,&quot;324344c1ab1aaad94c3d379d684bcba1&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;The integration of components involves both server-side and client-side processes. You can find more details on the &lt;a href=\\&quot;\\\/platforms\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page.&lt;\\\/p&gt;\\n&lt;h3&gt;Integration steps&lt;\\\/h3&gt;\\n&lt;p&gt;Follow these steps to integrate the component(s):&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;#localize-components\\&quot;&gt;Optional: Localize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Optional: Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;cda8005c9b92a37292001fbc8ba8588f&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 specifying the following parameters:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To make this API request, your API key must have the &lt;strong&gt;Capital Component: Manage&lt;\\\/strong&gt; role in your Customer Area. Read more in &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&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;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;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;\\\/br&gt;Must follow the format: &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt; or &lt;code&gt;https:\\\/\\\/*.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your platform.&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;accountHolderId&lt;\\\/code&gt;: The unique identifier of the account holder that is linked to the balance account shown in the component.&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;accountHolder&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 required to use the component. Set this to &lt;strong&gt;Capital Component: Manage&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. Set this to &lt;strong&gt;platform&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_BALANCE_PLATFORM_API_KEY&#039; \\\\\\\\\\\\n-D &#039;{\\\\n    \\\\&amp;quot;allowOrigin\\\\&amp;quot;:\\\\&amp;quot;YOUR_DOMAIN\\\\&amp;quot;,\\\\n    \\\\&amp;quot;product\\\\&amp;quot;:\\\\&amp;quot;platform\\\\&amp;quot;,\\\\n    \\\\&amp;quot;policy\\\\&amp;quot;: {\\\\n       \\\\&amp;quot;resources\\\\&amp;quot;: [\\\\n         {\\\\n             \\\\&amp;quot;accountHolderId\\\\&amp;quot;: \\\\&amp;quot;AH00000000000000000000001\\\\&amp;quot;,\\\\n             \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;accountHolder\\\\&amp;quot;\\\\n         }\\\\n       ],\\\\n       \\\\&amp;quot;roles\\\\&amp;quot;: [\\\\n         \\\\&amp;quot;Capital Component: Manage\\\\&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.&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;de546aeb5077565f01982b26ae2bbeb7&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 Platform Experience&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\\\/adyen-platform-experience-web&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 { AdyenPlatformExperience, CapitalOverview, CapitalOffer } from &#039;@adyen\\\/adyen-platform-experience-web&#039;;\\nimport \\&quot;@adyen\\\/adyen-platform-experience-web\\\/adyen-platform-experience-web.css\\&quot;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;7332e83a73b685bce5e5a999e738dd46&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the 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:120%\\&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;code&gt;availableTranslations&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An array containing the names of the imported locale files used for localizing the components.&lt;\\\/br&gt;For example, &lt;code&gt;[es_ES, nl_NL, fr_FR]&lt;\\\/code&gt;.&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;\\\/td&gt;\\n&lt;td&gt;Specifies the environment for the component integration.&lt;\\\/br&gt;The default value is &lt;strong&gt;test&lt;\\\/strong&gt;. Set the parameter to &lt;strong&gt;live&lt;\\\/strong&gt; when you are ready to go live.&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;\\\/td&gt;\\n&lt;td&gt;Specifies the locale code, which determines the desired &lt;a href=\\&quot;#supported-languages\\&quot;&gt;language&lt;\\\/a&gt; of the components. This code must correspond to one of the locale files listed in &lt;code&gt;availableTranslations&lt;\\\/code&gt;. &lt;\\\/br&gt;For example, use &lt;strong&gt;es-ES&lt;\\\/strong&gt; for Spanish.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onSessionCreate&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;\\\/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;tabYi9fU55632\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;55632&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Capital Overview 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;\\\\\\\/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;core&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 instance of the library.&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;onFundsRequest&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 after the user selects the &amp;lt;strong&amp;gt;Request funds&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer term sheet screen, and the grant request has been successful.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after a successful grant request. The function accepts an argument that includes the data for the requested grant. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferDismiss&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 after the user selects the &amp;lt;strong&amp;gt;Back&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer selection screen.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to handle the dismissal of the flow when the &amp;lt;code&amp;gt;skipPreQualifiedIntro&amp;lt;\\\\\\\/code&amp;gt; parameter is provided. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferOptionsRequest&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 after the user selects the &amp;lt;strong&amp;gt;See options&amp;lt;\\\\\\\/strong&amp;gt; button on the pre-qualified screen.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after the button is selected. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;skipPreQualifiedIntro&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 whether to show a screen indicating that the user is being pre-qualified for a grant offer. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&amp;gt; &amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Default value: &amp;lt;strong&amp;gt;false&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;capital-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Capital Offer 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;\\\\\\\/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;core&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 instance of the library.&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;onFundsRequest&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 after the user selects the &amp;lt;strong&amp;gt;Request funds&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer term sheet screen, and the grant request has been successful.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after a successful grant request. The function accepts an argument that includes the data for the requested grant. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferDismiss&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 after the user selects the &amp;lt;strong&amp;gt;Back&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer selection screen.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to handle the dismissal of the flow when the &amp;lt;code&amp;gt;skipPreQualifiedIntro&amp;lt;\\\\\\\/code&amp;gt; parameter is provided. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferSelect&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 after the user selects the &amp;lt;strong&amp;gt;Review offer&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer selection screen, and the grant offer selection has been successful.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after the grant offer is selected. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;capital-offer&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-offer-initialize-parameters_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-offer&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;(Optional) Define the following component instance method.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Method&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;getState&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Retrieves the state of the component, which is an object containing a &lt;code&gt;state&lt;\\\/code&gt; field.&lt;br\\\/&gt;The possible values of this field are:&lt;ul&gt;&lt;li&gt;&lt;strong&gt;isUnqualified&lt;\\\/strong&gt;: The user is not yet qualified for a grant.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;isPreQualified&lt;\\\/strong&gt;: The user is pre-qualified for a grant.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;hasRequestedGrants&lt;\\\/strong&gt;: The user has previously received and repaid grants.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;br\\\/&gt;For more information, &lt;a href=\\&quot;#component-methods\\&quot;&gt;read here&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\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 portal&#039;s 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 portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component. If you want to render the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component outside the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&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;tabyknWI55632\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;55632&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Capital Overview 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;capital-overview-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;capital-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Capital Offer 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;capital-offer-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;capital-offer&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-offer-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-offer&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;The following code is the same for both capital components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication 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;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&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;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabetVLa55632\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;55632&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Capital Overview 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;import { AdyenPlatformExperience, CapitalOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst capitalOverview = new CapitalOverview({ core });\\\\\\\\n\\\\\\\\ncapitalOverview.mount(&amp;#039;#capital-overview-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;capital-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Capital Offer 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;import { AdyenPlatformExperience, CapitalOffer } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst capitalOffer = new CapitalOffer({ core });\\\\\\\\n\\\\\\\\ncapitalOffer.mount(&amp;#039;#capital-offer-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;capital-offer&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-offer-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-offer&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;fe748613578e06927a6531ef6498fcd8&quot;:&quot;&lt;h2&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;You can configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;Update your code for initializing components to include the localization settings. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Localize components&#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;import { AdyenPlatformExperience, es_ES, nl_NL, fr_FR, all_locales } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\n\\\\\\\/\\\\\\\/ ...\\\\n\\\\n    \\\\\\\/\\\\\\\/ Only selected languages are available\\\\n    const core = await AdyenPlatformExperience({\\\\n        availableTranslations: [es_ES, nl_NL, fr_FR],\\\\n        locale: &#039;es-ES&#039;, \\\\\\\/\\\\\\\/ You can also set this to nl-NL, fr-FR, or en-US (default)\\\\n        \\\\\\\/\\\\\\\/ ....\\\\n    })\\\\n\\\\n    \\\\\\\/\\\\\\\/ All supported languages are available\\\\n    const core = await AdyenPlatformExperience({\\\\n        availableTranslations: [all_locales],\\\\n        locale: &#039;es_ES&#039; \\\\\\\/\\\\\\\/ You can also set this to any of the supported languages\\\\n        \\\\\\\/\\\\\\\/ ....\\\\n    })&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;&quot;,&quot;516538f0402df449f466a42beec5770d&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The capital 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 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;The following tabs show examples of how to style the components. The first example shows how to override predefined CSS variables to use different colors and values. The second example demonstrates how to update the CSS class setting to change the layout of the info box element from a prominent blue background to an inline view with a bottom border.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab4ZlhM29633\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;29633&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;bash\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n    --adyen-sdk-border-radius-s: 10px;\\\\\\\\n    --adyen-sdk-border-radius-m: 20px;\\\\\\\\n    --adyen-sdk-border-radius-l: 30px;\\\\\\\\n    --adyen-sdk-color-background-disabled: #9ecdb1;\\\\\\\\n    --adyen-sdk-color-background-inverse-primary: #0abf53;\\\\\\\\n    --adyen-sdk-color-background-inverse-primary-hover: #57d389;\\\\\\\\n    --adyen-sdk-color-decorative-blue: #0abf53;\\\\\\\\n    --adyen-sdk-color-outline-primary-active: #0abf53;\\\\\\\\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_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;bash\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;.adyen-pe-capital-offer-summary__details,\\\\\\\\n.adyen-pe-grant-details .adyen-pe-structured-list {\\\\\\\\n    gap: 0;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adyen-pe-capital-offer-summary__details .adyen-pe-structured-list__item,\\\\\\\\n.adyen-pe-grant-details .adyen-pe-structured-list .adyen-pe-structured-list__item {\\\\\\\\n    padding: 6px 4px;\\\\\\\\n}\\\\\\\\n\\\\\\\\n.adyen-pe-capital-offer-summary__details .adyen-pe-structured-list__item:nth-child(even),\\\\\\\\n.adyen-pe-grant-details .adyen-pe-structured-list .adyen-pe-structured-list__item:nth-child(even) {\\\\\\\\n    background: #f7f7f8;\\\\\\\\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;8c14b805e23390cdb3579117fab3d103&quot;:&quot;&lt;h2 id=\\&quot;use-cases\\&quot;&gt;Use case examples&lt;\\\/h2&gt;\\n&lt;p&gt;Here you can find code examples demonstrating how to use the &lt;a href=\\&quot;#component-methods\\&quot;&gt;component instance methods and parameters&lt;\\\/a&gt; for specific use cases in the components&#039; implementation.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#example-1-show-the-capital-overview-component-based-on-its-state\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Example 1: Show the Capital Overview component based on its state&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;This example demonstrates how to render the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component based on its state. For instance, if the state is &lt;strong&gt;isUnqualified&lt;\\\/strong&gt;, the component will not be rendered. This means that if a user is not yet qualified for grant offers, they will not see the component.&lt;\\\/p&gt;\\n&lt;p&gt;You can use the same approach for the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;JavaScript&#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;import { AdyenPlatformExperience, CapitalOverview } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport \\\\&amp;quot;@adyen\\\\\\\/adyen-platform-experience-web\\\\\\\/adyen-platform-experience-web.css\\\\&amp;quot;;\\\\nimport { onSessionCreate } from &#039;..\\\\\\\/my-platform\\\\\\\/utils&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({ onSessionCreate });\\\\nconst capitalOverview = new CapitalOverview({ core });\\\\n\\\\nconst { state } = await capitalOverview.getState();\\\\n\\\\nif (state === \\\\&amp;quot;isUnqualified\\\\&amp;quot;) {\\\\n    \\\\\\\/\\\\\\\/ Don&#039;t render the component\\\\n} else {\\\\n    capitalOverview.mount(&#039;.container&#039;);\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#example-2-show-the-capital-offer-component-as-a-standalone\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Example 2: Show the Capital Offer component as a standalone&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;This example demonstrates how to integrate the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component and the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component on separate pages. This setup allows you to place the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component in a more prominent location within your user interface, such as on a dashboard page, which can help improve user conversion rates for grant applications.&lt;\\\/p&gt;\\n&lt;p&gt;When a user apply for a grant from the dashboard page, they will be redirected to the page featuring the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component. This component will recognize that a grant has been requested and will show the list of available grants, thus continuing the flow initiated on the previous page. If the user navigates directly to the capital overview page without having requested funds beforehand, the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component will instead render the section for requesting grants.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;JavaScript&#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;\\\\\\\/\\\\\\\/ Capital overview page\\\\n\\\\nimport { AdyenPlatformExperience, CapitalOverview } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport { onSessionCreate } from &#039;..\\\\\\\/my-platform\\\\\\\/utils&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({ onSessionCreate });\\\\nconst capital = new CapitalOverview({ core }).mount(&#039;.container&#039;);\\\\n\\\\n\\\\\\\/\\\\\\\/ Dashboard page\\\\n\\\\nimport { AdyenPlatformExperience, CapitalOffer } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport { onSessionCreate } from &#039;..\\\\\\\/my-platform\\\\\\\/utils&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({ onSessionCreate });\\\\nconst capital = new CapitalOffer({\\\\n    core,\\\\n    onFundsRequest: () =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Redirect to capital overview page\\\\n    }\\\\n}).mount(&#039;.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\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#example-3-show-the-pre-qualified-screen-as-a-standalone\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Example 3: Show the pre-qualified screen as a standalone&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;This example demonstrates how to show an introductory message for pre-qualified users on a dashboard page, while presenting the rest of the flow on a separate page.&lt;\\\/p&gt;\\n&lt;p&gt;Both pages use a separate instance of the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component. The dashboard page features only the introductory message for pre-qualified users. When a user selects the button to apply for a grant, they will be redirected to the page containing the rest of the flow, bypassing the introductory message.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;JavaScript&#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;\\\\\\\/\\\\\\\/ Dashboard page\\\\n\\\\nimport { AdyenPlatformExperience, CapitalOverview } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport { onSessionCreate } from &#039;..\\\\\\\/my-platform\\\\\\\/utils&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({ onSessionCreate });\\\\nconst capital = new CapitalOverview({\\\\n    core,\\\\n    onOfferOptionsRequest: () =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Redirect to capital overview page\\\\n    }\\\\n}).mount(&#039;.container&#039;);\\\\n\\\\n\\\\\\\/\\\\\\\/ Capital overview page\\\\n\\\\nimport { AdyenPlatformExperience, CapitalOverview } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport { onSessionCreate } from &#039;..\\\\\\\/my-platform\\\\\\\/utils&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({ onSessionCreate });\\\\nconst capital = new CapitalOverview({\\\\n    core,\\\\n    skipPreQualifiedIntro: true, \\\\\\\/\\\\\\\/ Default: false\\\\n}).mount(&#039;.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\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#example-4-show-the-grant-offer-selection-screen-as-a-standalone\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Example 4: Show the grant offer selection screen as a standalone&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;This example demonstrates how to render only the grant offer selection screen of the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component, which features a dynamic slider. The rest of the flow will be implemented through direct integration with the Adyen API rather than using components. While this approach is not recommended, it does provide the flexibility to use the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component partially to address your specific needs.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;JavaScript&#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;import { AdyenPlatformExperience, CapitalOffer } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport { onSessionCreate } from &#039;..\\\\\\\/my-platform\\\\\\\/utils&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({ onSessionCreate });\\\\nconst capital = new CapitalOffer({\\\\n    core,\\\\n    onOfferSelect: () =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Redirect to the grant offer term sheet screen\\\\n    }\\\\n}).mount(&#039;.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\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;:&quot;&lt;h2 id=\\&quot;supported-languages\\&quot;&gt;Supported languages&lt;\\\/h2&gt;\\n&lt;p&gt;You can set one of the following languages to localize any of the Platform Experience components.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;sticky-table-container\\&quot;&gt;\\n    \\n&lt;\\\/div&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;th&gt;Locale file&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&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;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;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;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;Finnish&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;fi-FI&lt;\\\/strong&gt;&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;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;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;Italian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;it-IT&lt;\\\/strong&gt;&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;Norwegian&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;no-NO&lt;\\\/strong&gt;&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;Portuguese (BR)&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pt-BR&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;pt_BR&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;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;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;&quot;,&quot;a157c4c60ad7a9e945d7024e5722820b&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the 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:120%\\&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;code&gt;availableTranslations&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An array containing the names of the imported locale files used for localizing the components.&lt;\\\/br&gt;For example, &lt;code&gt;[es_ES, nl_NL, fr_FR]&lt;\\\/code&gt;.&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;\\\/td&gt;\\n&lt;td&gt;Specifies the environment for the component integration.&lt;\\\/br&gt;The default value is &lt;strong&gt;test&lt;\\\/strong&gt;. Set the parameter to &lt;strong&gt;live&lt;\\\/strong&gt; when you are ready to go live.&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;\\\/td&gt;\\n&lt;td&gt;Specifies the locale code, which determines the desired language of the components. This code must correspond to one of the locale files listed in &lt;code&gt;availableTranslations&lt;\\\/code&gt;. &lt;\\\/br&gt;For example, use &lt;strong&gt;es-ES&lt;\\\/strong&gt; for Spanish.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onSessionCreate&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;\\\/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;tabHbsyS93349\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;93349&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Capital Overview 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;\\\\\\\/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;core&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 instance of the library.&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;onFundsRequest&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 after the user selects the &amp;lt;strong&amp;gt;Request funds&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer term sheet screen, and the grant request has been successful.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after a successful grant request. The function accepts an argument that includes the data for the requested grant. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferDismiss&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 after the user selects the &amp;lt;strong&amp;gt;Back&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer selection screen.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to handle the dismissal of the flow when the &amp;lt;code&amp;gt;skipPreQualifiedIntro&amp;lt;\\\\\\\/code&amp;gt; parameter is provided. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferOptionsRequest&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 after the user selects the &amp;lt;strong&amp;gt;See options&amp;lt;\\\\\\\/strong&amp;gt; button on the pre-qualified screen.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after the button is selected. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;skipPreQualifiedIntro&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 whether to show a screen indicating that the user is being pre-qualified for a grant offer. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&amp;gt; &amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Default value: &amp;lt;strong&amp;gt;false&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;capital-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Capital Offer 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;\\\\\\\/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;core&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 instance of the library.&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;onFundsRequest&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 after the user selects the &amp;lt;strong&amp;gt;Request funds&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer term sheet screen, and the grant request has been successful.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after a successful grant request. The function accepts an argument that includes the data for the requested grant. For more information, &amp;lt;a href=\\\\&amp;quot;#component-instance-methods-and-parameters\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferDismiss&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 after the user selects the &amp;lt;strong&amp;gt;Back&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer selection screen.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to handle the dismissal of the flow when the &amp;lt;code&amp;gt;skipPreQualifiedIntro&amp;lt;\\\\\\\/code&amp;gt; parameter is provided. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;onOfferSelect&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 after the user selects the &amp;lt;strong&amp;gt;Review offer&amp;lt;\\\\\\\/strong&amp;gt; button on the grant offer selection screen, and the grant offer selection has been successful.&amp;lt;br\\\\\\\/&amp;gt;&amp;lt;br\\\\\\\/&amp;gt;Define this function if you need to exit the default flow after the grant offer is selected. For more information, &amp;lt;a href=\\\\&amp;quot;#component-methods\\\\&amp;quot;&amp;gt;read here&amp;lt;\\\\\\\/a&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;capital-offer&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-offer-initialize-parameters_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-offer&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;(Optional) Define the following component instance method.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Method&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;getState&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Retrieves the state of the component, which is an object containing a &lt;code&gt;state&lt;\\\/code&gt; field.&lt;br\\\/&gt;The possible values of this field are:&lt;ul&gt;&lt;li&gt;&lt;strong&gt;isUnqualified&lt;\\\/strong&gt;: The user is not yet qualified for a grant.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;isPreQualified&lt;\\\/strong&gt;: The user is pre-qualified for a grant.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;hasRequestedGrants&lt;\\\/strong&gt;: The user has previously received and repaid grants.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;isInUnsupportedRegion&lt;\\\/strong&gt;: The user is operating in a country\\\/region where Adyen Capital is not yet supported.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;br\\\/&gt;For more information, &lt;a href=\\&quot;#component-methods\\&quot;&gt;read here&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\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 portal&#039;s 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 portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component. If you want to render the &lt;strong&gt;Capital Offer&lt;\\\/strong&gt; component outside the &lt;strong&gt;Capital Overview&lt;\\\/strong&gt; component, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&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;tab3qYmA93349\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;93349&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Capital Overview 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;capital-overview-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;capital-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Capital Offer 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;capital-offer-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;capital-offer&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-offer-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-offer&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;The following code is the same for both capital components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication 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;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&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;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab9hIsb93349\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;93349&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Capital Overview 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;import { AdyenPlatformExperience, CapitalOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst capitalOverview = new CapitalOverview({ core });\\\\\\\\n\\\\\\\\ncapitalOverview.mount(&amp;#039;#capital-overview-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;capital-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Capital Offer 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;import { AdyenPlatformExperience, CapitalOffer } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst capitalOffer = new CapitalOffer({ core });\\\\\\\\n\\\\\\\\ncapitalOffer.mount(&amp;#039;#capital-offer-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;capital-offer&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;capital-offer-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;capital-offer&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;f6cebda56e2606488ccff3c20dd877bd&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;Use the Adyen Web npm package, or embed the Adyen Platform Experience script and stylesheet into your HTML file:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabKik0415030\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;15030&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;npm (recommended)&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;Install the &amp;lt;strong&amp;gt;Adyen Platform Experience&amp;lt;\\\\\\\/strong&amp;gt; library in your front-end application as follows:&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;lt;ol&amp;gt;\\\\n&amp;lt;li&amp;gt;\\\\n&amp;lt;p&amp;gt;Install the npm package.&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;lt;pre&amp;gt;&amp;lt;code class=\\\\&amp;quot;language-bash\\\\&amp;quot;&amp;gt;npm install @adyen\\\\\\\/adyen-platform-experience-web&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/pre&amp;gt;\\\\n&amp;lt;\\\\\\\/li&amp;gt;\\\\n&amp;lt;li&amp;gt;\\\\n&amp;lt;p&amp;gt;Import the library, the components, and the style sheet.&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;lt;pre&amp;gt;&amp;lt;code class=\\\\&amp;quot;language-bash\\\\&amp;quot;&amp;gt;import { AdyenPlatformExperience, component_name } from &amp;#039;@adyen\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\nimport \\\\&amp;quot;@adyen\\\\\\\/adyen-platform-experience-web\\\\\\\/adyen-platform-experience-web.css\\\\&amp;quot;;&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/pre&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;npm_(recommended)_0_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Embed script and stylesheet&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;Use the &amp;lt;code&amp;gt;integrity&amp;lt;\\\\\\\/code&amp;gt; attribute so browsers can verify that the script and stylesheet have not been changed unexpectedly.&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;lt;p&amp;gt;The value of the &amp;lt;code&amp;gt;integrity&amp;lt;\\\\\\\/code&amp;gt; attribute is the &amp;lt;a href=\\\\&amp;quot;https:\\\\\\\/\\\\\\\/developer.mozilla.org\\\\\\\/en-US\\\\\\\/docs\\\\\\\/Web\\\\\\\/Security\\\\\\\/Subresource_Integrity\\\\&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;Subresource Integrity (SRI) hash&amp;lt;\\\\\\\/a&amp;gt; which Adyen provides for each version of the Adyen Web JavaScript and CSS files.&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;lt;p&amp;gt;Get the SRI hashes from the &amp;lt;a href=\\\\&amp;quot;\\\\\\\/release-notes\\\\\\\/platforms-and-financial-products\\\\&amp;quot;&amp;gt;release notes&amp;lt;\\\\\\\/a&amp;gt; for the Platform Experience components, under &amp;lt;strong&amp;gt;Updating to this version&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/p&amp;gt;\\\\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;embed-script-stylesheet.html&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;lt;!-- Embed the Adyen Platform Experience script element above any other JavaScript in your page. --&amp;gt;\\\\\\\\n&amp;amp;lt;script src=\\\\\\\\\\\\&amp;quot;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/bae81f955b.cdn.adyen.com\\\\\\\\\\\\\\\/platform-components\\\\\\\\\\\\\\\/VERSION\\\\\\\\\\\\\\\/adyen-platform-experience-web.js\\\\\\\\\\\\&amp;quot;\\\\\\\\n   integrity=\\\\\\\\\\\\&amp;quot;JS_INTEGRITY_HASH_FOR_YOUR_VERSION\\\\\\\\\\\\&amp;quot;\\\\\\\\n   crossorigin=\\\\\\\\\\\\&amp;quot;anonymous\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/script&amp;amp;gt;\\\\\\\\n\\\\\\\\n&amp;lt;!-- Embed the Adyen Platform Experience stylesheet. You can add your own styling by overriding the rules in the CSS file --&amp;gt;\\\\\\\\n&amp;amp;lt;link rel=\\\\\\\\\\\\&amp;quot;stylesheet\\\\\\\\\\\\&amp;quot; href=\\\\\\\\\\\\&amp;quot;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/bae81f955b.cdn.adyen.com\\\\\\\\\\\\\\\/platform-components\\\\\\\\\\\\\\\/VERSION\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\\\\\&amp;quot;\\\\\\\\n   integrity=\\\\\\\\\\\\&amp;quot;CSS_INTEGRITY_HASH_FOR_YOUR_VERSION\\\\\\\\\\\\&amp;quot;\\\\\\\\n   crossorigin=\\\\\\\\\\\\&amp;quot;anonymous\\\\\\\\\\\\&amp;quot;&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;:null,&amp;quot;oldTabId&amp;quot;:&amp;quot;embed_script_and_stylesheet_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;}}}}}}\"\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=\"\/platforms\/components-overview\"\n                        target=\"_self\"\n                        >\n                    Component libraries\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/capital\/integration-steps-components","articleFields":{"description":"A step-by-step guide for integrating Adyen's capital components.","feedback_component":true,"filters_component":false,"cache_enable":false,"parameters":{"directoryPath":"\/capital","financialProduct":"capital"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/capital\/integration-steps-components","title":"Integration steps for capital components","content":"\nLearn more&nbsp;&nbsp;View our repository on GitHub&nbsp;&nbsp;Try it out with a live demo&nbsp;&nbsp;Explore the latest updates\n\nThis page provides guidance on integrating the capital components into your portal's user interface (UI).\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 version in the next section before starting your integration.\n\n    \n    \n\n\n    \n\nSee also\n\n\n                    Component libraries\n                \n","type":"page","locale":"pt","boost":18,"hierarchy":{"lvl0":"Home","lvl1":"Capital","lvl2":"Integration steps for capital components"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/capital","lvl2":"\/pt\/capital\/integration-steps-components"},"levels":3,"category":"","category_color":"","tags":["Integration","steps","capital","components"]}}