{"title":"Transaction 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>Transaction components enable you to offer comprehensive transaction management in your portal's user interface (UI) with minimal engineering effort. These components integrate all the features required to search, analyze, and manage transaction records without making multiple API requests. This means you do not need to implement complex API calls to filter balance accounts, calculate net amounts, or trigger refunds. The components handle all of this automatically.<\/p>\n<p>Additionally, the components provide greater flexibility for data customization. You can enrich the transaction view 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 available transaction components, which include the <strong>Transaction Overview<\/strong> component and the <strong>Transaction Details<\/strong> component.<\/li>\n<li>A standard user flow that these components cover.<\/li>\n<li>Functionalities such as data exporting, insights, and processing refunds.<\/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-transactions\"\n        :in-page-filtering=\"{&quot;guides&quot;:{&quot;transactions&quot;:{&quot;label&quot;:&quot;Transaction&quot;,&quot;integrations&quot;:{&quot;transaction-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for your users.&quot;,&quot;displayVersionDropdown&quot;:true,&quot;visual_content&quot;:null,&quot;visual_images&quot;:null,&quot;external_content&quot;:null,&quot;external_icon&quot;:null,&quot;versions&quot;:{&quot;version-1.14.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;6b655cbfa2393b65c1cada7dec0a1591&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;30d4adb4a1ded6618512b8630eac94cd&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;6cd39f51a56733ce79342c425ef4330a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8b7909489fef794791ce64148822ba65&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;c2cdb1ab0a6a97c6f88a2c250c3c587c&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;6b655cbfa2393b65c1cada7dec0a1591&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;30d4adb4a1ded6618512b8630eac94cd&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;6cd39f51a56733ce79342c425ef4330a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8b7909489fef794791ce64148822ba65&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;c2cdb1ab0a6a97c6f88a2c250c3c587c&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;6b655cbfa2393b65c1cada7dec0a1591&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;30d4adb4a1ded6618512b8630eac94cd&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;6cd39f51a56733ce79342c425ef4330a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8b7909489fef794791ce64148822ba65&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;c2cdb1ab0a6a97c6f88a2c250c3c587c&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;6b655cbfa2393b65c1cada7dec0a1591&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;8673fe1a2e854b2c03d1565e24fef6b5&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;6cd39f51a56733ce79342c425ef4330a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;c2cdb1ab0a6a97c6f88a2c250c3c587c&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;6b655cbfa2393b65c1cada7dec0a1591&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;8673fe1a2e854b2c03d1565e24fef6b5&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;6cd39f51a56733ce79342c425ef4330a&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;c2cdb1ab0a6a97c6f88a2c250c3c587c&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.10.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.9.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;50ef03a7f03e2c4852b6ab67bfc98286&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;289c3e5059e7b68adbba1aac9656b532&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;50ef03a7f03e2c4852b6ab67bfc98286&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f81e2db96725ff2e03ba7161e7c5aac0&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;289c3e5059e7b68adbba1aac9656b532&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;50ef03a7f03e2c4852b6ab67bfc98286&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;289c3e5059e7b68adbba1aac9656b532&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;50ef03a7f03e2c4852b6ab67bfc98286&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;289c3e5059e7b68adbba1aac9656b532&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;50ef03a7f03e2c4852b6ab67bfc98286&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;289c3e5059e7b68adbba1aac9656b532&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;50ef03a7f03e2c4852b6ab67bfc98286&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;8697b68767ba748b58d11fa3ecdfdadf&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;289c3e5059e7b68adbba1aac9656b532&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;0190462ec5dc30f455826c63b33d8ea1&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;562337018b026d6811dd69ce644857b8&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&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;31ee83a64426f0587468d22bbc2e980d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;0190462ec5dc30f455826c63b33d8ea1&quot;},&quot;refund_user_flow&quot;:{&quot;$ref&quot;:&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;562337018b026d6811dd69ce644857b8&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&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;dcb614a9f594ffd3aba3d86d45cdc611&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;690b8a3641c3c213aa1a3b0963e5118f&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;79b225f5b415c088a4c8c7f00d570fae&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;562337018b026d6811dd69ce644857b8&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;2a87ce0264e77ea99e4f552ef4034039&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;dcb614a9f594ffd3aba3d86d45cdc611&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/platforms\\\/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;Transactions Overview Component: View&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/platforms\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;690b8a3641c3c213aa1a3b0963e5118f&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab3YoKk94058\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94058&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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 &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt; , &lt;code&gt;chargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;chargebackReversalCorrection&lt;\\\/code&gt;, &lt;code&gt;secondChargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;reserveAdjustment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Fee&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;fee&lt;\\\/code&gt;, &lt;code&gt;miscCost&lt;\\\/code&gt;, &lt;code&gt;paymentCost&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;cardTransfer&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#amount\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Amount&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The filter enables users to filter transactions by specifying a custom amount range.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;For multi-currency accounts, users can select their preferred currency for transactions overview.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab4iatb94058\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;94058&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-1-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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&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;79b225f5b415c088a4c8c7f00d570fae&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request specifying the following parameters:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To make this API request, your API key must have the &lt;strong&gt;Transactions Overview Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL where the component will appear. &lt;\\\/br&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt; or &lt;code&gt;https:\\\/\\\/*.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your platform.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;accountHolderId&lt;\\\/code&gt;: The unique identifier of the account holder that is linked to the balance account shown in the component.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;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;Transactions Overview Component: View&lt;\\\/strong&gt;.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The type of product the component belongs to. Set this to &lt;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;Transactions Overview Component: View\\\\&amp;quot;\\\\n      ]\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;:&quot;&lt;h2 id=\\&quot;install-library\\&quot;&gt;2. Install component library in your front end&lt;\\\/h2&gt;\\n&lt;p&gt;Install the &lt;strong&gt;Adyen Platform Experience&lt;\\\/strong&gt; library in your front-end application as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the npm package.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;npm install @adyen\\\/adyen-platform-experience-web&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the library, the components, and the style sheet.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;import { AdyenPlatformExperience, component_name } from &#039;@adyen\\\/adyen-platform-experience-web&#039;;\\nimport \\&quot;@adyen\\\/adyen-platform-experience-web\\\/adyen-platform-experience-web.css\\&quot;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;562337018b026d6811dd69ce644857b8&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather the following information to be passed when initializing the library and its components.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather these parameters to initialize the library.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;availableTranslations&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An array containing the names of the imported locale files used for localizing the components.&lt;\\\/br&gt;For example, &lt;code&gt;[es_ES, nl_NL, fr_FR]&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specifies the environment for the component integration.&lt;\\\/br&gt;The default value is &lt;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 components. This code must correspond to one of the locale files listed in &lt;code&gt;availableTranslations&lt;\\\/code&gt;. &lt;\\\/br&gt;For example, use &lt;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 each component.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabU7mc290783\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;90783&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the transaction ID when the user selects a specific transaction from the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Transaction Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Transactions Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transaction.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabhOv9g90783\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;90783&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;transactions-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;transaction-details-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both transaction components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific transaction from the overview page, the transaction ID is automatically passed to the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabCXc4l90783\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;90783&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, TransactionsOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst transactionsOverview = new TransactionsOverview({ core });\\\\\\\\n\\\\\\\\ntransactionsOverview.mount(&amp;#039;#transactions-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, TransactionDetails } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst transactionDetails = new TransactionDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ntransactionDetails.mount(&amp;#039;#transaction-details-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const transactionsOverview = new TransactionsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected transaction id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const transactionDetails = new TransactionDetails({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_TRANSACTION_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;Update your code for initializing components to include the localization settings. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Localize components&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenPlatformExperience, es_ES, nl_NL, fr_FR, all_locales } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\n\\\\\\\/\\\\\\\/ ...\\\\n\\\\n\\\\\\\/\\\\\\\/ Only selected languages are available\\\\nconst core = await AdyenPlatformExperience({\\\\n    availableTranslations: [es_ES, nl_NL, fr_FR],\\\\n    locale: &#039;es-ES&#039;, \\\\\\\/\\\\\\\/ You can also set this to nl-NL, fr-FR, or en-US (default)\\\\n    \\\\\\\/\\\\\\\/ ....\\\\n})\\\\n\\\\n\\\\\\\/\\\\\\\/ All supported languages are available\\\\nconst core = await AdyenPlatformExperience({\\\\n    availableTranslations: [all_locales],\\\\n    locale: &#039;es_ES&#039; \\\\\\\/\\\\\\\/ You can also set this to any of the supported languages\\\\n    \\\\\\\/\\\\\\\/ ....\\\\n})&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;&quot;,&quot;2a87ce0264e77ea99e4f552ef4034039&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The transaction components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables and the class settings:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Inspect the components using your browser&#039;s developer tools.&lt;\\\/li&gt;\\n&lt;li&gt;Modify the styles in your style sheet file.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs show examples of how to style the components. The first example shows how to override predefined CSS variables to use different colors and values. The second example demonstrates how to update the CSS class setting to change the layout of the modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabdmrFV98836\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;98836&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Example 1: Override CSS variables&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n    &amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;style.css&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;example-3&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;bash\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;:root {\\\\\\\\n    --adyen-sdk-border-radius-s: 10px;\\\\\\\\n    --adyen-sdk-border-radius-m: 20px;\\\\\\\\n    --adyen-sdk-border-radius-l: 30px;\\\\\\\\n    --adyen-sdk-color-background-disabled: #9ecdb1;\\\\\\\\n    --adyen-sdk-color-background-inverse-primary: #0abf53;\\\\\\\\n    --adyen-sdk-color-background-inverse-primary-hover: #57d389;\\\\\\\\n    --adyen-sdk-color-decorative-blue: #0abf53;\\\\\\\\n    --adyen-sdk-color-outline-primary-active: #0abf53;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;: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-4&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;bash\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;.adyen-pe-modal {\\\\\\\\n    border-left: 3px solid #0abf53;\\\\\\\\n    border-radius: 0;\\\\\\\\n    height: 100%;\\\\\\\\n    max-height: unset;\\\\\\\\n    right: 0;\\\\\\\\n}\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:null,&amp;quot;oldTabId&amp;quot;: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;31ee83a64426f0587468d22bbc2e980d&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/platforms\\\/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;Transactions Overview Component: View&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; (required to process refunds through the components)&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/platforms\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;0190462ec5dc30f455826c63b33d8ea1&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabaXAPy24681\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;24681&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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 &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt; , &lt;code&gt;chargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;chargebackReversalCorrection&lt;\\\/code&gt;, &lt;code&gt;secondChargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;reserveAdjustment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Fee&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;fee&lt;\\\/code&gt;, &lt;code&gt;miscCost&lt;\\\/code&gt;, &lt;code&gt;paymentCost&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;cardTransfer&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#amount\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Amount&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The filter enables users to filter transactions by specifying a custom amount range.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;For multi-currency accounts, users can select their preferred currency for transactions overview.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab9tljX24681\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;24681&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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&quot;,&quot;78fd5378d9ab4a27481eb0fb1b132f91&quot;:&quot;&lt;h2 id=\\&quot;refunds\\&quot;&gt;Processing refunds through components&lt;\\\/h2&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;The refund feature requires the &lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; role to be assigned to your API credential and included in the session request.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Users can refund payments to their shoppers through the transaction components. When a user initiates a refund, the components automatically call Adyen&#039;s API to process the refund request. This means that no additional actions are needed on your part as a platform.&lt;\\\/p&gt;\\n&lt;p&gt;The transaction components support both full and partial refunds depending on the &lt;a href=\\&quot;\\\/payment-methods\\&quot;&gt;payment method&lt;\\\/a&gt;. For partial refunds, users can issue multiple smaller refunds through the components, as long as the total amount of these refunds does not exceed the original payment amount.&lt;\\\/p&gt;\\n&lt;p&gt;The user flow for processing a refund through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;In the payment details, the user selects the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; modal window, the user specifies a reason for the refund and the refund amount.&lt;\\\/li&gt;\\n&lt;li&gt;The user confirms their refund request.&lt;\\\/li&gt;\\n&lt;li&gt;After the refund request is processed, users can view the refund status message and label in the payment details.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs illustrate the user flow when processing a partial refund for a specific payment transaction:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabIylNt97022\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;97022&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund sent&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-sent&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund status&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-2-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-status&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;After the refund has been issued and processed, users can view the refund transaction in their overview. Each refund transaction is linked to the corresponding payment transaction, making it easy for users to find relevant references and navigate between transaction records.&lt;\\\/p&gt;&quot;,&quot;bd0e6cc78833f008b6aca9ae4cd3866c&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request specifying the following parameters:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To make this API request, your API key must have the &lt;strong&gt;Transactions Overview Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL where the component will appear. &lt;\\\/br&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt; or &lt;code&gt;https:\\\/\\\/*.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your platform.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;accountHolderId&lt;\\\/code&gt;: The unique identifier of the account holder that is linked to the balance account shown in the component.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;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;Transactions Overview Component: View&lt;\\\/strong&gt;.&lt;\\\/br&gt;To enable users to process refunds through the components, include the &lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; role in your request.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The type of product the component belongs to. Set this to &lt;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;Transactions Overview Component: View\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Transactions Overview Component: Manage Refunds\\\\&amp;quot;\\\\n      ]\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;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;50ef03a7f03e2c4852b6ab67bfc98286&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, and amount. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabHaQqu29761\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;29761&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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 &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter transactions by their type, amount, currency (for multi-currency accounts), and time period. See the &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds of the balance account. The total values are updated automatically whenever the user modifies the filters. For example, users may choose to filter out the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt; , &lt;code&gt;chargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;chargebackReversalCorrection&lt;\\\/code&gt;, &lt;code&gt;secondChargebackCorrection&lt;\\\/code&gt;, &lt;code&gt;reserveAdjustment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Fee&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;fee&lt;\\\/code&gt;, &lt;code&gt;miscCost&lt;\\\/code&gt;, &lt;code&gt;paymentCost&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;cardTransfer&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#amount\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Amount&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The filter enables users to filter transactions by specifying a custom amount range.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;For multi-currency accounts, users can select their preferred currency for transactions overview.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;##initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabHCV8M29761\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;29761&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-mobile.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-4-0\\\\\\\/component-description\\\\\\\/transaction-details-desktop.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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&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;8697b68767ba748b58d11fa3ecdfdadf&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather the following information to be passed when initializing the library and its components.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather these parameters to initialize the library.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;availableTranslations&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An array containing the names of the imported locale files used for localizing the components.&lt;\\\/br&gt;For example, &lt;code&gt;[es_ES, nl_NL, fr_FR]&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specifies the environment for the component integration.&lt;\\\/br&gt;The default value is &lt;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 components. This code must correspond to one of the locale files listed in &lt;code&gt;availableTranslations&lt;\\\/code&gt;. &lt;\\\/br&gt;For example, use &lt;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 each component.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabRJoyC5153\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;5153&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains both the &amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; objects, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the transaction ID when the user selects a specific transaction from the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Transaction Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Transactions Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transaction.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabm05kM5153\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;5153&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;transactions-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;transaction-details-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both transaction components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific transaction from the overview page, the transaction ID is automatically passed to the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabI9pug5153\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;5153&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, TransactionsOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst transactionsOverview = new TransactionsOverview({ core });\\\\\\\\n\\\\\\\\ntransactionsOverview.mount(&amp;#039;#transactions-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, TransactionDetails } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst transactionDetails = new TransactionDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ntransactionDetails.mount(&amp;#039;#transaction-details-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const transactionsOverview = new TransactionsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected transaction id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const transactionDetails = new TransactionDetails({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_TRANSACTION_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;289c3e5059e7b68adbba1aac9656b532&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The transaction components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabZ9qVg65293\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65293&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { }, details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Within the &lt;code&gt;list&lt;\\\/code&gt; and\\\/or &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tablKF1x65293\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65293&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fields&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Defines the settings of dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;transactionType&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;amount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [] }, details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with an array of the transaction records extended with custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } }, details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fields&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Defines the settings of dashboard fields in the transaction detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;status&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;category&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;bankAccount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;balanceAccount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;id&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;balanceAccountId&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;deductedAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;lineItems&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;originalAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;paymentPspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;refundDetails&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;refundMetadata&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;transactionType&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;amount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with the extended transaction record that contains custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;align&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the content in a field is aligned. Possible values: &lt;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(transaction =&amp;gt; transaction.id);\\\\n\\\\n      const extendedData = await getMyDataByIds(ids);\\\\n\\\\n      return extendedData;\\\\n  },\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`additionalData` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            return {\\\\n                ...data,\\\\n                _store: &#039;Amsterdam&#039;,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the custom data value should look and behave. Possible values: &lt;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;tabMXevn65293\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65293&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\\n&lt;div id=\\&quot;tabJ6aKM65293\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65293&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        list: {\\\\\\\\n            fields: [{ key: &amp;#039;_store&amp;#039; },  { key: &amp;#039;createdAt&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },],\\\\\\\\n            onDataRetrieve: async (transactions) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionsData(transactions);\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;transactionType&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;amount&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n            onDataRetrieve: async (transaction) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionData(transaction);\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;id&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n                { key: &amp;#039;_product&amp;#039; },\\\\\\\\n                { key: &amp;#039;_summary&amp;#039; },\\\\\\\\n                { key: &amp;#039;_country&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: transaction =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionDataById(transaction);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _store: &#039;Store&#039;,\\\\n        },\\\\n        es_ES: {\\\\n            _store: &#039;Tienda&#039;,\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;f81e2db96725ff2e03ba7161e7c5aac0&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;tab1EMOx89796\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;89796&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;6b655cbfa2393b65c1cada7dec0a1591&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;\\\/platforms\\\/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;Transactions Overview Component: View&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; (required to process refunds through the components)&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Document export limits:&lt;\\\/strong&gt; &lt;ul&gt;&lt;li&gt;Export functionality is currently limited to the CSV file format only.&lt;\\\/li&gt;&lt;li&gt; The maximum number of rows per transaction export is 100.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/platforms\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;8673fe1a2e854b2c03d1565e24fef6b5&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, net amount, and gross amount. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons. For example, you can rename a column to match your branding or rearrange columns to change the display order.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes transactions into two tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;strong&gt;Transactions&lt;\\\/strong&gt;: shows account balances, which display the account balance (available funds) and the reserved balance (funds currently held in reserve). Key features include:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Transaction list&lt;\\\/strong&gt;: a detailed list of transactions, which can be &lt;a href=\\&quot;#available-filters\\&quot;&gt;filtered&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Transaction details&lt;\\\/strong&gt;: users can select a record to open the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides granular information about that specific transaction.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;CSV export&lt;\\\/strong&gt;: an export button allows users to generate a CSV file containing the first 100 transactions that match the applied filters. Users retain control over the specific transaction fields included in the exported file.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;strong&gt;Insights&lt;\\\/strong&gt;: shows an analytical summary of transaction data for a specific balance account and time period. This data helps with bookkeeping, reconciliation, and financial analysis. This includes:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Period Result&lt;\\\/strong&gt;: the net total for the specified period and currency, representing the difference between the total incoming and total outgoing funds.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Total Incoming&lt;\\\/strong&gt;: the total amount of funds credited to the balance for all transactions processed during the specified period, grouped by transaction types, such as payments and transfers.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Total Outgoing&lt;\\\/strong&gt;: the total amount of funds debited from the balance for all transactions processed during the specified period, grouped by transaction types, such as chargebacks and refunds.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following illustrate each tab of the Transactions Overview component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabdtWFm81659\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;81659&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-transactions&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Insights&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-insights-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-insights-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-insights&amp;quot;,&amp;quot;oldTabId&amp;quot;: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 &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;View and export filtered transaction data as a CSV file for reconciliation and external analysis. Users can &lt;a href=\\&quot;#available-filters\\&quot;&gt;filter&lt;\\\/a&gt; for transaction type, currency (for multi-currency accounts), PSP reference, and the time period specific to the balance account.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account, which shows the account balance and the reserved balance.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds for a balance account. The total values update automatically when the user modifies the &lt;a href=\\&quot;#available-filters\\&quot;&gt;filters&lt;\\\/a&gt;. For example, users can filter to see the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections show the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 180 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 179 days from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;. This is only available in the &lt;strong&gt;Transactions&lt;\\\/strong&gt; tab.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;bankDirectDebit&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;For multi-currency accounts, users can select their preferred currency for transactions overview. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#psp-reference\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;PSP reference&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;PSP reference&lt;\\\/strong&gt; filter enables users to find a transaction by specifying the exact PSP reference (equivalent to the internal Payment PSP reference), provided the transaction also matches the criteria of any other filters applied. This is only available in the &lt;strong&gt;Transactions&lt;\\\/strong&gt; tab.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes the details of the transaction into three tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Summary&lt;\\\/strong&gt;: when available, shows the breakdown of the transaction, including net and gross amounts, applicable fees, and deductions. This view explicitly details the original amount processed and the net amount received by the user.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Details&lt;\\\/strong&gt;: shows information about the transaction useful for tracking purposes, such as transaction references, including the unique reference ID. For payment transactions, this tab includes associated refund information. All custom integration data configured for the component is also displayed here.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Timeline&lt;\\\/strong&gt;: when available, shows the complete payment processing history and status changes for the transaction.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabBTuav81659\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;81659&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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&quot;,&quot;6cd39f51a56733ce79342c425ef4330a&quot;:&quot;&lt;h2 id=\\&quot;refunds\\&quot;&gt;Processing refunds through components&lt;\\\/h2&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;The refund feature requires the &lt;strong&gt;Transactions Overview Component: Manage Refunds&lt;\\\/strong&gt; role to be assigned to your API credential and included in the session request.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Users can refund payments to their shoppers through the transaction components. When a user initiates a refund, the components automatically call Adyen&#039;s API to process the refund request. This means that no additional actions are needed on your part as a platform.&lt;\\\/p&gt;\\n&lt;p&gt;The transaction components support both full and partial refunds depending on the &lt;a href=\\&quot;\\\/payment-methods\\&quot;&gt;payment method&lt;\\\/a&gt;. For partial refunds, users can issue multiple smaller refunds through the components, as long as the total amount of these refunds does not exceed the original payment amount.&lt;\\\/p&gt;\\n&lt;p&gt;The user flow for processing a refund through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;In the payment details, the user selects the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Refund payment&lt;\\\/strong&gt; modal window, the user specifies a reason for the refund and the refund amount.&lt;\\\/li&gt;\\n&lt;li&gt;The user confirms their refund request.&lt;\\\/li&gt;\\n&lt;li&gt;After the refund request is processed, users can view the refund status message and label in the payment details.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs illustrate the user flow when processing a partial refund for a specific payment transaction:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabizGlW32783\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;32783&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/payment-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-details.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund sent&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-sent.svg\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-sent&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Refund status&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/refund-user-flow\\\\\\\/refund-status.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;refund-status&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;After the refund has been issued and processed, users can view the refund transaction in their overview. Each refund transaction is linked to the corresponding payment transaction, making it easy for users to find relevant references and navigate between transaction records.&lt;\\\/p&gt;&quot;,&quot;c2cdb1ab0a6a97c6f88a2c250c3c587c&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The transaction components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabuRvXQ36157\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;36157&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { }, details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the transaction details view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Within the &lt;code&gt;list&lt;\\\/code&gt; and\\\/or &lt;code&gt;details&lt;\\\/code&gt; objects, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab2sUiM36157\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;36157&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fields&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Defines the settings of dashboard fields in the transactions overview.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;createdAt&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;paymentMethod&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;transactionType&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;currency&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;amount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;grossAmount&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [] }, details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with an array of the transaction records extended with custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { list: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } }, details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fields&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Defines the settings of dashboard fields in the transaction detail view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Default fields: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;account&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;refundReason&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;id&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;merchantReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;pspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;paymentPspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;, &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;&amp;#039;refundPspReference&amp;#039;&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [] } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDataRetrieve&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function that retrieves a &amp;lt;code&amp;gt;Promise&amp;lt;\\\\\\\/code&amp;gt; object resolved with the extended transaction record that contains custom data.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { fields: [], onDataRetrieve: () =&amp;amp;gt; { } } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;align&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the content in a field is aligned. Possible values: &lt;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(transaction =&amp;gt; transaction.id);\\\\n\\\\n      const extendedData = await getMyDataByIds(ids);\\\\n\\\\n      return extendedData;\\\\n  },\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`additionalData` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            return {\\\\n                ...data,\\\\n                _store: &#039;Amsterdam&#039;,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the custom data value should look and behave. Possible values: &lt;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;tabNQcYb36157\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;36157&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\\n&lt;div id=\\&quot;tabkh3IJ36157\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;36157&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        list: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n                { key: &amp;#039;createdAt&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: async (transactions) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionsData(transactions);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n        details: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;transactionType&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;amount&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: async (transaction) =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionData(transaction);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [\\\\\\\\n                { key: &amp;#039;id&amp;#039;, visibility: &amp;#039;hidden&amp;#039; },\\\\\\\\n                { key: &amp;#039;_store&amp;#039; },\\\\\\\\n                { key: &amp;#039;_product&amp;#039; },\\\\\\\\n                { key: &amp;#039;_summary&amp;#039; },\\\\\\\\n                { key: &amp;#039;_country&amp;#039; },\\\\\\\\n            ],\\\\\\\\n            onDataRetrieve: transaction =&amp;amp;gt; {\\\\\\\\n                return getCustomTransactionDataById(transaction);\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _store: &#039;Store&#039;,\\\\n        },\\\\n        es_ES: {\\\\n            _store: &#039;Tienda&#039;,\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;30d4adb4a1ded6618512b8630eac94cd&quot;:&quot;&lt;h2&gt;Transactions Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component shows a list of transactions processed for a specific balance account within a specified time period. Each transaction record includes details such as the date and time, payment method, transaction type, net amount, and gross amount. Additionally, the component allows for custom data integration, such as your own fields, icons, links, and buttons. For example, you can rename a column to match your branding or rearrange columns to change the display order.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes transactions into two tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;strong&gt;Transactions&lt;\\\/strong&gt;: shows account balances, which display the account balance (available funds) and the reserved balance (funds currently held in reserve). Key features include:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Transaction list&lt;\\\/strong&gt;: a detailed list of transactions, which can be &lt;a href=\\&quot;#available-filters\\&quot;&gt;filtered&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Transaction details&lt;\\\/strong&gt;: users can select a record to open the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides granular information about that specific transaction.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;CSV export&lt;\\\/strong&gt;: an export button allows users to generate a CSV file containing the first 100 transactions that match the applied filters. Users retain control over the specific transaction fields included in the exported file.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;strong&gt;Insights&lt;\\\/strong&gt;: shows an analytical summary of transaction data for a specific balance account and time period. This data helps with bookkeeping, reconciliation, and financial analysis. This includes:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Period Result&lt;\\\/strong&gt;: the net total for the specified period and currency, representing the difference between the total incoming and total outgoing funds.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Total Incoming&lt;\\\/strong&gt;: the total amount of funds credited to the balance for all transactions processed during the specified period, grouped by transaction types, such as payments and transfers.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Total Outgoing&lt;\\\/strong&gt;: the total amount of funds debited from the balance for all transactions processed during the specified period, grouped by transaction types, such as chargebacks and refunds.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following illustrate each tab of the Transactions Overview component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabfpm3t11478\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;11478&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-overview-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-transactions&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Insights&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-insights-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-insights-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview-insights&amp;quot;,&amp;quot;oldTabId&amp;quot;: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 &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component enables users to complete the following tasks:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of transactions for a balance account.&lt;\\\/li&gt;\\n&lt;li&gt;View and export filtered transaction data as a CSV file for reconciliation and external analysis. Users can &lt;a href=\\&quot;#available-filters\\&quot;&gt;filter&lt;\\\/a&gt; for transaction type, currency (for multi-currency accounts), PSP reference, and the time period specific to the balance account.&lt;\\\/li&gt;\\n&lt;li&gt;View the available balance of the balance account, which shows the account balance and the reserved balance.&lt;\\\/li&gt;\\n&lt;li&gt;View the total incoming and outgoing funds for a balance account. The total values update automatically when the user modifies the &lt;a href=\\&quot;#available-filters\\&quot;&gt;filters&lt;\\\/a&gt;. For example, users can filter to see the total booked incoming and outgoing funds that were processed during the past month.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#transaction-details-component\\&quot;&gt;\\n  &lt;strong&gt;Transaction Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific transaction.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections show the available filters and their values for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying transaction results. The specified time is determined by the time zone of the selected balance account. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, transactions from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 180 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes transactions from the previous 179 days from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes transactions from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter specifies which transaction types to show in the overview. The table below lists the available transaction types in the component along with their corresponding values returned in the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/transfers\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Transfers API&lt;\\\/a&gt;. This is only available in the &lt;strong&gt;Transactions&lt;\\\/strong&gt; tab.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Value in the Transfers API&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;ATM&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;atmWithdrawal&lt;\\\/code&gt;, &lt;code&gt;atmWithdrawalReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Correction&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;manualCorrection&lt;\\\/code&gt;, &lt;code&gt;depositCorrection&lt;\\\/code&gt;, &lt;code&gt;leftover&lt;\\\/code&gt;, &lt;code&gt;balanceAdjustment&lt;\\\/code&gt;, &lt;code&gt;balanceRollover&lt;\\\/code&gt;, &lt;code&gt;installmentReversal&lt;\\\/code&gt;, &lt;code&gt;captureReversal&lt;\\\/code&gt;, &lt;code&gt;refundReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Payment&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;payment&lt;\\\/code&gt;, &lt;code&gt;capture&lt;\\\/code&gt;, &lt;code&gt;installment&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Refund&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;refund&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Chargeback&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;chargeback&lt;\\\/code&gt;, &lt;code&gt;secondChargeback&lt;\\\/code&gt;, &lt;code&gt;chargebackReversal&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Transfer&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;code&gt;bankTransfer&lt;\\\/code&gt;, &lt;code&gt;internalTransfer&lt;\\\/code&gt;, &lt;code&gt;bankDirectDebit&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Other&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes all other transaction types.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#currency\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Currency&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;For multi-currency accounts, users can select their preferred currency for transactions overview. This is available in both the &lt;strong&gt;Transactions&lt;\\\/strong&gt; and &lt;strong&gt;Insights&lt;\\\/strong&gt; tabs.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#psp-reference\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;PSP reference&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;PSP reference&lt;\\\/strong&gt; filter enables users to find a transaction by specifying the exact PSP reference (equivalent to the internal Payment PSP reference), provided the transaction also matches the criteria of any other filters applied. This is only available in the &lt;strong&gt;Transactions&lt;\\\/strong&gt; tab.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Transaction Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component provides detailed information about a transaction, including its unique reference ID, the original amount, and any associated fees. For payment transactions, this component indicates whether a specific payment has been refunded. Additionally, it enables users to &lt;a href=\\&quot;#refunds\\&quot;&gt;refund payments&lt;\\\/a&gt; to their shoppers. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes the details of the transaction into three tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Summary&lt;\\\/strong&gt;: when available, shows the breakdown of the transaction, including net and gross amounts, applicable fees, and deductions. This view explicitly details the original amount processed and the net amount received by the user.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Details&lt;\\\/strong&gt;: shows information about the transaction useful for tracking purposes, such as transaction references, including the unique reference ID. For payment transactions, this tab includes associated refund information. All custom integration data configured for the component is also displayed here.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Timeline&lt;\\\/strong&gt;: when available, shows the complete payment processing history and status changes for the transaction.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabibkQ411478\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;11478&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/transactions\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/transactions-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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&quot;,&quot;8b7909489fef794791ce64148822ba65&quot;:&quot;&lt;h2 id=\\&quot;initialize-components\\&quot;&gt;3. Initialize components&lt;\\\/h2&gt;\\n&lt;p&gt;To initialize the components:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather the following information to be passed when initializing the library and its components.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Gather these parameters to initialize the library.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;availableTranslations&lt;\\\/code&gt; &lt;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 components.&lt;\\\/br&gt;For example, &lt;code&gt;[es_ES, nl_NL, fr_FR]&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specifies the environment for the component integration.&lt;\\\/br&gt;The default value is &lt;strong&gt;test&lt;\\\/strong&gt;. Set the parameter to &lt;strong&gt;live&lt;\\\/strong&gt; when you are ready to go live.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;locale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specifies the locale code, which determines the desired language of the components. This code must correspond to 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 each component.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabiSQ395348\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;5348&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains both the &amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; objects, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the transaction ID when the user selects a specific transaction from the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Transaction Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Transactions Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of transactions shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the transaction.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabOJLwy5348\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;5348&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;transactions-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;transaction-details-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both transaction components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific transaction from the overview page, the transaction ID is automatically passed to the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab8xN655348\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;5348&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Transactions Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, TransactionsOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst transactionsOverview = new TransactionsOverview({ core });\\\\\\\\n\\\\\\\\ntransactionsOverview.mount(&amp;#039;#transactions-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transactions-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transactions-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Transaction Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, TransactionDetails } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst transactionDetails = new TransactionDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ntransactionDetails.mount(&amp;#039;#transaction-details-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;transaction-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;transaction-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Transactions Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const transactionsOverview = new TransactionsOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected transaction id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Transaction Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const transactionDetails = new TransactionDetails({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_TRANSACTION_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;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=\"\/marketplaces\/components-overview\"\n                        target=\"_self\"\n                        >\n                    Component libraries\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/marketplaces\/components-overview\/after-payment\/transactions-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":"\/marketplaces","model":"marketplace"}},"algolia":{"url":"https:\/\/docs.adyen.com\/marketplaces\/components-overview\/after-payment\/transactions-component","title":"Transaction 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\nTransaction components enable you to offer comprehensive transaction management in your portal's user interface (UI) with minimal engineering effort. These components integrate all the features required to search, analyze, and manage transaction records without making multiple API requests. This means you do not need to implement complex API calls to filter balance accounts, calculate net amounts, or trigger refunds. The components handle all of this automatically.\nAdditionally, the components provide greater flexibility for data customization. You can enrich the transaction view 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 available transaction components, which include the Transaction Overview component and the Transaction Details component.\nA standard user flow that these components cover.\nFunctionalities such as data exporting, insights, and processing refunds.\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":"Marketplaces","lvl2":"Build your interface with UI component libraries","lvl3":"After payment","lvl4":"Transaction components"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/marketplaces","lvl2":"https:\/\/docs.adyen.com\/marketplaces\/components-overview","lvl3":"https:\/\/docs.adyen.com\/marketplaces\/components-overview\/after-payment","lvl4":"\/marketplaces\/components-overview\/after-payment\/transactions-component"},"levels":5,"category":"Marketplaces","category_color":"green","tags":["Transaction","components"]}}
