{"title":"Report components","category":"default","creationDate":1789473963,"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=\"GitHub logo\" 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=\"Click icon\" 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=\"Megaphone icon\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/megaphone.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"\/release-notes\/platforms-and-financial-products\">Explore the latest updates<\/a><\/p><\/div><\/div>\n\n<p>The report component enables report management within a portal's user interface (UI) with minimal engineering effort. This component integrates the features required to filter and retrieve reports without making multiple API requests. This removes the need to implement complex API calls to filter and download available reports for a specific balance account to ensure access to the most current data.<\/p>\n<p>Additionally, the components provide greater flexibility for data customization. These components can be customized with your own custom fields, icons, links, and buttons, allowing the UI to align with your specific business needs.<br \/>\nThis page provides guidance on:<\/p>\n<ul>\n<li>The <strong>Report Overview<\/strong> component.<\/li>\n<li>Functionalities such as filtering by balance account and daily data generation.<\/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 version in the next section before starting your integration.<\/p>\n<div data-component-wrapper=\"in-page-filtering\">\n    <in-page-filtering\n        id=\"pe-components-reports\"\n        :in-page-filtering=\"{&quot;guides&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.14.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;048d32e64937d3b88ac5a5acd5e4c3eb&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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.14.x&quot;}},&quot;version-1.13.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;048d32e64937d3b88ac5a5acd5e4c3eb&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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.13.x&quot;}},&quot;version-1.12.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;048d32e64937d3b88ac5a5acd5e4c3eb&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.12.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.11.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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.11.x&quot;}},&quot;version-1.10.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;e8a3f4073e329c08fd21ed4e9cc477b0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6f17b265d277036a393038e4abb7470a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8c36b4b46da2f54f1db6add909ed6a71&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;7d928a6f72bec6be07073c92aac3a28f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;e8fe95d9f7bd9c69b9dfa512b9ea93d4&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;6de2410517108a16e1a76f76287a3b8e&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;e8fe95d9f7bd9c69b9dfa512b9ea93d4&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;6de2410517108a16e1a76f76287a3b8e&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&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;3331b8c47939776bc40ab2e29267e6f4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;e8fe95d9f7bd9c69b9dfa512b9ea93d4&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;7cd5076b8e79bee476ded6af7397732d&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;6de2410517108a16e1a76f76287a3b8e&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;179b73d9b83815aaef4356fa8ec77c1a&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;d0e4b6187516dea63b2a8d8c712df702&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;3331b8c47939776bc40ab2e29267e6f4&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;ws[_123456]@BalancePlatform.&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;strong&gt;[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\\\/custom-payouts\\\/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 languages 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;e8fe95d9f7bd9c69b9dfa512b9ea93d4&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;tabZtarO61282\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;61282&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;:1,&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;:1,&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;7cd5076b8e79bee476ded6af7397732d&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;accountHolder&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;platform&lt;\\\/strong&gt;&lt;\\\/span&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;6de2410517108a16e1a76f76287a3b8e&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;test&lt;\\\/strong&gt;&lt;\\\/span&gt;. Set the parameter to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;live&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;true&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;false&lt;\\\/strong&gt;&lt;\\\/span&gt;. Set this to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;true&lt;\\\/strong&gt;&lt;\\\/span&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;179b73d9b83815aaef4356fa8ec77c1a&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;tabDgUMn32116\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;32116&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;:1,&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;:1,&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;d0e4b6187516dea63b2a8d8c712df702&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;da-DK&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;da_DK&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;nl-NL&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;nl_NL&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;en-US&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;en_US&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;fr-FR&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;fr_FR&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;de-DE&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;de_DE&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;it-IT&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;it_IT&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;no-NO&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;no_NO&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;pt-BR&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;pt_BR&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;es_ES&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;sv-SE&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;sv_SE&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;33baefb85ac0c394f26ff8940384f46c&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;da-DK&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;da_DK&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;nl-NL&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;nl_NL&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;en-US&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;en_US&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;fi-FI&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;fi_FI&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;fr-FR&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;fr_FR&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;de-DE&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;de_DE&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;it-IT&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;it_IT&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;no-NO&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;no_NO&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;pt-BR&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;pt_BR&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;es_ES&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;sv-SE&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;sv_SE&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;6f17b265d277036a393038e4abb7470a&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;tabFzWtM10089\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;10089&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;:1,&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;:1,&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;8c36b4b46da2f54f1db6add909ed6a71&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;test&lt;\\\/strong&gt;&lt;\\\/span&gt;. Set the parameter to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;live&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;es-ES&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;true&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;false&lt;\\\/strong&gt;&lt;\\\/span&gt;. Set this to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;true&lt;\\\/strong&gt;&lt;\\\/span&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;7d928a6f72bec6be07073c92aac3a28f&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;createdAt&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;dateAndReportType&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;reportType&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;reportFile&#039;&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;left&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;center&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;right&lt;\\\/strong&gt;&lt;\\\/span&gt;. If not specified, it defaults to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;left&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;visible&lt;\\\/strong&gt;&lt;\\\/span&gt;,  &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;hidden&lt;\\\/strong&gt;&lt;\\\/span&gt;. If not specified, it defaults to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;visible&lt;\\\/strong&gt;&lt;\\\/span&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;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;text&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;icon&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;link&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;button&lt;\\\/strong&gt;&lt;\\\/span&gt;. If not specified, it defaults to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;text&lt;\\\/strong&gt;&lt;\\\/span&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n&lt;div id=\\&quot;tab2j1Sm83145\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;83145&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;:1,&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;:1,&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;:1,&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;:1,&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;e8a3f4073e329c08fd21ed4e9cc477b0&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;tabidaqv25828\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;25828&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;:1,&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;:1,&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;048d32e64937d3b88ac5a5acd5e4c3eb&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;div data-component-wrapper=\\&quot;tag\\&quot;&gt;\\n    &lt;tag :variant=&amp;quot;warning&amp;quot;&gt;\\n        Deprecated\\n    &lt;\\\/tag&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;strong&gt;Deprecated.&lt;\\\/strong&gt; This field is no longer needed because locales are now dynamically loaded on demand via CDN. Setting this field will trigger a deprecation warning. &lt;br&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 a &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported language&lt;\\\/a&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;ad41301fc4d46a0b343218d50381de27&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 } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({\\\\n    locale: &#039;es-ES&#039;, \\\\\\\/\\\\\\\/ See supported languages for possible values\\\\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;}}}}}}\"\n        query-param-tab=\"component\"\n        query-param-box=\"integration\"\n        query-param-dropdown=\"version\">\n    <\/in-page-filtering>\n<\/div>\n<div class=\"version_docs__image-placeholder u-display-none\">\n    <\/div>\n\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/platforms\/components-overview\"\n                        target=\"_self\"\n                        >\n                    Component libraries\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/platforms\/components-overview\/after-payment\/reports-component","articleFields":{"description":"Use Platform Experience components to build interactive dashboards for your users.","feedback_component":true,"filters_component":false,"cache_enable":false,"parameters":{"directoryPath":"\/platforms","model":"platform"}},"algolia":{"url":"https:\/\/docs.adyen.com\/platforms\/components-overview\/after-payment\/reports-component","title":"Report 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\nThe report component enables report management within a portal's user interface (UI) with minimal engineering effort. This component integrates the features required to filter and retrieve reports without making multiple API requests. This removes the need to implement complex API calls to filter and download available reports for a specific balance account to ensure access to the most current data.\nAdditionally, the components provide greater flexibility for data customization. These components can be customized with your own custom fields, icons, links, and buttons, allowing the UI to align with your specific business needs.\nThis page provides guidance on:\n\nThe Report Overview component.\nFunctionalities such as filtering by balance account and daily data generation.\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 version in the next section before starting your integration.\n\n    \n    \n\n\n    \n\nSee also\n\n\n                    Component libraries\n                \n","type":"page","locale":"en","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Platforms","lvl2":"Build your interface with UI component libraries","lvl3":"After payment","lvl4":"Report components"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/platforms","lvl2":"https:\/\/docs.adyen.com\/platforms\/components-overview","lvl3":"https:\/\/docs.adyen.com\/platforms\/components-overview\/after-payment","lvl4":"\/platforms\/components-overview\/after-payment\/reports-component"},"levels":5,"category":"Platforms","category_color":"green","tags":["Report","components"]}}