{"title":"Build user dashboards with UI components","category":"default","creationDate":1776961627,"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>Adyen offers Platform Experience components that are designed to simplify the development of your portal's user interface (UI). You can use these components to create interactive user dashboards, which provide users with a clear view of their transactional data. This allows them to easily track the movement of funds in their balance accounts.<\/p>\n<p>You can integrate the following components:<\/p>\n<ul>\n<li><strong>Transaction components<\/strong>: Provide your users with a dashboard that shows their <a href=\"\/pt\/marketplaces\/process-payments\/\">transactional data<\/a>. With this dashboard, users can view and filter transactions for any of their balance accounts.\n<\/li>\n<li><strong>Payout components<\/strong>: Provide your users with a dashboard that shows completed <a href=\"\/pt\/marketplaces\/payout-to-users\/scheduled-payouts\">automatic payouts<\/a> for each user\u2019s balance account. This information allows users to reconcile the payouts they receive in their bank accounts with batches of payments and other related transactions.<\/li>\n<li><strong>Reports component<\/strong>: Provide your users with a dashboard that shows daily reports generated by Adyen for their balance accounts. These reports detail the movement of funds within their accounts, such as payouts. This information can assist users with their bookkeeping and reconciliation processes.<\/li>\n<li><strong>Dispute components<\/strong>: Provide your users with a dashboard view of open and resolved disputes, as well as fraud alerts (which correspond to the term \"Notification of Fraud\" in the Customer Area). This way, users can review disputes, choose to accept chargebacks, or defend them by submitting defense documents, all without needing to contact your support team or rely on email threads.<\/li>\n<li><strong>Pay by Link components<\/strong>: Provide your users with the ability to generate and manage secure payment links. Users can view a list of all existing payment links within a specified period, including key details such as payment link ID, status, amount, and expiration date. This allows users to easily track the life cycle of the payment links they create.<\/li>\n<\/ul>\n<p>The guidance and features available may differ based on the library version in use. We recommend using the latest library version to take advantage of the newest features and improvements.<\/p>\n<p>Ensure you select a component type and a library version that suit your situation in the following sections.<\/p>\n<h2>Select a component type<\/h2>\n<p>Select the tab for the component you are interested in to view the relevant description and integration steps:<\/p>\n<div data-component-wrapper=\"in-page-filtering\">\n    <in-page-filtering\n        id=\"pe-components-dashboards\"\n        :in-page-filtering=\"{&quot;guides&quot;:{&quot;transactions&quot;:{&quot;label&quot;:&quot;Transaction&quot;,&quot;integrations&quot;:{&quot;transaction-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for 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;918a08039b0bc9cadfb5698c3fa66df4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;2ea4476754266d177554995b2f4691c5&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;24b65a2744f2b5e94b2e0f3e74297e36&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f690a74225553dc2c50925216f8c8e45&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;9e1ff856daf9f44a44e653752e3bb7f6&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.10.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.9.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f690a74225553dc2c50925216f8c8e45&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1df23bf1b44fa42f0964b840757ca59&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;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f690a74225553dc2c50925216f8c8e45&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1df23bf1b44fa42f0964b840757ca59&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;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1df23bf1b44fa42f0964b840757ca59&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;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1df23bf1b44fa42f0964b840757ca59&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;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1df23bf1b44fa42f0964b840757ca59&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;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;04148fd16c0905edbb78b4a312fc6c7a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1df23bf1b44fa42f0964b840757ca59&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.4.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.3.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f891bb88836f3f98155053f297c6990&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;03c27d12df47b88e40b61c271abf55c1&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&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.3.x&quot;}},&quot;version-1.2.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;fe73a0dc654096f1fc6b5af7660a9fc3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f891bb88836f3f98155053f297c6990&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7734b0c89a5288bc8988891a89275887&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;03c27d12df47b88e40b61c271abf55c1&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&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;version-1.1.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;8f3dd140bd4872c236d266076a0445b3&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;15446ff900d386de9ded24ea10b16936&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3cc477c90856e5ffec8a2ec5c0c8119d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;03c27d12df47b88e40b61c271abf55c1&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;91f6187dcf4d723831b02164417d0cee&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;04e29aac53b7821d3ec6f1c0c9e8d3cf&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.1.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;8f3dd140bd4872c236d266076a0445b3&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Transactions Overview Component: View&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;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;15446ff900d386de9ded24ea10b16936&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab1GEcI84381\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;84381&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&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;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Capital&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;grant&lt;\\\/code&gt;, &lt;code&gt;repayment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt; , &lt;code&gt;chargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;chargebackReversalCorrection&lt;\\\/code&gt;, &lt;code&gt;secondChargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;reserveAdjustment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Fee&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;fee&lt;\\\/code&gt;, &lt;code&gt;miscCost&lt;\\\/code&gt;, &lt;code&gt;paymentCost&lt;\\\/code&gt;, &lt;code&gt;cashOutFee&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;cardTransfer&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#amount\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Amount&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;The filter enables users to filter transactions by specifying a custom amount range.&lt;\\\/p&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;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&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;For multi-currency accounts, users can select their preferred currency for transactions overview.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabQHwyC84381\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;84381&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;15078df03fb68d31cb4305cb05a2f19c&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;#see-also\\&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;3cc477c90856e5ffec8a2ec5c0c8119d&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;Transactions Overview Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&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 of &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 marketplace.&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;Transactions Overview Component: View&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;Transactions Overview Component: View\\\\&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;f3d47cd043b0a99a98c29c8e533848bc&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, component_name } 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;03c27d12df47b88e40b61c271abf55c1&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;tabxn4vm2047\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2047&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;allowLimitSelection&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 the user can change the number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the transaction ID when the user selects a specific transaction from the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Transaction Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Transactions Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&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;preferredLimit&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 number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&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;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transaction.&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;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your 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;Transaction Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on its own, 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;tabQFGN22047\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2047&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;transactions-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;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;transaction-details-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;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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 transaction 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;To implement the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific transaction from the overview page, the transaction ID is automatically passed to the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component, and the modal window opens.&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;tabsjV3y2047\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2047&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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, TransactionsOverview } 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 transactionsOverview = new TransactionsOverview({ core });\\\\\\\\n\\\\\\\\ntransactionsOverview.mount(&amp;#039;#transactions-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;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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, TransactionDetails } 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});\\\\\\\\n\\\\\\\\nconst transactionDetails = new TransactionDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ntransactionDetails.mount(&amp;#039;#transaction-details-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;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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) To use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const transactionsOverview = new TransactionsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected transaction id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const transactionDetails = new TransactionDetails({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_TRANSACTION_ID&amp;gt;&#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&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also 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\\\\nconst 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\\\\nconst 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;91f6187dcf4d723831b02164417d0cee&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The transaction 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 modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabFjZyz9003\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;9003&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-3&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-4&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-modal {\\\\\\\\n    border-left: 3px solid #0abf53;\\\\\\\\n    border-radius: 0;\\\\\\\\n    height: 100%;\\\\\\\\n    max-height: unset;\\\\\\\\n    right: 0;\\\\\\\\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\\n&quot;,&quot;04e29aac53b7821d3ec6f1c0c9e8d3cf&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;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;fe73a0dc654096f1fc6b5af7660a9fc3&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Transactions Overview Component: View&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; (required to process refunds through the components)&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;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;6f891bb88836f3f98155053f297c6990&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabVtIru20291\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;20291&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&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;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Capital&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;grant&lt;\\\/code&gt;, &lt;code&gt;repayment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt; , &lt;code&gt;chargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;chargebackReversalCorrection&lt;\\\/code&gt;, &lt;code&gt;secondChargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;reserveAdjustment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Fee&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;fee&lt;\\\/code&gt;, &lt;code&gt;miscCost&lt;\\\/code&gt;, &lt;code&gt;paymentCost&lt;\\\/code&gt;, &lt;code&gt;cashOutFee&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;cardTransfer&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#amount\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Amount&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;The filter enables users to filter transactions by specifying a custom amount range.&lt;\\\/p&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;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&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;For multi-currency accounts, users can select their preferred currency for transactions overview.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabxX9NB20291\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;20291&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;f9db685ea73e3c8bfb60ce7e784a63a9&quot;:&quot;&lt;h2 id=\\&quot;refunds\\&quot;&gt;Processing refunds through components&lt;\\\/h2&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;The refund feature requires the &lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; role to be assigned to your API credential and included in the session request.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Users can refund payments to their shoppers through the transaction components. When a user initiates a refund, the components automatically call Adyen&#039;s API to process the refund request. This means that no additional actions are needed on your part as a marketplace.&lt;\\\/p&gt;\\n&lt;p&gt;The transaction components support both full and partial refunds depending on the &lt;a href=\\&quot;\\\/payment-methods\\&quot;&gt;payment method&lt;\\\/a&gt;. For partial refunds, users can issue multiple smaller refunds through the components, as long as the total amount of these refunds does not exceed the original payment amount.&lt;\\\/p&gt;\\n&lt;p&gt;The user flow for processing a refund through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;In the payment details, the user selects the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; modal window, the user specifies a reason for the refund and the refund amount.&lt;\\\/li&gt;\\n&lt;li&gt;The user confirms their refund request.&lt;\\\/li&gt;\\n&lt;li&gt;After the refund request is processed, users can view the refund status message and label in the payment details.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs illustrate the user flow when processing a partial refund for a specific payment transaction:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabOSXBy92111\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92111&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-details_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;refund-details_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund sent&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-sent&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;refund-sent_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund status&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-status&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;refund-status_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;After the refund has been issued and processed, users can view the refund transaction in their overview. Each refund transaction is linked to the corresponding payment transaction, making it easy for users to find relevant references and navigate between transaction records.&lt;\\\/p&gt;&quot;,&quot;7734b0c89a5288bc8988891a89275887&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;Transactions Overview Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&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 of &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 marketplace.&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;Transactions Overview Component: View&lt;\\\/strong&gt;.&lt;\\\/br&gt;To enable users to process refunds through the components, include the &lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; role in your request.&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;Transactions Overview Component: View\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Transactions Overview Component: Manage Refunds\\\\&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;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;d0803d9fa6c3a2df9b0cfef1aa82be43&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabxmSAj94443\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94443&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&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;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Capital&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;grant&lt;\\\/code&gt;, &lt;code&gt;repayment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt; , &lt;code&gt;chargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;chargebackReversalCorrection&lt;\\\/code&gt;, &lt;code&gt;secondChargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;reserveAdjustment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Fee&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;fee&lt;\\\/code&gt;, &lt;code&gt;miscCost&lt;\\\/code&gt;, &lt;code&gt;paymentCost&lt;\\\/code&gt;, &lt;code&gt;cashOutFee&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;cardTransfer&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#amount\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Amount&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;The filter enables users to filter transactions by specifying a custom amount range.&lt;\\\/p&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;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&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;For multi-currency accounts, users can select their preferred currency for transactions overview.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;taby3piF94443\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94443&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;d47cf4f9625388bc796b0ebd7dfb4998&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;#see-also\\&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;li&gt;&lt;a href=\\&quot;#customize-data\\&quot;&gt;Optional: Customize component data&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;04148fd16c0905edbb78b4a312fc6c7a&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;tabDqvSN56259\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;56259&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;allowLimitSelection&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 the user can change the number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains both the &amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; objects, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&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;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the transaction ID when the user selects a specific transaction from the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Transaction Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Transactions Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&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;preferredLimit&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 number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&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;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&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;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transaction.&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;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your 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;Transaction Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on its own, 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;tabiGr1L56259\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;56259&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;transactions-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;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;transaction-details-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;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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 transaction 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;To implement the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific transaction from the overview page, the transaction ID is automatically passed to the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component, and the modal window opens.&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;tabbpevw56259\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;56259&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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, TransactionsOverview } 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 transactionsOverview = new TransactionsOverview({ core });\\\\\\\\n\\\\\\\\ntransactionsOverview.mount(&amp;#039;#transactions-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;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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, TransactionDetails } 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});\\\\\\\\n\\\\\\\\nconst transactionDetails = new TransactionDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ntransactionDetails.mount(&amp;#039;#transaction-details-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;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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) To use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const transactionsOverview = new TransactionsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected transaction id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const transactionDetails = new TransactionDetails({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_TRANSACTION_ID&amp;gt;&#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&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;a1df23bf1b44fa42f0964b840757ca59&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The transaction components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabWMd8a30181\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;30181&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;list&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { }, details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-customize-data-1_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-customize-data-1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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;Within the &lt;code&gt;list&lt;\\\/code&gt; and\\\/or &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tablemot30181\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;30181&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;fields&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;Defines the settings of dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;transactionType&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;amount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [] }, details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&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 that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with an array of the transaction records extended with custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } }, details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-customize-data-2_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;fields&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;Defines the settings of dashboard fields in the transaction detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;strong&amp;gt;&amp;#039;status&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;category&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;bankAccount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;balanceAccount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;id&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;balanceAccountId&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;deductedAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;lineItems&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;originalAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;paymentPspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;refundDetails&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;refundMetadata&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;transactionType&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;amount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&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 that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with the extended transaction record that contains custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-customize-data-2_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&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;align&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the content in a field is aligned. Possible values: &lt;strong&gt;left&lt;\\\/strong&gt;, &lt;strong&gt;center&lt;\\\/strong&gt;, &lt;strong&gt;right&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;left&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, align: &#039;right&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;flex&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Number&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines the width of a field in relation to other fields. It uses a numeric value that represents the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/flex-grow\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;flex-grow&lt;\\\/a&gt; factor in the CSS Flexbox layout. A higher value means that the field occupies more space compared to others. If not specified, it defaults to &lt;strong&gt;1&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;_store&#039;, flex: 2 }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;strong&gt;visible&lt;\\\/strong&gt;,  &lt;strong&gt;hidden&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;visible&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  onDataRetrieve: async (data) =&amp;gt; {\\\\n      const ids = data.map(transaction =&amp;gt; transaction.id);\\\\n\\\\n      const extendedData = await getMyDataByIds(ids);\\\\n\\\\n      return extendedData;\\\\n  },\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`additionalData` object&#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;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            return {\\\\n                ...data,\\\\n                _store: &#039;Amsterdam&#039;,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&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&gt;Type&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;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Determines how the custom data value should look and behave. Possible values: &lt;strong&gt;text&lt;\\\/strong&gt;, &lt;strong&gt;icon&lt;\\\/strong&gt;, &lt;strong&gt;link&lt;\\\/strong&gt;, &lt;strong&gt;button&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;text&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;div id=\\&quot;tabTHQMa30181\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;30181&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&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;`text` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-text_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Icon&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;`icon` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-icon_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Link&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;The target should accept both &amp;lt;code&amp;gt;_self&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&amp;gt;. The default option is &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&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;`link` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-link_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Button&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;`button` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-button_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Here is an example &lt;code&gt;dataCustomization&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabBmzTf30181\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;30181&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        list: {\\\\\\\\n            fields: [{ key: &amp;#039;_store&amp;#039; },  { key: &amp;#039;createdAt&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },],\\\\\\\\n            onDataRetrieve: async (transactions) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionsData(transactions);\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;transactionType&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;amount&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n            onDataRetrieve: async (transaction) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionData(transaction);\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-customize-data-3_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;id&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n                { key: &amp;#039;_product&amp;#039; },\\\\\\\\n                { key: &amp;#039;_summary&amp;#039; },\\\\\\\\n                { key: &amp;#039;_country&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: transaction =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionDataById(transaction);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-customize-data-3_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _store: &#039;Store&#039;,\\\\n        },\\\\n        es_ES: {\\\\n            _store: &#039;Tienda&#039;,\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;f690a74225553dc2c50925216f8c8e45&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;tab8ruR688142\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;88142&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;,&quot;918a08039b0bc9cadfb5698c3fa66df4&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 the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Transactions Overview Component: View&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; (required to process refunds through the components)&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;&lt;strong&gt;Document export limits:&lt;\\\/strong&gt; &lt;ul&gt;&lt;li&gt;Export functionality is currently limited to the CSV file format only.&lt;\\\/li&gt;&lt;li&gt; The maximum number of rows per transaction export is 100.&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;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;2ea4476754266d177554995b2f4691c5&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, net amount, and gross amount. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons. For example, you can rename a column to match your branding or rearrange columns to change the display order.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes transactions into two tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;strong&gt;Transactions&lt;\\\/strong&gt;: shows account balances, which display the account balance (available funds) and the reserved balance (funds currently held in reserve). Key features include:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Transaction list&lt;\\\/strong&gt;: a detailed list of transactions, which can be &lt;a href=\\&quot;#available-filters\\&quot;&gt;filtered&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Transaction details&lt;\\\/strong&gt;: users can select a record to open the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides granular information about that specific transaction.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;CSV export&lt;\\\/strong&gt;: an export button allows users to generate a CSV file containing the first 100 transactions that match the applied filters. Users retain control over the specific transaction fields included in the exported file.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;strong&gt;Insights&lt;\\\/strong&gt;: shows an analytical summary of transaction data for a specific balance account and time period. This data helps with bookkeeping, reconciliation, and financial analysis. This includes:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Period Result&lt;\\\/strong&gt;: the net total for the specified period and currency, representing the difference between the total incoming and total outgoing funds.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Total Incoming&lt;\\\/strong&gt;: the total amount of funds credited to the balance for all transactions processed during the specified period, grouped by transaction types, such as payments and transfers.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Total Outgoing&lt;\\\/strong&gt;: the total amount of funds debited from the balance for all transactions processed during the specified period, grouped by transaction types, such as chargebacks and refunds.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following illustrate each tab of the Transactions Overview component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabDUPOg46172\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;46172&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-transactions&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-transactions_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Insights&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-insights-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-insights-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-insights&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-insights_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;View and export filtered transaction data as a CSV file for reconciliation and external analysis. Users can &lt;a href=\\&quot;#available-filters\\&quot;&gt;filter&lt;\\\/a&gt; for transaction type, currency (for multi-currency accounts), PSP reference, and the time period specific to the balance account.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account, which shows the account balance and the reserved balance.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds for a balance account. The total values update automatically when the user modifies the &lt;a href=\\&quot;#available-filters\\&quot;&gt;filters&lt;\\\/a&gt;. For example, users can filter to see the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections show the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 180 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 179 days from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&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;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;. This is only available in the &lt;strong&gt;Transactions&lt;\\\/strong&gt; tab.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Capital&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;grant&lt;\\\/code&gt;, &lt;code&gt;repayment&lt;\\\/code&gt;, &lt;code&gt;capitalFundsCollection&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;bankDirectDebit&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&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;For multi-currency accounts, users can select their preferred currency for transactions overview. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&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;#psp-reference\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;PSP reference&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;The &lt;strong&gt;PSP reference&lt;\\\/strong&gt; filter enables users to find a transaction by specifying the exact PSP reference (equivalent to the internal Payment PSP reference), provided the transaction also matches the criteria of any other filters applied. This is only available in the &lt;strong&gt;Transactions&lt;\\\/strong&gt; tab.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes the details of the transaction into three tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Summary&lt;\\\/strong&gt;: when available, shows the breakdown of the transaction, including net and gross amounts, applicable fees, and deductions. This view explicitly details the original amount processed and the net amount received by the user.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Details&lt;\\\/strong&gt;: shows information about the transaction useful for tracking purposes, such as transaction references, including the unique reference ID. For payment transactions, this tab includes associated refund information. All custom integration data configured for the component is also displayed here.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Timeline&lt;\\\/strong&gt;: when available, shows the complete payment processing history and status changes for the transaction.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabqjiSH46172\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;46172&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;24b65a2744f2b5e94b2e0f3e74297e36&quot;:&quot;&lt;h2 id=\\&quot;refunds\\&quot;&gt;Processing refunds through components&lt;\\\/h2&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;The refund feature requires the &lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; role to be assigned to your API credential and included in the session request.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Users can refund payments to their shoppers through the transaction components. When a user initiates a refund, the components automatically call Adyen&#039;s API to process the refund request. This means that no additional actions are needed on your part as a marketplace.&lt;\\\/p&gt;\\n&lt;p&gt;The transaction components support both full and partial refunds depending on the &lt;a href=\\&quot;\\\/payment-methods\\&quot;&gt;payment method&lt;\\\/a&gt;. For partial refunds, users can issue multiple smaller refunds through the components, as long as the total amount of these refunds does not exceed the original payment amount.&lt;\\\/p&gt;\\n&lt;p&gt;The user flow for processing a refund through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;In the payment details, the user selects the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; modal window, the user specifies a reason for the refund and the refund amount.&lt;\\\/li&gt;\\n&lt;li&gt;The user confirms their refund request.&lt;\\\/li&gt;\\n&lt;li&gt;After the refund request is processed, users can view the refund status message and label in the payment details.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs illustrate the user flow when processing a partial refund for a specific payment transaction:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabZEJG943430\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;43430&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-details_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;refund-details_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund sent&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-sent&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;refund-sent_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund status&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-status&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;refund-status_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;After the refund has been issued and processed, users can view the refund transaction in their overview. Each refund transaction is linked to the corresponding payment transaction, making it easy for users to find relevant references and navigate between transaction records.&lt;\\\/p&gt;&quot;,&quot;9e1ff856daf9f44a44e653752e3bb7f6&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The transaction components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab0yufm17988\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;17988&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;list&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { }, details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-customize-data-1_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-customize-data-1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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;Within the &lt;code&gt;list&lt;\\\/code&gt; and\\\/or &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabHSpIV17988\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;17988&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;fields&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;Defines the settings of dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;transactionType&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;currency&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;amount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;grossAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [] }, details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&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 that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with an array of the transaction records extended with custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } }, details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-customize-data-2_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;fields&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;Defines the settings of dashboard fields in the transaction detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;strong&amp;gt;&amp;#039;account&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;refundReason&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;id&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;merchantReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;pspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;paymentPspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;refundPspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&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 that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with the extended transaction record that contains custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-customize-data-2_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&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;align&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the content in a field is aligned. Possible values: &lt;strong&gt;left&lt;\\\/strong&gt;, &lt;strong&gt;center&lt;\\\/strong&gt;, &lt;strong&gt;right&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;left&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, align: &#039;right&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;flex&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Number&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines the width of a field in relation to other fields. It uses a numeric value that represents the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/flex-grow\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;flex-grow&lt;\\\/a&gt; factor in the CSS Flexbox layout. A higher value means that the field occupies more space compared to others. If not specified, it defaults to &lt;strong&gt;1&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;_store&#039;, flex: 2 }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;strong&gt;visible&lt;\\\/strong&gt;,  &lt;strong&gt;hidden&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;visible&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  onDataRetrieve: async (data) =&amp;gt; {\\\\n      const ids = data.map(transaction =&amp;gt; transaction.id);\\\\n\\\\n      const extendedData = await getMyDataByIds(ids);\\\\n\\\\n      return extendedData;\\\\n  },\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`additionalData` object&#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;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            return {\\\\n                ...data,\\\\n                _store: &#039;Amsterdam&#039;,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&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&gt;Type&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;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Determines how the custom data value should look and behave. Possible values: &lt;strong&gt;text&lt;\\\/strong&gt;, &lt;strong&gt;icon&lt;\\\/strong&gt;, &lt;strong&gt;link&lt;\\\/strong&gt;, &lt;strong&gt;button&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;text&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;div id=\\&quot;tabbquc617988\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;17988&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&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;`text` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-text_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Icon&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;`icon` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-icon_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Link&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;The target should accept both &amp;lt;code&amp;gt;_self&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&amp;gt;. The default option is &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&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;`link` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-link_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Button&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;`button` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-button_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Here is an example &lt;code&gt;dataCustomization&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabGr91817988\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;17988&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        list: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n                { key: &amp;#039;createdAt&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: async (transactions) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionsData(transactions);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n        details: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;transactionType&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;amount&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: async (transaction) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionData(transaction);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transactions-overview-customize-data-3_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;id&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n                { key: &amp;#039;_product&amp;#039; },\\\\\\\\n                { key: &amp;#039;_summary&amp;#039; },\\\\\\\\n                { key: &amp;#039;_country&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: transaction =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionDataById(transaction);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;transaction-details-customize-data-3_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&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;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _store: &#039;Store&#039;,\\\\n        },\\\\n        es_ES: {\\\\n            _store: &#039;Tienda&#039;,\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;}}}},&quot;payouts&quot;:{&quot;label&quot;:&quot;Payout&quot;,&quot;integrations&quot;:{&quot;payout-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for 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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;ce9f02a4a67eabc9224e22f793075cba&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;ce9f02a4a67eabc9224e22f793075cba&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;ce9f02a4a67eabc9224e22f793075cba&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&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;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3b17c67d23dfb3afb24610546c22f21d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;9be5168505e3b12b0331c09b541ceedf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;2dc49f2e604d98d5c3df42300f8dc114&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.4.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.3.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;adbe1671042fc39c464dec04f7fdbee3&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;5bc98b99f8e509b7b3cd09d4cf71eaa7&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&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.3.x&quot;}},&quot;version-1.2.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;adbe1671042fc39c464dec04f7fdbee3&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;5bc98b99f8e509b7b3cd09d4cf71eaa7&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&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;version-1.1.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;06feda43bab8c134d7ff3b79af7a53a4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;adbe1671042fc39c464dec04f7fdbee3&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;f1872bb5608bce92b0248a0a9040c49f&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;5bc98b99f8e509b7b3cd09d4cf71eaa7&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;619268897f7f5b3581283ee66e5d059a&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;04e29aac53b7821d3ec6f1c0c9e8d3cf&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.1.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;06feda43bab8c134d7ff3b79af7a53a4&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 the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Payouts Overview Component: View&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;The Payout report relies on the &lt;a href=\\&quot;\\\/platforms\\\/reports-and-fees\\\/payout-report\\\/\\&quot;&gt;Balance Platform Payout report&lt;\\\/a&gt;. The Payout report has several limitations.&lt;ul&gt;&lt;li&gt;It is designed for platforms using &lt;a href=\\&quot;\\\/marketplaces\\\/payout-to-users\\\/scheduled-payouts\\&quot;&gt;automatic payouts&lt;\\\/a&gt; with a default &lt;a href=\\&quot;\\\/platforms\\\/settle-funds\\\/#settlement-delay\\&quot;&gt;settlement delay&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;li&gt; It does not support manual payouts, pass-through payouts, or sales day payout T+0.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Set up the Balance Platform Payout report to be generated, see &lt;a href=\\&quot;\\\/platforms\\\/reports-and-fees\\\/payout-report\\\/\\&quot;&gt;Balance Platform Payout report&lt;\\\/a&gt; to learn more.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;adbe1671042fc39c464dec04f7fdbee3&quot;:&quot;&lt;h2&gt;Payouts Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component shows a list of automatic payouts completed for a specific balance account within a specified time period. Each payout record includes details such as the date and time, funds captured, total adjustments, and net payout.&lt;\\\/p&gt;\\n&lt;p&gt;The funds captured represent the initial amount in the balance account on the day when a payout is initiated. This amount may be adjusted due to factors like fees, commissions, refunds, business financing, or internal funds transfers. The component presents these adjustments in an aggregated view. If you need to provide your users with a detailed breakdown of the payout adjustments, refer to the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;p&gt;After being adjusted, the funds captured amount results in the net payout amount, which is the final amount credited to the user&#039;s bank account.&lt;\\\/p&gt;\\n&lt;p&gt;All amounts are shown in the currency of the chosen balance account.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabDkJrg54755\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;54755&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payouts-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payouts-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payouts-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payouts-overview-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payouts-overview-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payouts-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of automatic payouts completed for a balance account, including funds captured, adjustments, and net payout amounts per payout.&lt;\\\/li&gt;\\n&lt;li&gt;Filter payouts by time period and balance account (if applicable). See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#payout-details-component\\&quot;&gt;\\n  &lt;strong&gt;Payout Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific payout.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for showing payout records. The specified time is based on the UTC+0 time zone.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, payouts from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes payouts from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Payout Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component shows specific information about a payout, including the date and time, breakdown of captured funds and adjustments, and the net payout amount. If there are any remaining funds in the balance account after the payout is completed, they will also be shown in the component.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab5Noi154755\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;54755&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payout-details-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payout-details-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payout-details-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/payout-details-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;15078df03fb68d31cb4305cb05a2f19c&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;#see-also\\&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;f1872bb5608bce92b0248a0a9040c49f&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;Payouts Overview Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&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 of &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 marketplace.&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;Payouts Overview Component: View&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;Payouts Overview Component: View\\\\&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;f3d47cd043b0a99a98c29c8e533848bc&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, component_name } 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;5bc98b99f8e509b7b3cd09d4cf71eaa7&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;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab7wDFL94120\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94120&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;allowLimitSelection&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 the user can change the number of payouts shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the payout date and the corresponding balance account ID when the user selects a specific payout from the overview.&amp;lt;br&amp;gt;You can use the obtained values to show the &amp;lt;strong&amp;gt;Payout Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Payouts Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&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;preferredLimit&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 number of payouts shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&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;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;date&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 payout date in an &amp;lt;a href=\\\\&amp;quot;https:\\\\\\\/\\\\\\\/www.iso.org\\\\\\\/iso-8601-date-and-time-format.html\\\\&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;ISO format&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;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the balance account.&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;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;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;Payout Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component on its own, 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;tabcGih894120\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94120&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;payouts-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;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;payout-details-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;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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, including the role, is the same for both payout 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;To implement the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when the user selects a specific payout from the overview page, the payout date and the corresponding balance account ID are automatically passed to the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component, and the modal window opens.&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;taboZN7894120\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94120&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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, PayoutsOverview } 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 payoutsOverview = new PayoutsOverview({ core });\\\\\\\\n\\\\\\\\npayoutsOverview.mount(&amp;#039;#payouts-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;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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, PayoutDetails } 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});\\\\\\\\n\\\\\\\\nconst payoutDetails = new PayoutDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;BA00000000000000000000001&amp;#039;\\\\\\\\n    date: &amp;#039;2024-12-31T00:00:00.135Z&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\npayoutDetails.mount(&amp;#039;#payout-details-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;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;To use the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const payoutsOverview = new PayoutsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ balanceAccountId, date }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected payout balance account id and date.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; and the &lt;code&gt;date&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const payoutDetails = new PayoutDetails({\\\\n   core,\\\\n   id: &#039;&amp;lt;SELECTED_PAYOUT_ID&amp;gt;&#039;,\\\\n   date: &#039;&amp;lt;SELECTED_PAYOUT_DATE&amp;gt;&#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&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also 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\\\\nconst 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\\\\nconst 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;619268897f7f5b3581283ee66e5d059a&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The payout 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 modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabrP6TL12655\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;12655&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-3&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-4&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-modal {\\\\\\\\n    border-left: 3px solid #0abf53;\\\\\\\\n    border-radius: 0;\\\\\\\\n    height: 100%;\\\\\\\\n    max-height: unset;\\\\\\\\n    right: 0;\\\\\\\\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\\n&quot;,&quot;04e29aac53b7821d3ec6f1c0c9e8d3cf&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;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;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;3b17c67d23dfb3afb24610546c22f21d&quot;:&quot;&lt;h2&gt;Payouts Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component shows a list of automatic payouts completed for a specific balance account within a specified time period. Each payout record includes details such as the date and time, funds captured, total adjustments, and net payout. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;The funds captured represent the initial amount in the balance account on the day when a payout is initiated. This amount may be adjusted due to factors like fees, commissions, refunds, business financing, or internal funds transfers. The component presents these adjustments in an aggregated view. If you need to provide your users with a detailed breakdown of the payout adjustments, refer to the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;p&gt;After being adjusted, the funds captured amount results in the net payout amount, which is the final amount credited to the user&#039;s bank account.&lt;\\\/p&gt;\\n&lt;p&gt;All amounts are shown in the currency of the chosen balance account.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabjtaN666864\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;66864&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payouts-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payouts-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payouts-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payouts-overview-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payouts-overview-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payouts-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of automatic payouts completed for a balance account, including funds captured, adjustments, and net payout amounts per payout.&lt;\\\/li&gt;\\n&lt;li&gt;Filter payouts by time period and balance account (if applicable). See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#payout-details-component\\&quot;&gt;\\n  &lt;strong&gt;Payout Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific payout.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for showing payout records. The specified time is based on the UTC+0 time zone.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, payouts from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes payouts from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payouts from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Payout Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component shows specific information about a payout, including the date and time, breakdown of captured funds and adjustments, and the net payout amount. If there are any remaining funds in the balance account after the payout is completed, they will also be shown in the component. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab4N7Ct66864\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;66864&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payout-details-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payout-details-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payout-details-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/payouts\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/payout-details-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;d47cf4f9625388bc796b0ebd7dfb4998&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;#see-also\\&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;li&gt;&lt;a href=\\&quot;#customize-data\\&quot;&gt;Optional: Customize component data&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;9be5168505e3b12b0331c09b541ceedf&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;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabgYDBb53709\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;53709&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;allowLimitSelection&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 the user can change the number of payouts shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains both the &amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; objects, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&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;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the payout date and the corresponding balance account ID when the user selects a specific payout from the overview.&amp;lt;br&amp;gt;You can use the obtained values to show the &amp;lt;strong&amp;gt;Payout Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Payouts Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&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;preferredLimit&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 number of payouts shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&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;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&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;date&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 payout date in an &amp;lt;a href=\\\\&amp;quot;https:\\\\\\\/\\\\\\\/www.iso.org\\\\\\\/iso-8601-date-and-time-format.html\\\\&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;ISO format&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;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the balance account.&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;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;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;Payout Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component on its own, 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;tabQIFN853709\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;53709&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;payouts-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;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;payout-details-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;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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, including the role, is the same for both payout 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;To implement the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when the user selects a specific payout from the overview page, the payout date and the corresponding balance account ID are automatically passed to the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component, and the modal window opens.&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;taboSAiu53709\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;53709&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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, PayoutsOverview } 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 payoutsOverview = new PayoutsOverview({ core });\\\\\\\\n\\\\\\\\npayoutsOverview.mount(&amp;#039;#payouts-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;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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, PayoutDetails } 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});\\\\\\\\n\\\\\\\\nconst payoutDetails = new PayoutDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;BA00000000000000000000001&amp;#039;\\\\\\\\n    date: &amp;#039;2024-12-31T00:00:00.135Z&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\npayoutDetails.mount(&amp;#039;#payout-details-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;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;To use the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Payouts Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const payoutsOverview = new PayoutsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ balanceAccountId, date }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected payout balance account id and date.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Payout Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; and the &lt;code&gt;date&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const payoutDetails = new PayoutDetails({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_PAYOUT_ID&amp;gt;&#039;,\\\\n    date: &#039;&amp;lt;SELECTED_PAYOUT_DATE&amp;gt;&#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&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;2dc49f2e604d98d5c3df42300f8dc114&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The payout components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabmkaAF34534\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;34534&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;list&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the payouts overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the payout detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { }, details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-customize-data-1_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the payout detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-customize-data-1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;Within the &lt;code&gt;list&lt;\\\/code&gt; and\\\/or &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tablyBFG34534\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;34534&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;fields&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;Defines the settings of dashboard fields in the payouts overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;fundsCapturedAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;adjustmentAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;, &amp;lt;strong&amp;gt;&amp;#039;payoutAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [] }, details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&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 that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with an array of the payout records extended with custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } }, details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-customize-data-2_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;fields&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;Defines the settings of dashboard fields in the payout detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Defaults to an empty string.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&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 that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with the extended payout record that contains custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-customize-data-2_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&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;align&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the content in a field is aligned. Possible values: &lt;strong&gt;left&lt;\\\/strong&gt;, &lt;strong&gt;center&lt;\\\/strong&gt;, &lt;strong&gt;right&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;left&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, align: &#039;right&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;flex&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Number&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines the width of a field in relation to other fields. It uses a numeric value that represents the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/flex-grow\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;flex-grow&lt;\\\/a&gt; factor in the CSS Flexbox layout. A higher value means that the field occupies more space compared to others. If not specified, it defaults to &lt;strong&gt;1&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;_store&#039;, flex: 2 }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;strong&gt;visible&lt;\\\/strong&gt;,  &lt;strong&gt;hidden&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;visible&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    onDataRetrieve: async (data) =&amp;gt; {\\\\n        const ids = data.map(payout =&amp;gt; payout.createdAt);\\\\n        const extendedData = await getMyDataByIds(ids);\\\\n        return extendedData;\\\\n    },\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`additionalData` object&#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;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_summary&#039; },\\\\n            { key: &#039;_sendEmail&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            return {\\\\n                ...data,\\\\n                _summary: {\\\\n                    value: &#039;Summary&#039;,\\\\n                    type: &#039;link&#039;,\\\\n                    config: {\\\\n                        href: CUSTOM_URL_EXAMPLE,\\\\n                    },\\\\n                },\\\\n               _sendEmail: {\\\\n                   type: &#039;button&#039;,\\\\n                   value: &#039;Send email&#039;,\\\\n                   config: {\\\\n                       action: () =&amp;gt; sendEmail(),\\\\n                   },\\\\n               },\\\\n           };\\\\n       },\\\\n   },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&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&gt;Type&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;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Determines how the custom data value should look and behave. Possible values: &lt;strong&gt;text&lt;\\\/strong&gt;, &lt;strong&gt;icon&lt;\\\/strong&gt;, &lt;strong&gt;link&lt;\\\/strong&gt;, &lt;strong&gt;button&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;text&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;div id=\\&quot;taboqKO134534\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;34534&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&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;`text` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-text_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Icon&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;`icon` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-icon_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Link&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;The target should accept both &amp;lt;code&amp;gt;_self&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&amp;gt;. The default option is &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&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;`link` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-link_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Button&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;`button` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-button_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Here is an example &lt;code&gt;dataCustomization&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab6a8Nz34534\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;34534&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payouts 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        list: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;adjustmentAmount&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_summary&amp;#039; },\\\\\\\\n                { key: &amp;#039;_country&amp;#039;, flex: 0.5 },\\\\\\\\n                { key: &amp;#039;_sendEmail&amp;#039;, align: &amp;#039;right&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: payouts =&amp;amp;gt; {\\\\\\\\n                return getCustomPayoutsData(payouts);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;_summary&amp;#039; }, { key: &amp;#039;_country&amp;#039; }, { key: &amp;#039;_sendEmail&amp;#039; }],\\\\\\\\n            onDataRetrieve: payout =&amp;amp;gt; {\\\\\\\\n                return getCustomPayoutsDataById(payout);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payouts-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payouts-overview-customize-data-3_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payouts-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payout Details 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [{key: &amp;#039;_store&amp;#039;}, {key: &amp;#039;_summary&amp;#039;}, {key: &amp;#039;_sendEmail&amp;#039;}],\\\\\\\\n            onDataRetrieve: payout =&amp;amp;gt; {\\\\\\\\n                return getCustomPayoutsDataById(payout)\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payout-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payout-details-customize-data-3_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payout-details&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;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _summary: &#039;Summary&#039;,\\\\n            _sendEmail:&#039;Send email&#039;,\\\\n        },\\\\n        es_ES: {\\\\n            _summary: &#039;Resumen&#039;,\\\\n            _sendEmail: &#039;Enviar correo electr\\\\u00f3nico&#039;,\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;ce9f02a4a67eabc9224e22f793075cba&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;tabzAnwu70290\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;70290&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;&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;}}}},&quot;reports&quot;:{&quot;label&quot;:&quot;Reports&quot;,&quot;integrations&quot;:{&quot;reports-component&quot;:{&quot;label&quot;:&quot;component&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for 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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;ba40a0e9cb5ccda29a7056f87d9bff4f&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;ba40a0e9cb5ccda29a7056f87d9bff4f&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;ba40a0e9cb5ccda29a7056f87d9bff4f&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&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;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;97ebbb44743538ec7a2800a218788da7&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;833d1e934f36e5bf91f10b8a11615228&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;a1d22fc4210dd5ae7ce216c7a9f686df&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.4.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.3.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3fa4c6d2db565a8c8d2453a7d178274b&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;af8a07c0f304ad99dd1dc456ce86908e&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&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.3.x&quot;}},&quot;version-1.2.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3fa4c6d2db565a8c8d2453a7d178274b&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;af8a07c0f304ad99dd1dc456ce86908e&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&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;version-1.1.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;5831b71c9fdda9698eed2ef366665145&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;3fa4c6d2db565a8c8d2453a7d178274b&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;9aa73e87627c6d947b83435ccd7cdef3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;af8a07c0f304ad99dd1dc456ce86908e&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;c769b42e2722e1d08bfb947ae699b234&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;04e29aac53b7821d3ec6f1c0c9e8d3cf&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.1.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;5831b71c9fdda9698eed2ef366665145&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 the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Reports Overview Component: View&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;Currently, the reports component only supports the Payout report. More report types will be added in the future. The Payout report relies on the &lt;a href=\\&quot;\\\/platforms\\\/reports-and-fees\\\/payout-report\\\/\\&quot;&gt;Balance Platform Payout report&lt;\\\/a&gt;. The Payout report has several limitations.&lt;ul&gt;&lt;li&gt;It is designed for platforms using &lt;a href=\\&quot;\\\/marketplaces\\\/payout-to-users\\\/scheduled-payouts\\&quot;&gt;automatic payouts&lt;\\\/a&gt; with a default &lt;a href=\\&quot;\\\/platforms\\\/settle-funds\\\/#settlement-delay\\&quot;&gt;settlement delay&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;li&gt; It does not support manual payouts, pass-through payouts, or sales day payout T+0.&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;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Set up the Balance Platform Payout report to be generated, see &lt;a href=\\&quot;\\\/platforms\\\/reports-and-fees\\\/payout-report\\\/\\&quot;&gt;Balance Platform Payout report&lt;\\\/a&gt; to learn more.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;3fa4c6d2db565a8c8d2453a7d178274b&quot;:&quot;&lt;h2&gt;Reports Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Reports Overview&lt;\\\/strong&gt; component shows a list of downloadable reports for a specific balance account within a specified time period.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabQ6Hq956253\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;56253&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/reports-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/reports-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;reports-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;reports-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/reports-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/reports-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;reports-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;reports-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Download a generated report in CSV format. The downloaded file name will be similar to this: &lt;code&gt;balanceaccount_payout_report_YYYY_MM_DD.csv&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Filter the generated reports by time period and balance account (if applicable). See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;h3&gt;Supported report types&lt;\\\/h3&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:150px\\&quot;&gt;Report type&lt;\\\/div&gt;&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;Payout report&lt;\\\/td&gt;\\n&lt;td&gt;This report shows a list of automatic payouts completed for a specific balance account within a specified time period, including details of the transactions (both debits and credits) which are part of these payouts.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Reports Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date range for showing available reports. Report data is automatically generated every day at midnight based on the UTC+0 time zone.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from the previous six days and today.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports for the current week, starting from Monday midnight until today.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from Monday midnight to Sunday midnight of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes reports from the previous 29 days and today.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from the previous month, starting from the first day of the month until the end of the month.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;15078df03fb68d31cb4305cb05a2f19c&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;#see-also\\&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;9aa73e87627c6d947b83435ccd7cdef3&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 the component 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;Reports Overview Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&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 of &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 marketplace.&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;Reports Overview Component: View&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;Reports Overview Component: View\\\\&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 component&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;f3d47cd043b0a99a98c29c8e533848bc&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, component_name } 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;af8a07c0f304ad99dd1dc456ce86908e&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize component&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the component:&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 component.&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 component.&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 component. 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 the component.&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;allowLimitSelection&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether the user can change the number of report records shown per page.&lt;br&gt;Default value: &lt;strong&gt;true&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;balanceAccountId&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Set this parameter to a specific balance account ID to show reports for the given account only.&lt;\\\/br&gt;If specified, the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter will be hidden.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;core&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 instance of the library.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;hideTitle&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether to show the component title &lt;strong&gt;Reports&lt;\\\/strong&gt;.&lt;br&gt;Default value: &lt;strong&gt;false&lt;\\\/strong&gt;. Set this to &lt;strong&gt;true&lt;\\\/strong&gt; to hide the component title.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onContactSupport&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function triggered when an error occurs on the reports table.&lt;\\\/br&gt;&lt;\\\/br&gt;If the function is defined, the component will show the default error screen, which includes the error code ID and a contact support button.&lt;\\\/br&gt;You can provide the URL to which you want to redirect the user when they click the button. For example, &lt;code&gt;onContactSupport: () =&amp;gt; {window.open(&#039;https:\\\/\\\/your-platform-domain\\\/support&#039;);}&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onError&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function triggered when an error occurs on the reports table.&lt;\\\/br&gt;&lt;\\\/br&gt;You can define the function based on how you want to handle the errors.&lt;\\\/br&gt;For example, you can log the errors on the console using &lt;code&gt;onError: (error) =&amp;gt; {console.log(error)}&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onFiltersChanged&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function triggered when the user changes the filter selection.&lt;\\\/br&gt;&lt;\\\/br&gt;The function receives the current filter selection as an argument, including the balance account ID and time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;preferredLimit&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The number of report records shown per page.&lt;br&gt;Default value: &lt;strong&gt;10&lt;\\\/strong&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 and assign it a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.&lt;\\\/p&gt;\\n&lt;p&gt;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;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create DOM element&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;html\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;&amp;lt;div id=\\\\\\&quot;reports-overview-container\\\\\\&quot;&amp;gt;&amp;lt;\\\\\\\/div&amp;gt;\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&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;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;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Initialize library and create component&#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, ReportsOverview } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport \\\\&amp;quot;@adyen\\\\\\\/adyen-platform-experience-web\\\\\\\/adyen-platform-experience-web.css\\\\&amp;quot;;\\\\n\\\\nconst core = await AdyenPlatformExperience({\\\\n    onSessionCreate: handleSessionCreate,\\\\n});\\\\nconst reportsOverview = new ReportsOverview({ core });\\\\n\\\\nreportsOverview.mount(&#039;#reports-overview-container&#039;);&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also 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\\\\nconst 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\\\\nconst 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;c769b42e2722e1d08bfb947ae699b234&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The reports 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 component. 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 modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabEusrg65961\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65961&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-reports-table--download {\\\\\\\\n    color: #0abf53;\\\\\\\\n    border: 1px solid #0abf53;\\\\\\\\n    border-radius: 20px;\\\\\\\\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\\n&quot;,&quot;04e29aac53b7821d3ec6f1c0c9e8d3cf&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;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;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;97ebbb44743538ec7a2800a218788da7&quot;:&quot;&lt;h2&gt;Reports Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Reports Overview&lt;\\\/strong&gt; component shows a list of downloadable reports for a specific balance account within a specified time period. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabYKwrG49167\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49167&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/reports-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/reports-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;reports-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;reports-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/reports-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/reports\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/reports-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;reports-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;reports-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Download a generated report in CSV format. The downloaded file name will be similar to this: &lt;code&gt;balanceaccount_payout_report_YYYY_MM_DD.csv&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Filter the generated reports by time period and balance account (if applicable). See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;h3&gt;Supported report types&lt;\\\/h3&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:150px\\&quot;&gt;Report type&lt;\\\/div&gt;&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;Payout report&lt;\\\/td&gt;\\n&lt;td&gt;This report shows a list of automatic payouts completed for a specific balance account within a specified time period, including details of the transactions (both debits and credits) which are part of these payouts.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Reports Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date range for showing available reports. Report data is automatically generated every day at midnight based on the UTC+0 time zone.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from the previous six days and today.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports for the current week, starting from Monday midnight until today.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from Monday midnight to Sunday midnight of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes reports from the previous 29 days and today.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from the previous month, starting from the first day of the month until the end of the month.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes reports from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;d47cf4f9625388bc796b0ebd7dfb4998&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;#see-also\\&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;li&gt;&lt;a href=\\&quot;#customize-data\\&quot;&gt;Optional: Customize component data&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;833d1e934f36e5bf91f10b8a11615228&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize component&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the component:&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 component.&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 component.&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 component. 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 the component.&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;allowLimitSelection&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether the user can change the number of report records shown per page.&lt;br&gt;Default value: &lt;strong&gt;true&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;balanceAccountId&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Set this parameter to a specific balance account ID to show reports for the given account only.&lt;\\\/br&gt;If specified, the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter will be hidden.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;core&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 instance of the library.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;dataCustomization&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An object that contains both the &lt;code&gt;list&lt;\\\/code&gt; and &lt;code&gt;details&lt;\\\/code&gt; objects, which include &lt;a href=\\&quot;#customize-data\\&quot;&gt;customization specifications&lt;\\\/a&gt; for dashboard fields, allowing for additional data integration from your database.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;hideTitle&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether to show the component title &lt;strong&gt;Reports&lt;\\\/strong&gt;.&lt;br&gt;Default value: &lt;strong&gt;false&lt;\\\/strong&gt;. Set this to &lt;strong&gt;true&lt;\\\/strong&gt; to hide the component title.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onContactSupport&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function triggered when an error occurs on the reports table.&lt;\\\/br&gt;&lt;\\\/br&gt;If the function is defined, the component will show the default error screen, which includes the error code ID and a contact support button.&lt;\\\/br&gt;You can provide the URL to which you want to redirect the user when they click the button. For example, &lt;code&gt;onContactSupport: () =&amp;gt; {window.open(&#039;https:\\\/\\\/your-platform-domain\\\/support&#039;);}&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onError&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function triggered when an error occurs on the reports table.&lt;\\\/br&gt;&lt;\\\/br&gt;You can define the function based on how you want to handle the errors.&lt;\\\/br&gt;For example, you can log the errors on the console using &lt;code&gt;onError: (error) =&amp;gt; {console.log(error)}&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onFiltersChanged&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function triggered when the user changes the filter selection.&lt;\\\/br&gt;&lt;\\\/br&gt;The function receives the current filter selection as an argument, including the balance account ID and time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;preferredLimit&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The number of report records shown per page.&lt;br&gt;Default value: &lt;strong&gt;10&lt;\\\/strong&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 and assign it a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.&lt;\\\/p&gt;\\n&lt;p&gt;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;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create DOM element&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;html\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;&amp;lt;div id=\\\\\\&quot;reports-overview-container\\\\\\&quot;&amp;gt;&amp;lt;\\\\\\\/div&amp;gt;\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&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;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;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Initialize library and create component&#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, ReportsOverview } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\nimport \\\\&amp;quot;@adyen\\\\\\\/adyen-platform-experience-web\\\\\\\/adyen-platform-experience-web.css\\\\&amp;quot;;\\\\n\\\\nconst core = await AdyenPlatformExperience({\\\\n    onSessionCreate: handleSessionCreate,\\\\n});\\\\nconst reportsOverview = new ReportsOverview({ core });\\\\n\\\\nreportsOverview.mount(&#039;#reports-overview-container&#039;);&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;a1d22fc4210dd5ae7ce216c7a9f686df&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The reports component allows you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&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;list&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An object that includes customization settings for dashboard fields in the reports overview.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;dataCustomization: { list: { } }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Within the &lt;code&gt;list&lt;\\\/code&gt; and\\\/or &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&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;fields&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Defines the settings of dashboard fields in the reports overview.&lt;\\\/br&gt;&lt;\\\/br&gt;Default fields: &lt;strong&gt;&#039;createdAt&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;dateAndReportType&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;reportType&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;reportFile&#039;&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;dataCustomization: { list: { fields: [] } }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onDataRetrieve&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function that retrieves a &lt;code&gt;Promise&lt;\\\/code&gt; object resolved with an array of the report records extended with custom data. Required if adding a custom field.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;dataCustomization: { list: { fields: [], onDataRetrieve: () =&amp;gt; {} } }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&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;align&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the content in a field is aligned. Possible values: &lt;strong&gt;left&lt;\\\/strong&gt;, &lt;strong&gt;center&lt;\\\/strong&gt;, &lt;strong&gt;right&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;left&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, align: &#039;right&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;flex&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Number&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines the width of a field in relation to other fields. It uses a numeric value that represents the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/CSS\\\/flex-grow\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;flex-grow&lt;\\\/a&gt; factor in the CSS Flexbox layout. A higher value means that the field occupies more space compared to others. If not specified, it defaults to &lt;strong&gt;1&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;_store&#039;, flex: 2 }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;strong&gt;visible&lt;\\\/strong&gt;,  &lt;strong&gt;hidden&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;visible&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;amount&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    onDataRetrieve: async (data) =&amp;gt; {\\\\n        const ids = data.map(report =&amp;gt; report.createdAt);\\\\n        const extendedData = await getMyDataByIds(ids);\\\\n        return extendedData;\\\\n    },\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`additionalData` object&#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;{\\\\n    list: {\\\\n        fields: [\\\\n            { key: &#039;_summary&#039; },\\\\n            { key: &#039;_sendEmail&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            return data.map(reportData =&amp;gt; ({\\\\n                ...reportData,\\\\n                _summary: {\\\\n                    value: &#039;Summary&#039;,\\\\n                    type: &#039;link&#039;,\\\\n                    config: {\\\\n                        href: CUSTOM_URL_EXAMPLE,\\\\n                    },\\\\n                },\\\\n               _sendEmail: {\\\\n                   type: &#039;button&#039;,\\\\n                   value: &#039;Send email&#039;,\\\\n                   config: {\\\\n                       action: () =&amp;gt; sendEmail(),\\\\n                   },\\\\n               },\\\\n           }));\\\\n       },\\\\n   },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&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&gt;Type&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;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Determines how the custom data value should look and behave. Possible values: &lt;strong&gt;text&lt;\\\/strong&gt;, &lt;strong&gt;icon&lt;\\\/strong&gt;, &lt;strong&gt;link&lt;\\\/strong&gt;, &lt;strong&gt;button&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;text&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;div id=\\&quot;tabDztj645418\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;45418&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&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;`text` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;text&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-text_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Icon&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;`icon` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;icon&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            src: &amp;#039;&amp;#039;,\\\\\\\\n                            alt: &amp;#039;&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-icon_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Link&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;The target should accept both &amp;lt;code&amp;gt;_self&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&amp;gt;. The default option is &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&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;`link` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;link&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            href: &amp;#039;&amp;#039;,\\\\\\\\n                            target: &amp;#039;_self&amp;#039;,\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-link_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Button&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;`button` data type&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;{\\\\\\\\n    list: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return [\\\\\\\\n                {\\\\\\\\n                    ...data[0],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n                {\\\\\\\\n                    ...data[1],\\\\\\\\n                    _store: {\\\\\\\\n                        type: &amp;#039;button&amp;#039;,\\\\\\\\n                        value: &amp;#039;New York&amp;#039;,\\\\\\\\n                        config: {\\\\\\\\n                            action: () =&amp;amp;gt; {},\\\\\\\\n                            className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                        },\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            ];\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-button_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Here is an example &lt;code&gt;dataCustomization&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Example `dataCustomization` object&#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;{\\\\n    dataCustomization: {\\\\n        list: {\\\\n            fields: [\\\\n                { key: &#039;reportType&#039;, visibility: &#039;hidden&#039; },\\\\n                { key: &#039;_summary&#039; },\\\\n                { key: &#039;_sendEmail&#039;, align: &#039;right&#039; },\\\\n                { key: &#039;reportFile&#039;, flex: 0.8 },\\\\n            ],\\\\n            onDataRetrieve: reports =&amp;gt; {\\\\n                return getCustomReportsData(reports);\\\\n            },\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _summary: &#039;Summary&#039;,\\\\n            _sendEmail:&#039;Send email&#039;,\\\\n        },\\\\n        es_ES: {\\\\n            _summary: &#039;Resumen&#039;,\\\\n            _sendEmail: &#039;Enviar correo electr\\\\u00f3nico&#039;,\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;ba40a0e9cb5ccda29a7056f87d9bff4f&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;tab1uPlo49339\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49339&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;&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;}}}},&quot;disputes&quot;:{&quot;label&quot;:&quot;Dispute&quot;,&quot;integrations&quot;:{&quot;dispute-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for 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;6f74292f968cd40807f1d51c772b7de8&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d7637fbfe445215cf4cf3ac7c7b3c41b&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;e9bf98e51cb0230e577d6ac8f9739ea6&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;4fb1677d98e03a94c8dc677f35231151&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7c2409670b058fc8fb3210003713c6f6&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e49e9d27d282cde85ccf20ab61077c66&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;75ec8cbd3fde40fcc01f193e4bf46b79&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;8be35c345f17d2f90e68ff3855c3eeba&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;fd4639ad3c31620a0e34d2b29a4b3a2c&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;6f74292f968cd40807f1d51c772b7de8&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d7637fbfe445215cf4cf3ac7c7b3c41b&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;e9bf98e51cb0230e577d6ac8f9739ea6&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;4fb1677d98e03a94c8dc677f35231151&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7c2409670b058fc8fb3210003713c6f6&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e49e9d27d282cde85ccf20ab61077c66&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;75ec8cbd3fde40fcc01f193e4bf46b79&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;8be35c345f17d2f90e68ff3855c3eeba&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;fd4639ad3c31620a0e34d2b29a4b3a2c&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.9.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.8.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;83ac10a5a89387f0aca5e150ce97313e&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d7637fbfe445215cf4cf3ac7c7b3c41b&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;e9bf98e51cb0230e577d6ac8f9739ea6&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;8b9667921240ff514cbea747796d3d92&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7c2409670b058fc8fb3210003713c6f6&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e49e9d27d282cde85ccf20ab61077c66&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;75ec8cbd3fde40fcc01f193e4bf46b79&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;8be35c345f17d2f90e68ff3855c3eeba&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;fd4639ad3c31620a0e34d2b29a4b3a2c&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;83ac10a5a89387f0aca5e150ce97313e&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d7637fbfe445215cf4cf3ac7c7b3c41b&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;e9bf98e51cb0230e577d6ac8f9739ea6&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;8b9667921240ff514cbea747796d3d92&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7c2409670b058fc8fb3210003713c6f6&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;75ec8cbd3fde40fcc01f193e4bf46b79&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;8be35c345f17d2f90e68ff3855c3eeba&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;fd4639ad3c31620a0e34d2b29a4b3a2c&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;83ac10a5a89387f0aca5e150ce97313e&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;d7637fbfe445215cf4cf3ac7c7b3c41b&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;e9bf98e51cb0230e577d6ac8f9739ea6&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;8b9667921240ff514cbea747796d3d92&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7c2409670b058fc8fb3210003713c6f6&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;75ec8cbd3fde40fcc01f193e4bf46b79&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;8be35c345f17d2f90e68ff3855c3eeba&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;fd4639ad3c31620a0e34d2b29a4b3a2c&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.6.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;83ac10a5a89387f0aca5e150ce97313e&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 the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Disputes 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;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Supported reason codes and payment methods&lt;\\\/strong&gt; &lt;br&gt;The disputes component lets you view and, where applicable, accept disputes from various card schemes. The component shows chargebacks, Requests For Information (RFIs) and Notifications of Fraud (NOFs). The Defend option is only available for Mastercard and Visa chargebacks with the following reason codes: &lt;br&gt;&lt;br&gt;&lt;strong&gt;Mastercard&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;4853&lt;\\\/strong&gt;: Cardholder dispute - Defective \\\/ Not as described.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;4837&lt;\\\/strong&gt;: No cardholder authorization.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;br&gt;&lt;strong&gt;Visa&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;10.4&lt;\\\/strong&gt;: Other Fraud-Card Absent Environment.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;13.1&lt;\\\/strong&gt;: Merchandise - Services not received.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;13.2&lt;\\\/strong&gt;: Cancelled recurring.&lt;\\\/li&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt; See also &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-reason-codes\\\/?tab=chargeback_0_1#defense_requirements\\&quot;&gt;Dispute reason codes and defense requirements&lt;\\\/a&gt;&lt;br&gt;&lt;br&gt;&lt;strong&gt;Unsupported dispute scenarios&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;For dispute reasons or payment methods not covered by the supported list, users must contact the platform directly.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/ul&gt; &lt;strong&gt;Document upload limits&lt;\\\/strong&gt; &lt;ul&gt;&lt;li&gt;Documents must be no larger than 2 MB and in &lt;code&gt;.pdf&lt;\\\/code&gt;, &lt;code&gt;.jpg&lt;\\\/code&gt;, .&lt;code&gt;jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;li&gt; Images files must be no larger than 10 MB and in &lt;code&gt;.jpg&lt;\\\/code&gt;, &lt;code&gt;.jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;strong&gt;Refunds not supported&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;Currently this component does not support refunds.&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;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;d7637fbfe445215cf4cf3ac7c7b3c41b&quot;:&quot;&lt;h2&gt;Disputes Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component shows a list of disputes, including chargebacks, Requests for Information (RFIs), and  fraud alerts for a specific balance account within a specified time period. Users can quickly view the status of open or closed disputes, helping them monitor and take action when needed.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes disputes into three tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Chargebacks&lt;\\\/strong&gt;: shows undefended or unresponded chargebacks and RFIs that require user action. Each dispute record includes details such as the respond by date, payment method, dispute reason, and disputed amount. Users can select a record to open the &lt;a href=\\&quot;#dispute-management-component\\&quot;&gt;\\n  &lt;strong&gt;Dispute Management&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, where they can accept or defend the dispute.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Fraud alerts&lt;\\\/strong&gt;: shows fraud alerts to help users identify suspicious activity. Each record includes the payment method, fraud reason, total payment amount, and date of the alert. Fraud alerts correspond to the term \\&quot;Notification of Fraud\\&quot; in the Customer Area and &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-process-and-flow\\&quot;&gt;dispute documentation&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Ongoing &amp;amp; closed&lt;\\\/strong&gt;: shows ongoing chargebacks, RFIs, and resolved disputes to help users track and match disputes against payment activity. Each dispute record includes details such as the payment method, dispute reason, and disputed amount. This tab also shows the status of a dispute, see dispute &lt;a href=\\&quot;#statuses-of-a-dispute\\&quot;&gt;statuses&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Note that the marketplace configuration dictates split chargeback handling. The &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component does not alter existing split logic. See &lt;a href=\\&quot;\\\/marketplaces\\\/split-transactions\\\/split-chargebacks\\&quot;&gt;Split chargebacks&lt;\\\/a&gt; for more details.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;The following illustrate each tab of the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabxwHZt93068\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;93068&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Chargebacks&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-chargebacks-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-chargebacks-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-chargebacks&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-chargebacks_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Fraud alerts&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-fraud-alerts-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-fraud-alerts-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-fraud-alerts&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-fraud-alerts_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Ongoing &amp;amp; closed&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-ongoing-closed-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-ongoing-closed-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-ongoing-closed&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-ongoing-closed_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of chargebacks, fraud alerts, and ongoing and closed disputes for all or a specific balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter disputes by balance account, date opened, payment method, and dispute reason. See &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#dispute-management-component\\&quot;&gt;\\n  &lt;strong&gt;Dispute Management&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific dispute and allows users to accept or defend a chargeback.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component.&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;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&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;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying dispute results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, disputes from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes disputes from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#payment-method\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Payment method&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;The &lt;strong&gt;Payment method&lt;\\\/strong&gt; filter enables users to filter disputes by specifying the payment method used; this corresponds with card schemes.&lt;\\\/p&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;#dispute-reason\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Dispute reason&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;The &lt;strong&gt;Dispute Reason&lt;\\\/strong&gt; filter lets users sort disputes by specifying the reason, such as fraud, consumer dispute, or processing error. Note, instead of dispute reasons, the fraud alerts tab shows Notifications of Fraud (NOF).&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Dispute Management component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component shows specific information about a dispute, including the &lt;a href=\\&quot;#dispute-statuses\\&quot;&gt;dispute status&lt;\\\/a&gt;, dispute reason, reason code, dispute, payment, and merchant references. The component also includes important dates such as when the dispute was opened and when a response is due. For chargebacks, users can accept or defend the dispute. When defending a chargeback, the component prompts users to complete required steps, such as selecting a defense reason and uploading supporting evidence. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabZ3aGI93068\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;93068&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component enables user to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View detailed information about a selected dispute, including dispute reason, reason code, status, and related reference information.&lt;\\\/li&gt;\\n&lt;li&gt;Accept a chargeback. Accepting a chargeback confirms the disputed amount will not be returned to the balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Defend a chargeback and submit a defense reason with supporting evidence, which is sent directly to the card schemes for review.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&quot;,&quot;e9bf98e51cb0230e577d6ac8f9739ea6&quot;:&quot;&lt;h2&gt;How disputes are defended through components&lt;\\\/h2&gt;\\n&lt;p&gt;Users can defend disputes directly through the dispute components. When the user submits a defense, the components automatically call Adyen&#039;s API to process the dispute. This means no additional actions are needed on your part as a platform.&lt;\\\/p&gt;\\n&lt;p&gt;The user flow for defending a chargeback dispute through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;From the Chargebacks tab the user selects a dispute record. In the Dispute Management, the user selects the &lt;strong&gt;Defend chargeback&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Defend chargeback&lt;\\\/strong&gt; modal window, the user specifies a reason for defending the chargeback.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Defend chargeback&lt;\\\/strong&gt; modal window the user is prompted to provide evidence. The user uploads the required documents to support the chargeback defense.&lt;\\\/li&gt;\\n&lt;li&gt;(Optional) The user has the option to upload additional documents to support the defense.&lt;\\\/li&gt;\\n&lt;li&gt;The user submits the defense for review.&lt;\\\/li&gt;\\n&lt;li&gt;After the dispute request is processed, users can view the &lt;a href=\\&quot;#dispute-statuses\\&quot;&gt;dispute status&lt;\\\/a&gt; message in the Dispute Management.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tab02sbG87245\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;87245&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Dispute management&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-management_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Defense reason&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/defend-reason.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/defend-reason.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;defense-reason&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;defense-reason_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Provide evidence&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/provide-evidence.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/provide-evidence.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;provide-evidence&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;provide-evidence_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Additional evidence&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/additional-evidence.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/additional-evidence.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;additional-evidence&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;additional-evidence_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Submit defense &amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/submit-defense.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/submit-defense.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;submit-defense&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;submit-defense_5&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute status&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-status.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-status.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-status&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-status_6&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;8b9667921240ff514cbea747796d3d92&quot;:&quot;&lt;h2 id=\\&quot;dispute-statuses\\&quot;&gt;Statuses of a dispute&lt;\\\/h2&gt;\\n&lt;p&gt;When a transaction is disputed, it can begin as an RFI (Request for Information) or a chargeback.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;An RFI is an initial inquiry from the issuer seeking more details about a transaction, and importantly, no funds are withdrawn from the balance account at this stage. An RFI doesn&#039;t always escalate to a chargeback.&lt;\\\/li&gt;\\n&lt;li&gt;A chargeback means that the disputed funds have been, or will soon be, withdrawn from the balance account. To potentially recover these funds, the user will need to submit a formal defense.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The dispute components show the status of a chargeback or RFIs, which represents the different stages the dispute goes through. The components automatically manage status updates, so no further action is needed on your part. Disputes move between tabs based on their current status. Each status reflects where the dispute is in the resolution process, and determines which tab it appears under.&lt;\\\/p&gt;\\n&lt;p&gt;For example, a chargeback may first appear under the &lt;strong&gt;Chargebacks&lt;\\\/strong&gt; tab when the status is &lt;strong&gt;Undefended&lt;\\\/strong&gt;. After the user submits a defense, the status changes to &lt;strong&gt;Pending&lt;\\\/strong&gt;, and the dispute automatically moves to the &lt;strong&gt;Ongoing &amp;amp; Closed&lt;\\\/strong&gt; disputes tab.&lt;\\\/p&gt;\\n&lt;p&gt;The following diagram illustrates how chargeback statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Some disputes are not defendable due to the rules of the payment method, not because of a limitation in the component. These disputes begin and end in the \\&quot;Lost\\&quot; status, as no defense action is possible.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&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;strong&gt;Undefended&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The chargeback is open, but no defense has been submitted yet. Action is required from the user if they want to defend the dispute.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Accepted&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has accepted the chargeback.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Pending&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has defended the chargeback. The issuer is reviewing the dispute and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Won&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was won.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Lost&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was lost, either because the issuer has not accepted the defense or the user did not take action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following diagram illustrates how RFI dispute statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&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;strong&gt;Unresponded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI is open, but no information has been submitted yet. The user must provide information by a certain time or the status will change to expired.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Responded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has submitted the requested information. The issuer is reviewing the response and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Expired &lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI has expired because the user did not taken action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;&lt;br&gt;For more information, see the &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-process-and-flow\\\/\\&quot;&gt;Dispute flow and process&lt;\\\/a&gt; section.&lt;\\\/p&gt;&quot;,&quot;d47cf4f9625388bc796b0ebd7dfb4998&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;#see-also\\&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;li&gt;&lt;a href=\\&quot;#customize-data\\&quot;&gt;Optional: Customize component data&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;7c2409670b058fc8fb3210003713c6f6&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;Disputes Component: Manage&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&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 of &lt;code&gt;https:\\\/\\\/www.your-company.example.com&lt;\\\/code&gt; or &lt;code&gt;https:\\\/\\\/*.your-company.example.com&lt;\\\/code&gt;, where &lt;code&gt;your-company.example.com&lt;\\\/code&gt; is the actual web address of your marketplace.&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. &lt;\\\/br&gt;From library &lt;strong&gt;v1.6.0&lt;\\\/strong&gt;, set this to &lt;strong&gt;Disputes Component: Manage&lt;\\\/strong&gt; role in your request to enable users to process disputes through the components.&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;Disputes 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;YOUR_SESSION_TOKEN_ID\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;YOUR_SESSION_TOKEN\\\\\\&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;f3d47cd043b0a99a98c29c8e533848bc&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, component_name } 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;75ec8cbd3fde40fcc01f193e4bf46b79&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;tabrTa5213858\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;13858&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes 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;allowLimitSelection&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 the user can change the number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&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;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;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the dispute PSP reference when the user selects a specific dispute from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained value to show the &amp;lt;strong&amp;gt;Dispute Management&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Disputes Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&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;preferredLimit&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 number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&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;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/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;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&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;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the dispute (PSP reference).&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;onDismiss&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 triggers when a user selects the Go back button on the dispute management screen. Define this function if you need to handle the dismissal of the flow.&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;onDisputeAccept&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 accepts the dispute and the dispute acceptance request has been successful. Define this function to exit the default flow after a successful dispute acceptance request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&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;onDisputeDefend&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 defends the dispute, and the defense acceptance request has been successful. Define this function to exit the default flow after a successful dispute defense request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&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;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-management-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/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;Disputes Management&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component on its own, 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;tabXpsoi13858\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;13858&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes 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;disputes-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;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;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;dispute-management-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;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-management-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both dispute 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;To implement the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific dispute from the overview page, the dispute ID is automatically passed to the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component, and the modal window opens.&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;tabN2EMB13858\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;13858&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes 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, DisputesOverview } 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 disputesOverview = new DisputesOverview({ core });\\\\\\\\n\\\\\\\\ndisputesOverview.mount(&amp;#039;#disputes-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;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;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, DisputeManagement } 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});\\\\\\\\n\\\\\\\\nconst disputeManagement = new DisputeManagement({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;PPKFQ89R6QRXGN82&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ndisputeManagement.mount(&amp;#039;#dispute-management-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;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-management-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const disputesOverview = new DisputesOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected dispute id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const disputeManagement = new DisputeManagement({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_DISPUTE_ID&amp;gt;&#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&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also 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\\\\nconst 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\\\\nconst 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;8be35c345f17d2f90e68ff3855c3eeba&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The dispute 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 modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabOZ04r3817\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;3817&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-3&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-4&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-modal {\\\\\\\\n    border-left: 3px solid #0abf53;\\\\\\\\n    border-radius: 0;\\\\\\\\n    height: 100%;\\\\\\\\n    max-height: unset;\\\\\\\\n    right: 0;\\\\\\\\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\\n&quot;,&quot;fd4639ad3c31620a0e34d2b29a4b3a2c&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The dispute components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab6bLqu37088\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;37088&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes 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;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the dispute management view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-customize-data-1_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/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;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the dispute management view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-management-customize-data-1_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Within the &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&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;fields&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Defines the settings of dashboard fields in the reports overview.&lt;\\\/br&gt;&lt;\\\/br&gt;Default fields: &lt;strong&gt;&#039;disputeReason&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;reasonCode&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;openedOn&#039;&lt;\\\/strong&gt;,&lt;strong&gt;&#039;respondBy&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;disputeId&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;account&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;paymentPspReference&#039;&lt;\\\/strong&gt;,&lt;strong&gt;&#039;paymentMerchantReference&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;defenseReason&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;defendedOn&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;disputeEvidence&#039;&lt;\\\/strong&gt;, &lt;strong&gt;&#039;acceptedOn&#039;&lt;\\\/strong&gt;,&lt;strong&gt;&#039;expiredOn&#039;&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onDataRetrieve&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function that retrieves a &lt;code&gt;Promise&lt;\\\/code&gt; object resolved on the extended dispute record that contains custom data.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&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;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;strong&gt;visible&lt;\\\/strong&gt;,  &lt;strong&gt;hidden&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;visible&lt;\\\/strong&gt;.&lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;{ key: &#039;account&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#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;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            const { store } = await getAdditionalData(id);\\\\n            return {\\\\n                ...data,\\\\n                _store: store,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&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&gt;Type&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;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&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;Determines how the custom data value should look and behave. Possible values: &lt;strong&gt;text&lt;\\\/strong&gt;, &lt;strong&gt;icon&lt;\\\/strong&gt;, &lt;strong&gt;link&lt;\\\/strong&gt;, &lt;strong&gt;button&lt;\\\/strong&gt;. If not specified, it defaults to &lt;strong&gt;text&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;div id=\\&quot;tabHLo1237088\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;37088&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&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;`text` data type&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;{\\\\\\\\n    details: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return {\\\\\\\\n                ...data,\\\\\\\\n                _store: {\\\\\\\\n                    type: &amp;#039;text&amp;#039;,\\\\\\\\n                    value: &amp;#039;New York&amp;#039;,\\\\\\\\n                    config: {\\\\\\\\n                        className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            };\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-text_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Icon&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;`icon` data type&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;{\\\\\\\\n    details: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return {\\\\\\\\n                ...data,\\\\\\\\n                _store: {\\\\\\\\n                    type: &amp;#039;icon&amp;#039;,\\\\\\\\n                    value: &amp;#039;New York&amp;#039;,\\\\\\\\n                    config: {\\\\\\\\n                        src: &amp;#039;&amp;#039;,\\\\\\\\n                        alt: &amp;#039;&amp;#039;,\\\\\\\\n                        className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            };\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-icon_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Link&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;The target should accept both &amp;lt;code&amp;gt;_self&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&amp;gt;. The default option is &amp;lt;code&amp;gt;_blank&amp;lt;\\\\\\\/code&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;`link` data type&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;{\\\\\\\\n    details: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return {\\\\\\\\n                ...data,\\\\\\\\n                _store: {\\\\\\\\n                    type: &amp;#039;link&amp;#039;,\\\\\\\\n                    value: &amp;#039;New York&amp;#039;,\\\\\\\\n                    config: {\\\\\\\\n                        href: &amp;#039;&amp;#039;,\\\\\\\\n                        target: &amp;#039;_self&amp;#039;,\\\\\\\\n                        className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            };\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-link_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Button&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;`button` data type&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;{\\\\\\\\n    details: {\\\\\\\\n        fields: [\\\\\\\\n            { key: &amp;#039;_store&amp;#039; },\\\\\\\\n        ],\\\\\\\\n        onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n            return {\\\\\\\\n                ...data,\\\\\\\\n                _store: {\\\\\\\\n                    type: &amp;#039;button&amp;#039;,\\\\\\\\n                    value: &amp;#039;New York&amp;#039;,\\\\\\\\n                    config: {\\\\\\\\n                        action: () =&amp;amp;gt; {},\\\\\\\\n                        className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                    },\\\\\\\\n                },\\\\\\\\n            };\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;custom-data-button_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Here is an example &lt;code&gt;dataCustomization&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab4S02l37088\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;37088&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes 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;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;account&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n            onDataRetrieve: async (dispute) =&amp;amp;gt; {\\\\\\\\n                const { store } = await getAdditionalData(id);\\\\\\\\n                return {\\\\\\\\n                    ...data,\\\\\\\\n                    _store: store\\\\\\\\n                };\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;disputes-overview-customize-data-2_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&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;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;account&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n            onDataRetrieve: async (dispute) =&amp;amp;gt; {\\\\\\\\n                const { store } = await getAdditionalData(id);\\\\\\\\n                return {\\\\\\\\n                    ...data,\\\\\\\\n                    _store: store\\\\\\\\n                };\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;dispute-management-customize-data-2_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _store: &#039;Store&#039;\\\\n        },\\\\n        es_ES: {\\\\n            _store: &#039;Tienda&#039;\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&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;e49e9d27d282cde85ccf20ab61077c66&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;tabdQUJw91355\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;91355&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;&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;,&quot;6f74292f968cd40807f1d51c772b7de8&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 the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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;Disputes 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;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Dispute visibility and access&lt;\\\/strong&gt; &lt;br&gt;&lt;br&gt;Account holders can view disputes created in this component on or after May 22, 2025.&lt;br&gt;&lt;br&gt; An account holder can perform an action or view submitted defense documents if and only if both of the following conditions are met: &lt;ul&gt;&lt;li&gt;They are the sole non-liable account holder referenced via splits in the original payment.&lt;\\\/li&gt;&lt;li&gt;They receive at least one split of type &lt;code&gt;BalanceAccount&lt;\\\/code&gt; in the corresponding payment or capture.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;br&gt;&lt;\\\/ul&gt; &lt;strong&gt;Document upload limits&lt;\\\/strong&gt; &lt;ul&gt;&lt;li&gt;Documents must be no larger than 2 MB and in &lt;code&gt;.pdf&lt;\\\/code&gt;, &lt;code&gt;.jpg&lt;\\\/code&gt;, .&lt;code&gt;jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;li&gt; Images files must be no larger than 10 MB and in &lt;code&gt;.jpg&lt;\\\/code&gt;, &lt;code&gt;.jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;strong&gt;Refunds not supported&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;Currently this component does not support refunds.&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;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;4fb1677d98e03a94c8dc677f35231151&quot;:&quot;&lt;h2 id=\\&quot;dispute-statuses\\&quot;&gt;Statuses of a dispute&lt;\\\/h2&gt;\\n&lt;p&gt;When a transaction is disputed, it can begin as an RFI (Request for Information) or a chargeback.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;An RFI is an initial inquiry from the issuer seeking more details about a transaction, and importantly, no funds are withdrawn from the balance account at this stage. An RFI doesn&#039;t always escalate to a chargeback.&lt;\\\/li&gt;\\n&lt;li&gt;A chargeback means that the disputed funds have been, or will soon be, withdrawn from the balance account. To potentially recover these funds, the user will need to submit a formal defense. For more information, see &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-reason-codes\\\/?tab=chargeback_0_1#defense_requirements\\&quot;&gt;Dispute reason codes and defense requirements&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The dispute components show the status of a chargeback or RFIs, which represents the different stages the dispute goes through. The components automatically manage status updates, so no further action is needed on your part. Disputes move between tabs based on their current status. Each status reflects where the dispute is in the resolution process, and determines which tab it appears under.&lt;\\\/p&gt;\\n&lt;p&gt;For example, a chargeback may first appear under the &lt;strong&gt;Chargebacks&lt;\\\/strong&gt; tab when the status is &lt;strong&gt;Undefended&lt;\\\/strong&gt;. After the user submits a defense, the status changes to &lt;strong&gt;Pending&lt;\\\/strong&gt;, and the dispute automatically moves to the &lt;strong&gt;Ongoing &amp;amp; Closed&lt;\\\/strong&gt; disputes tab.&lt;\\\/p&gt;\\n&lt;p&gt;The following diagram illustrates how chargeback statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Some disputes are not defendable due to the rules of the payment method, not because of a limitation in the component. These disputes begin and end in the \\&quot;Lost\\&quot; status, as no defense action is possible.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&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;strong&gt;Undefended&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The chargeback is open, but no defense has been submitted yet. Action is required from the user if they want to defend the dispute.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Accepted&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has accepted the chargeback.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Pending&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has defended the chargeback. The issuer is reviewing the dispute and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Won&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was won.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Lost&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was lost, either because the issuer has not accepted the defense or the user did not take action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following diagram illustrates how RFI dispute statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&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;strong&gt;Unresponded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI is open, but no information has been submitted yet. The user must provide information by a certain time or the status will change to expired.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Responded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has submitted the requested information. The issuer is reviewing the response and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Expired &lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI has expired because the user did not taken action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;&lt;br&gt;For more information, see the &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-process-and-flow\\\/\\&quot;&gt;Dispute flow and process&lt;\\\/a&gt; section.&lt;\\\/p&gt;&quot;}}}},&quot;pay-by-link&quot;:{&quot;label&quot;:&quot;Pay by Link&quot;,&quot;integrations&quot;:{&quot;pay-by-link-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for 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;7f9ed5aade21fcd74e538c9b6387bdba&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;c657212713506ad4ff178c844eebe7ef&quot;},&quot;create-a-link&quot;:{&quot;$ref&quot;:&quot;97cdf38027a3f0a87a368b8db5277ee4&quot;},&quot;configure-settings&quot;:{&quot;$ref&quot;:&quot;4ae5d66e3f50b72657c5bb566f2c7911&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;a365889e64eed26e6bfa5b4e7a5229b2&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;c0276b7b3a258ca496b0751dcb1e78dc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;5c6f48f73233e20d2d696bf29b689d35&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;4b5d32eaf00867eb4a70a115dd8dffc7&quot;},&quot;prefill-data&quot;:{&quot;$ref&quot;:&quot;df2782688264e890fdf0457820b63fc5&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;8593d0a63d3950c8ebbdddcb6999f5f5&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.10.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;7f9ed5aade21fcd74e538c9b6387bdba&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 the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&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 roles to your API credential: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: View&lt;\\\/strong&gt;. Allows the user to view payment links only. Used in &lt;a href=\\&quot;#payment-links-overview-component\\&quot;&gt;Pay by Link Overview&lt;\\\/a&gt; and &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;Pay by Link Details&lt;\\\/a&gt; components.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: View PII&lt;\\\/strong&gt;. Allows the user to view Personally Identifiable Information (PII) associated with payment links. Used in &lt;a href=\\&quot;#payment-links-overview-component\\&quot;&gt;Pay by Link Overview&lt;\\\/a&gt; and &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;Pay by Link Details&lt;\\\/a&gt; components.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: Manage Links&lt;\\\/strong&gt;. Allows the user to view, create, and deactivate payment links. Used in &lt;a href=\\&quot;#payment-links-overview-component\\&quot;&gt;Pay by Link Overview&lt;\\\/a&gt; and &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;Pay by Link Details&lt;\\\/a&gt; components.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: Manage Settings&lt;\\\/strong&gt;. Allows the user full administrative control over component configuration, themes, and settings. Used in &lt;a href=\\&quot;#terms-and-theme-settings\\&quot;&gt;Terms and theme settings&lt;\\\/a&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;Link availability and scope:&lt;ul&gt;&lt;li&gt;Payment links are available and searchable in the payment link list view for up to 90 days from the day they are created.&lt;\\\/li&gt;&lt;li&gt;Payment links have an expiration date. The specific expiry date is set by the user (up to a maximum of 70 days) or, if not specified by the user, the link will automatically expire 24 hours after creation.&lt;\\\/li&gt;&lt;\\\/ul&gt;Store requirement:&lt;ul&gt;&lt;li&gt;Account holders must be associated with at least one store to use the Pay by Link components.&lt;\\\/li&gt;&lt;\\\/ul&gt;Configuration inheritance:&lt;ul&gt;&lt;li&gt;Pay by Link components inherit all merchant or company account settings, except for the terms and conditions and the theme, which are configurable per store. This makes store selection a required step when creating a link, though your store will be automatically selected if you only have one. &lt;\\\/li&gt;&lt;li&gt;This component does not support automatic email sending.&lt;\\\/li&gt;&lt;li&gt;Themes configured in the component apply only to the component and are not used for links created through the API or Customer Area.&lt;\\\/li&gt;&lt;li&gt;Terms of Service configured within the component apply only to those links and are not used for links created through the API or Customer Area.&lt;\\\/li&gt;&lt;li&gt;When a shopper makes a payment with a link created in the component, the store split configuration determines how funds are distributed to your user&#039;s balance accounts. If a store does not have a split configuration, all funds are sent to the liable balance account by default. See more details at &lt;a href=\\&quot;\\\/platforms\\\/automatic-split-configuration\\&quot;&gt;split payments automatically&lt;\\\/a&gt;. This component does not alter existing split logic.&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;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;Associate account holders with at least one store to use the Pay by Link components.&lt;\\\/li&gt;&lt;li&gt;Link the store to a business line that includes &lt;code&gt;payByLink&lt;\\\/code&gt; or &lt;code&gt;eCommerce&lt;\\\/code&gt; in its sales channels. This can be configured during store creation (in the &lt;a href=\\&quot;\\\/platforms\\\/manage-stores?tab=CA-1_1#create-store\\&quot;&gt;Customer area&lt;\\\/a&gt; or while configuring business lines through the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/businessLines\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/businessLines&lt;\\\/a&gt;).&lt;\\\/li&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/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;c657212713506ad4ff178c844eebe7ef&quot;:&quot;&lt;h2&gt;Payment Links Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component allows users to create new payment links and view a list of existing links generated within a specified time period for all or a specific store. Users can quickly view their payment links, helping them monitor and track their status. When creating a new payment link, the marketplace configuration dictates split payment handling. This component does not alter existing split logic. For details see &lt;a href=\\&quot;#how-to-create-a-payment-link-through-components\\&quot;&gt;how to create a payment link&lt;\\\/a&gt; and &lt;a href=\\&quot;\\\/platforms\\\/automatic-split-configuration\\\/\\&quot;&gt;split payments automatically&lt;\\\/a&gt;. The links generated by this component support &lt;a href=\\&quot;\\\/unified-commerce\\\/pay-by-link\\\/supported-payment-methods#-supported-payment-methods-\\&quot;&gt;Pay by Link payment methods&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes payment links into two tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Active&lt;\\\/strong&gt;: Shows payment links that shoppers can use to make a payment. Each link record includes details such as payment link ID, status, amount, and expiration date. Links on this tab have a status of &lt;strong&gt;Active&lt;\\\/strong&gt; or &lt;strong&gt;Payment pending&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Inactive&lt;\\\/strong&gt;: Shows payment links that are no longer available for payment (either completed or expired). Each link record includes details such as payment link ID, status, amount, and expiration date. Links on this tab have a status of &lt;strong&gt;Completed&lt;\\\/strong&gt; or &lt;strong&gt;Expired&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following illustrate each tab of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabTytAR89908\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;89908&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Active&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-active-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-active-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-active&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-active_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Inactive&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-inactive-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-inactive-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-inactive&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-inactive_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Create new payment links to send to shoppers.&lt;\\\/li&gt;\\n&lt;li&gt;View a list of active and inactive payment links for all or a specific store.&lt;\\\/li&gt;\\n&lt;li&gt;Filter payment links by store, date, status, type, merchant reference, and payment link ID. See &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;Configure settings where your users can provide terms and conditions of their services to shoppers (this is required before you can create a payment link) and set your theme, including your brand name and logo.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;\\n  &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific payment link and allows users to copy or expire a payment link. Additionally, the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component provides access to the payment link creation flow and payment link settings.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component.&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;#store\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Store&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;The &lt;strong&gt;Store&lt;\\\/strong&gt; filter enables users to view payment links generated for a specific store.&lt;\\\/p&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;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&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;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying payment link results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&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;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, payment links from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes payment links from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period of up to 90 days.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&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;#status\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Status&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;The &lt;strong&gt;Status&lt;\\\/strong&gt; filter enables users to filter the list by the current status of the payment link. Possible values are: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Active&lt;\\\/strong&gt;: The link is live and ready to receive payments.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Payment pending&lt;\\\/strong&gt;: The payment process has been started, but the transaction has not been confirmed as successful or failed.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Completed&lt;\\\/strong&gt;: The payment link has successfully processed the required payment. For single use links, this status means the link is now deactivated.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Expired&lt;\\\/strong&gt;: The link is no longer valid or usable, either because a set expiration date was reached or because the link was deactivated by the user.&lt;\\\/p&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;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&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;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter enables users to filter payment links by their usage configuration, specifying whether the link is Single use or Open. &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Single use&lt;\\\/strong&gt;: A link that expires immediately after the first successful payment is made. It cannot be used again.&lt;\\\/li&gt;&lt;li&gt; &lt;strong&gt;Open&lt;\\\/strong&gt;: A link that can be used to process payments multiple times, until manually deactivated or canceled by the user.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/p&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;#merchant-reference\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Merchant reference &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;The &lt;strong&gt;Merchant reference&lt;\\\/strong&gt; filter enables users to filter the list by the unique reference associated with the payment.&lt;\\\/p&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;#payment-link-id\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Payment link ID&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;The &lt;strong&gt;Payment link ID&lt;\\\/strong&gt; filter enables users to filter the list by entering a unique identifier of the payment link.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Payment Link Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component shows specific information about a payment link. Users have the ability to disable an active link, which prevents any further payments from being made with that link, or easily copy the link&#039;s URL for sharing. This component provides users with a comprehensive view of payment link details such as the payment link ID, store, merchant reference, creation, expiration dates, link type, description. It also includes shopper specific information such as shopper reference number, full name, email, email notifications, phone, country or region, shipping and billing address and status history.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabmQYZz89908\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;89908&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-mobile_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Desktop&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-desktop_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;p&gt;The &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component enables user to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View detailed information about a selected payment link, including link information, shopper information, and activity.&lt;\\\/li&gt;\\n&lt;li&gt;Expire a payment link, making it unusable for further payments.&lt;\\\/li&gt;\\n&lt;li&gt;Copy a payment link, allowing the user to easily copy the payment link&#039;s URL to their clipboard, facilitating quick sharing via email or chat.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&quot;,&quot;97cdf38027a3f0a87a368b8db5277ee4&quot;:&quot;&lt;h2&gt;How to create a payment link through components&lt;\\\/h2&gt;\\n&lt;p&gt;Users can create a new payment link directly through the Pay by Link components.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices yellow\\&quot;&gt;\\n&lt;p&gt;Note: The user must provide the required shopper Terms and conditions URL and confirm compliance under the &lt;a href=\\&quot;#terms-and-theme-settings\\&quot;&gt;Settings&lt;\\\/a&gt; tab before a payment link can be created.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;The user flow for creating a payment link through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;From the &lt;strong&gt;Active&lt;\\\/strong&gt; or &lt;strong&gt;Inactive&lt;\\\/strong&gt; tabs the user selects the &lt;strong&gt;Create payment link&lt;\\\/strong&gt; button, selects a &lt;strong&gt;Store&lt;\\\/strong&gt;, and selects the &lt;strong&gt;Continue&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Payment&lt;\\\/strong&gt; step, the user fills in the required information and selects the &lt;strong&gt;Continue&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Customer&lt;\\\/strong&gt; step, the user provides contact and address details and selects the &lt;strong&gt;Continue&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Summary&lt;\\\/strong&gt; step, the user reviews all the details before generating the link. Note, that once created you will no longer be able to change the details of the payment link. To complete the process and generate the link, the user selects the &lt;strong&gt;Create payment link&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;A confirmation screen appears to indicate the payment link has been created. At this point the user can copy the payment link to share the URL with the shopper, or they can select &lt;strong&gt;Show details&lt;\\\/strong&gt; to view the details.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Payment links created through this component are visible and accessible in both the component&#039;s list view and the &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Customer Area&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div id=\\&quot;tabakNZ271146\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;71146&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Initiate&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-initiate.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-initiate.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;initiate&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;initiate_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-payment-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-payment-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-details_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Customer details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-customer-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-customer-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;shopper-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;shopper-details_3&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Review summary&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-review-summary.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-review-summary.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;review-summary&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;review-summary_4&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Share &amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-share.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-share.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;confirm-share&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;confirm-share_5&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;4ae5d66e3f50b72657c5bb566f2c7911&quot;:&quot;&lt;h2&gt;Terms and theme settings&lt;\\\/h2&gt;\\n&lt;p&gt;The settings area of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component is where your users must complete the initial requirements and can optionally customize the shopper&#039;s payment experience.&lt;\\\/p&gt;\\n&lt;p&gt;The settings menu contains two items that are managed per store: &lt;strong&gt;Themes&lt;\\\/strong&gt; and &lt;strong&gt;Terms and conditions&lt;\\\/strong&gt;. For each store selected, the your user can set or edit the following items:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Terms and conditions&lt;\\\/strong&gt;: Your users must provide a terms and conditions URL that satisfies all the &lt;a href=\\&quot;\\\/unified-commerce\\\/pay-by-link#terms-and-conditions-requirements\\&quot;&gt;required information&lt;\\\/a&gt;. This step is required before your users can create their first payment link, as consumer law and scheme regulations require your users to inform shoppers of the applicable terms. Only one terms and conditions URL is allowed per store.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Themes&lt;\\\/strong&gt;: Your users can set a theme and customize the appearance of the payment page that shoppers see, which includes configuring a brand name and uploading a logo. Your users are limited to two logo options: Full-width and standard logo, both with specified constraints. Only one theme is allowed per store.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n\\n&lt;div id=\\&quot;tabOuIo223019\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;23019&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Terms and conditions&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-terms-conditions.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-terms-conditions.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;pay-back-link-terms-conditions&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;pay-back-link-terms-conditions_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Themes&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-themes.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-themes.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-by-link-themes&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-by-link-themes_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;15078df03fb68d31cb4305cb05a2f19c&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;#see-also\\&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;a365889e64eed26e6bfa5b4e7a5229b2&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;Pay By Link Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&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 of &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 marketplace.&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 stores and associated with the payment links 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 roles required to use the component: &lt;br&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: View&lt;\\\/strong&gt; to enable users to view payment links only.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: View PII&lt;\\\/strong&gt; to enable users to view Personally Identifiable Information (PII).&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: Manage Links&lt;\\\/strong&gt; role to allow the user to view, create, and deactivate payment links.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: Manage Settings&lt;\\\/strong&gt; role to grant the user full administrative control over component configuration, themes, and settings.&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;Pay By Link Component: View\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Pay By Link Component: View PII\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Pay By Link Component: Manage Links\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Pay By Link Component: Manage Settings\\\\&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;c0276b7b3a258ca496b0751dcb1e78dc&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;tabzYwsb14091\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;14091&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;,&quot;5c6f48f73233e20d2d696bf29b689d35&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;tabFdXwU2185\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2185&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links 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;allowLimitSelection&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 the user can change the number of payment links shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the payment link ID when the user selects a specific payment link from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Payment Link Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Payment Links Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&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;preferredLimit&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 number of payment links shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&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;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-initialize-parameters_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details 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;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the payment link.&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;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-details-initialize-parameters_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&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;Select the tab for the feature you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabjSycB2185\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2185&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&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;fieldsConfig&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;A configuration object used to prefill the payment link form and control field visibility. See &amp;lt;a href=\\\\&amp;quot;#prefill-data\\\\&amp;quot;&amp;gt;details below&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;onPaymentLinkCreated&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, this event triggers upon the successful creation of a payment link by the user, providing the complete payment link details along with the unique payment link ID. The obtained ID value can be used to send an email to the shopper or show details in a different location within your portal&amp;#039;s UI.&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;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-creation_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Settings&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;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-settings_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your 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;Payment Link Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component on its own, 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;ol&gt;\\n&lt;li&gt;Select the tab for the component you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tab3uJLv2185\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2185&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links 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;payment-links-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;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-create-dom_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details 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;payment-link-details-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;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-details-create-dom_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&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;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Select the tab fo the feature you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabhqctI2185\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2185&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&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;payment-link-creation-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;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-creation_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link 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;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;payment-link-settings-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;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-settings_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&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 &lt;strong&gt;Pay by Link&lt;\\\/strong&gt; 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;To implement the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific payment link from the overview page, the payment link ID is automatically passed to the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Select the tab for the component you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tab7a3EN2185\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2185&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links 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, PaymentLinksOverview } 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 paymentLinksOverview = new PaymentLinksOverview({ core });\\\\\\\\n\\\\\\\\npaymentLinksOverview.mount(&amp;#039;#payment-links-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;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-links-overview-initialize-mount_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details 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, PaymentLinkDetails } 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});\\\\\\\\n\\\\\\\\nconst paymentLinkDetails = new PaymentLinkDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkDetails.mount(&amp;#039;#payment-link-details-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;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-details-initialize-mount_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&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;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Select the tab for the feature you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabJXsSq2185\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;2185&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&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;Payment Link creation&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, PaymentLinkCreation } 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});\\\\\\\\n\\\\\\\\nconst paymentLinkCreation = new PaymentLinkCreation({\\\\\\\\n    core,\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkCreation.mount(&amp;#039;#payment-link-creation-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;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-creation_1&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link 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;Payment Link settings&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, PaymentLinkSettings } 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});\\\\\\\\n\\\\\\\\nconst paymentLinkSettings = new PaymentLinkSettings({\\\\\\\\n    core,\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkSettings.mount(&amp;#039;#payment-link-settings-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;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:&amp;quot;payment-link-settings_2&amp;quot;,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&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) To use the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const paymentLinksOverview = new PaymentLinksOverview({\\\\n      core,\\\\n      onRecordSelection: ({ id }) =&amp;gt; {\\\\n             \\\\\\\/\\\\\\\/ Use selected payment link id.\\\\n      }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const paymentLinkDetails = new PaymentLinkDetails({\\\\n      core,\\\\n      id: &#039;&amp;lt;SELECTED_PaymentLink_ID&amp;gt;&#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&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also 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\\\\nconst 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\\\\nconst 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;4b5d32eaf00867eb4a70a115dd8dffc7&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The pay-by-link 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 modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabS1rUc4135\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;4135&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-3&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-4&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-modal {\\\\\\\\n    border-left: 3px solid #0abf53;\\\\\\\\n    border-radius: 0;\\\\\\\\n    height: 100%;\\\\\\\\n    max-height: unset;\\\\\\\\n    right: 0;\\\\\\\\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\\n&quot;,&quot;df2782688264e890fdf0457820b63fc5&quot;:&quot;&lt;h2 id=\\&quot;prefill-data\\&quot;&gt;6. Optional: Pre-populate component data&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;code&gt;fieldsConfig&lt;\\\/code&gt; object allows you to pre-populate the payment link creation form, set fields to a &lt;strong&gt;readOnly&lt;\\\/strong&gt; state to restrict user editing, and control the visibility of individual fields.&lt;\\\/p&gt;\\n&lt;p&gt;The object accepts two optional parameters:&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;Parameter&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 style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;data&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Contains the values used to pre-populate any subset of supported fields.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Sets field behavior to either &lt;strong&gt;readOnly&lt;\\\/strong&gt; (visible but locked) or &lt;strong&gt;hidden&lt;\\\/strong&gt; (removed from the UI, but still validated). If a key is missing from the &lt;code&gt;visibility&lt;\\\/code&gt; object, the field defaults to an editable state.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;Use the following structure to define your &lt;code&gt;fieldsConfig&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Initial structure&#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{\\\\n \\\\\\&quot;data\\\\\\&quot;: {\\\\n   \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;shopper@example.com\\\\\\&quot;,\\\\n   \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;+31 0690758074\\\\\\&quot;\\\\n },\\\\n \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n   \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n   \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;\\\\n }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h3&gt;Targetable fields and subfields&lt;\\\/h3&gt;\\n&lt;p&gt;The following example shows the object structure and all fields available for pre-population or restriction within &lt;code&gt;fieldsConfig&lt;\\\/code&gt;. You can target top-level fields or specific sub-fields. To do this, see &lt;a href=\\&quot;#field-visibility-settings-notation\\&quot;&gt;Field visibility settings notation&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Targetable fields and subfields&#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;data\\\\\\&quot;: {\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n      \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;, \\\\\\\/\\\\\\\/ Three letter currency code\\\\n      \\\\\\&quot;value\\\\\\&quot;: 10000 \\\\\\\/\\\\\\\/ 100 EUR with 2 decimals\\\\n    },\\\\n    \\\\\\&quot;deliveryAddress\\\\\\&quot;: {\\\\n      \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Amsterdam\\\\\\&quot;,\\\\n      \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;NL\\\\\\&quot;, \\\\\\\/\\\\\\\/ Two letter country code (ISO 3166-1 alpha-2)\\\\n      \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;136\\\\\\&quot;,\\\\n      \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;1011DJ\\\\\\&quot;,\\\\n      \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;Simon Carmiggeltstraat\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;billingAddress\\\\\\&quot;: {\\\\n      \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Medellin\\\\\\&quot;,\\\\n      \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;CO\\\\\\&quot;, \\\\\\\/\\\\\\\/ Two letter country code (ISO 3166-1 alpha-2)\\\\n      \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;201\\\\\\&quot;,\\\\n      \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;05001\\\\\\&quot;,\\\\n      \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;Calle 25 #34-12\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;description\\\\\\&quot;: \\\\\\&quot;This is a test description\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;MER-000001\\\\\\&quot;, \\\\\\\/\\\\\\\/ Merchant Reference\\\\n    \\\\\\&quot;deliverAt\\\\\\&quot;: \\\\\\&quot;2025-12-09T11:39:24.458Z\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;shopper@example.com\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperLocale\\\\\\&quot;: \\\\\\&quot;en-US\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;SHP-000001\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperName\\\\\\&quot;: {\\\\n      \\\\\\&quot;firstName\\\\\\&quot;: \\\\\\&quot;John\\\\\\&quot;,\\\\n      \\\\\\&quot;lastName\\\\\\&quot;: \\\\\\&quot;Doe\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;countryCode\\\\\\&quot;: \\\\\\&quot;ES\\\\\\&quot;, \\\\\\\/\\\\\\\/ Two letter country code (ISO 3166-1 alpha-2)\\\\n    \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;+31 0690758074\\\\\\&quot;, \\\\\\\/\\\\\\\/ Format: +&amp;lt;country code&amp;gt; &amp;lt;phone number&amp;gt;\\\\n    \\\\\\&quot;linkValidity\\\\\\&quot;: {\\\\n      \\\\\\&quot;durationUnit\\\\\\&quot;: \\\\\\&quot;week\\\\\\&quot;, \\\\\\\/\\\\\\\/ minute, hour, day, week\\\\n      \\\\\\&quot;quantity\\\\\\&quot;: 3\\\\n    }\\\\n  },\\\\n  \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n      \\\\\\&quot;value\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;deliveryAddress\\\\\\&quot;: {\\\\n      \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;billingAddress\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;description\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;deliverAt\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperLocale\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperName\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;countryCode\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;linkValidity\\\\\\&quot;: {\\\\n      \\\\\\&quot;durationUnit\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;quantity\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n    }\\\\n  }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h3&gt;Field requirements and constraints&lt;\\\/h3&gt;\\n&lt;p&gt;When pre-populating data, ensure that you follow these specific formats:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Fields&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: right;\\&quot;&gt;Type&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;currency&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The three-character &lt;a href=\\&quot;\\\/development-resources\\\/currency-codes#currency-codes\\&quot;&gt;ISO currency code&lt;\\\/a&gt; of the amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;value&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The numeric value of the amount, in &lt;a href=\\&quot;\\\/development-resources\\\/currency-codes#minor-units\\&quot;&gt;minor units&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;country&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The two-letter country code, in &lt;a href=\\&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/ISO_3166-1_alpha-2\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 3166-1 alpha-2&lt;\\\/a&gt; format. Used in &lt;code&gt;billingAddress&lt;\\\/code&gt; and &lt;code&gt;deliveryAddress&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;deliverAt&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The date and time when the purchased goods should be delivered.&lt;br&gt; &lt;a href=\\&quot;https:\\\/\\\/www.w3.org\\\/TR\\\/NOTE-datetime\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 8601&lt;\\\/a&gt; format: &lt;strong&gt;YYYY-MM-DDThh:mm:ss+TZD&lt;\\\/strong&gt;, for example, 2020-12-18T10:15:30+01:00.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;shopperLocale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The combination of a language code and a country code to specify the &lt;a href=\\&quot;\\\/unified-commerce\\\/pay-by-link\\\/create-payment-links\\\/api#language\\&quot;&gt;language&lt;\\\/a&gt; to be used.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;telephoneNumber&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The shopper&#039;s telephone number. Must include a \\&quot;+\\&quot; prefix, country code, and a space before the number (for example, +31 0690758074).&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;durationUnit&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The duration of the payment link validity. Possible values: &lt;strong&gt;minute&lt;\\\/strong&gt;, &lt;strong&gt;hour&lt;\\\/strong&gt;, &lt;strong&gt;day&lt;\\\/strong&gt;, &lt;strong&gt;week&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;quantity&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;integer&lt;\\\/td&gt;\\n&lt;td&gt;The numerical value of the duration of the payment link validity, in terms of the defined &lt;code&gt;durationUnit&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;reference&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The reference to uniquely identify your user.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;shopperReference&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The reference to uniquely identify this shopper.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h3&gt;Field visibility settings notation&lt;\\\/h3&gt;\\n&lt;p&gt;When setting the visibility of fields, you can either apply a rule to a top-level field (which affects all its nested properties) or target specific sub-fields individually.&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;Notation&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Usage&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Example&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;string&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Applies one rule to an entire top-level field (fieldset).&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;\\&quot;billingAddress\\&quot;: \\&quot;readOnly\\&quot;&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;object&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Applies different rules per individual sub-field.&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;\\&quot;billingAddress\\&quot;: { \\&quot;city\\&quot;: \\&quot;readOnly\\&quot; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Individual address fields cannot be set to &lt;strong&gt;hidden&lt;\\\/strong&gt;. This rule must be applied to the entire fieldset (for example, &lt;code&gt;billingAddress&lt;\\\/code&gt; or &lt;code&gt;deliveryAddress&lt;\\\/code&gt;). This restriction exists because if any field within an address fieldset is populated, all other fields are also required to have a value for validation.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;Common use cases&lt;\\\/h4&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Use case&lt;\\\/th&gt;\\n&lt;th&gt;Data&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Visibility\\\/State&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;Pre-populate shopper details, allow edits.&lt;\\\/td&gt;\\n&lt;td&gt;Provide values for specific fields, for example &lt;code&gt;shopperEmail&lt;\\\/code&gt;).&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Omit the field or object.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Pre-populate and lock addresses.&lt;\\\/td&gt;\\n&lt;td&gt;Provide values, for example &lt;code&gt;billingAddress&lt;\\\/code&gt; or &lt;code&gt;deliveryAddress&lt;\\\/code&gt;. In this case, provide all required sub-fields for &lt;code&gt;billingAddress&lt;\\\/code&gt; or &lt;code&gt;deliveryAddress&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Set to &lt;strong&gt;readOnly&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Hide optional sections.&lt;\\\/td&gt;\\n&lt;td&gt;Provide values for the field for required for validation.&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Set the specific object or field to &lt;strong&gt;hidden&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h4&gt;Example configurations&lt;\\\/h4&gt;\\n&lt;p&gt;This example shows how to pre-populate an address, transaction amount, and phone number, while you lock the address and hide the &lt;code&gt;shopperReference&lt;\\\/code&gt; field.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Pre-populate and lock billing data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;\\\\n{\\\\n \\\\\\&quot;data\\\\\\&quot;: {\\\\n   \\\\\\&quot;billingAddress\\\\\\&quot;: {\\\\n     \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Amsterdam\\\\\\&quot;,\\\\n     \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;NL\\\\\\&quot;,\\\\n     \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;136\\\\\\&quot;,\\\\n     \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;1011DJ\\\\\\&quot;,\\\\n     \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;Simon Carmiggeltstraat\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;amount\\\\\\&quot;: {\\\\n     \\\\\\&quot;value\\\\\\&quot;: 12500,\\\\n     \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;+31 0690758074\\\\\\&quot;,\\\\n   \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;SHP-000001\\\\\\&quot;\\\\n },\\\\n \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n   \\\\\\&quot;billingAddress\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n   \\\\\\&quot;amount\\\\\\&quot;: {\\\\n     \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;\\\\n }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;This example shows how to lock specific fields. Note that individual address sub-fields remain &lt;strong&gt;readOnly&lt;\\\/strong&gt; per the validation requirements.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Mixed visibility on nested fields&#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{\\\\n \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n   \\\\\\&quot;deliveryAddress\\\\\\&quot;: {\\\\n     \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n     \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;linkValidity\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;\\\\n }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;Usage tips&lt;\\\/h4&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Pre-populate locked fields&lt;\\\/strong&gt;: A read-only input without data is confusing. Always provide values for locked fields.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Hidden are not optional&lt;\\\/strong&gt;: Validation still runs on &lt;strong&gt;hidden&lt;\\\/strong&gt; fields. You must provide valid values via &lt;code&gt;data&lt;\\\/code&gt; for any required fields you hide.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Match compliance policies&lt;\\\/strong&gt;: Hide or lock fields that must not be edited based on your specific compliance requirements.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&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;}}}}}}\"\n        query-param-tab=\"component\"\n        query-param-box=\"integration\"\n        query-param-dropdown=\"version\">\n    <\/in-page-filtering>\n<\/div>\n<div class=\"version_docs__image-placeholder u-display-none\">\n    <\/div>\n\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/marketplaces\/components-overview\"\n                        target=\"_self\"\n                        >\n                    Component libraries\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/marketplaces\/build-user-dashboards","articleFields":{"description":"Use Platform Experience components to build interactive dashboards for your users.","feedback_component":true,"filters_component":false,"cache_enable":false,"parameters":{"directoryPath":"\/marketplaces","model":"marketplace"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/marketplaces\/build-user-dashboards","title":"Build user dashboards with UI 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\nAdyen offers Platform Experience components that are designed to simplify the development of your portal's user interface (UI). You can use these components to create interactive user dashboards, which provide users with a clear view of their transactional data. This allows them to easily track the movement of funds in their balance accounts.\nYou can integrate the following components:\n\nTransaction components: Provide your users with a dashboard that shows their transactional data. With this dashboard, users can view and filter transactions for any of their balance accounts.\n\nPayout components: Provide your users with a dashboard that shows completed automatic payouts for each user\u2019s balance account. This information allows users to reconcile the payouts they receive in their bank accounts with batches of payments and other related transactions.\nReports component: Provide your users with a dashboard that shows daily reports generated by Adyen for their balance accounts. These reports detail the movement of funds within their accounts, such as payouts. This information can assist users with their bookkeeping and reconciliation processes.\nDispute components: Provide your users with a dashboard view of open and resolved disputes, as well as fraud alerts (which correspond to the term \"Notification of Fraud\" in the Customer Area). This way, users can review disputes, choose to accept chargebacks, or defend them by submitting defense documents, all without needing to contact your support team or rely on email threads.\nPay by Link components: Provide your users with the ability to generate and manage secure payment links. Users can view a list of all existing payment links within a specified period, including key details such as payment link ID, status, amount, and expiration date. This allows users to easily track the life cycle of the payment links they create.\n\nThe guidance and features available may differ based on the library version in use. We recommend using the latest library version to take advantage of the newest features and improvements.\nEnsure you select a component type and a library version that suit your situation in the following sections.\nSelect a component type\nSelect the tab for the component you are interested in to view the relevant description and integration steps:\n\n    \n    \n\n\n    \n\nSee also\n\n\n                    Component libraries\n                \n","type":"page","locale":"pt","boost":18,"hierarchy":{"lvl0":"Home","lvl1":"Marketplaces","lvl2":"Build user dashboards with UI components"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/marketplaces","lvl2":"\/pt\/marketplaces\/build-user-dashboards"},"levels":3,"category":"Marketplaces","category_color":"green","tags":["Build","dashboards","components"]}}