{"title":"Dispute components","category":"default","creationDate":1789473963,"content":"<div class=\"additional-info-block output-inline\">\n<h5 class=\"article__heading additional-info-block__title\">Learn more<\/h5><div class=\"additional-info-block__body\"><p><img style=\"width: 25px;\" alt=\"GitHub logo\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/github-logo.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/github.com\/Adyen\/adyen-platform-experience-web\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">View our repository on GitHub<\/a><\/p><p><img style=\"width: 25px;\" alt=\"Click icon\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/click.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/demotool.adyen.com\/se\/pie\/platform-tx\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Try it out with a live demo<\/a><\/p><p><img style=\"width: 22px;\" alt=\"Megaphone icon\" src=\"\/user\/pages\/reuse\/pfs-components\/platform-experience\/megaphone.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"\/release-notes\/platforms-and-financial-products\">Explore the latest updates<\/a><\/p><\/div><\/div>\n\n<p>The dispute components enable you to offer dispute management in your portal's user interface (UI) with minimal engineering effort. These components integrate all the features required to monitor and resolve chargebacks without making multiple API requests. This means you do not need to implement complex API calls to retrieve dispute reason codes, track respond-by dates, or manage the document upload process for defense. The components handle all of this automatically.<\/p>\n<p>Additionally, the components provide greater flexibility for data customization. You can enrich the dispute 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 dispute components, which include the <strong>Dispute Overview<\/strong> component and the <strong>Dispute Management<\/strong> component.<\/li>\n<li>A standard user flow that these components cover.<\/li>\n<li>Functionalities and information required to understand dispute components, such as filtering by balance account, defending or accepting disputes, uploading supporting documentation, and reason codes.<\/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-disputes\"\n        :in-page-filtering=\"{&quot;guides&quot;:{&quot;disputes&quot;:{&quot;label&quot;:&quot;Dispute&quot;,&quot;integrations&quot;:{&quot;dispute-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for your users.&quot;,&quot;displayVersionDropdown&quot;:true,&quot;visual_content&quot;:null,&quot;visual_images&quot;:null,&quot;external_content&quot;:null,&quot;external_icon&quot;:null,&quot;versions&quot;:{&quot;version-1.14.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;f634bda2aea64d4c82e737e31ffdf6b4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;42fa9957b746d47a4419d7c439eb057d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;3ce4b0729a2bf9b5dea85bf378543b33&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;dc50f3edc76c482ac5f88894419ba48f&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;f634bda2aea64d4c82e737e31ffdf6b4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;42fa9957b746d47a4419d7c439eb057d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;3ce4b0729a2bf9b5dea85bf378543b33&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;dc50f3edc76c482ac5f88894419ba48f&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;f634bda2aea64d4c82e737e31ffdf6b4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;42fa9957b746d47a4419d7c439eb057d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;3ce4b0729a2bf9b5dea85bf378543b33&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;dc50f3edc76c482ac5f88894419ba48f&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;f634bda2aea64d4c82e737e31ffdf6b4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;42fa9957b746d47a4419d7c439eb057d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;dbbcca3f9c6cb47b8d43f3b9328c515a&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;dc50f3edc76c482ac5f88894419ba48f&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.11.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.10.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;f634bda2aea64d4c82e737e31ffdf6b4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;42fa9957b746d47a4419d7c439eb057d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;f6ac534f3fa29be83a4a75055a6c0ce9&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;037a0d83765e970bf1fda8826a5b68ec&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.10.x&quot;}},&quot;version-1.9.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;f634bda2aea64d4c82e737e31ffdf6b4&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;42fa9957b746d47a4419d7c439eb057d&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;f6ac534f3fa29be83a4a75055a6c0ce9&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;037a0d83765e970bf1fda8826a5b68ec&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.9.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}},&quot;version-1.8.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;631774de9f06b504d76dd71dadd8f07d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;e959980f7fec066ae776d20b70a2b088&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;dcd53c0dcea02c7e49a17b56af2a5683&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;f6ac534f3fa29be83a4a75055a6c0ce9&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;037a0d83765e970bf1fda8826a5b68ec&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;631774de9f06b504d76dd71dadd8f07d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;e959980f7fec066ae776d20b70a2b088&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;f6ac534f3fa29be83a4a75055a6c0ce9&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;037a0d83765e970bf1fda8826a5b68ec&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;631774de9f06b504d76dd71dadd8f07d&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;},&quot;defend_disputes&quot;:{&quot;$ref&quot;:&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;},&quot;dispute_statuses&quot;:{&quot;$ref&quot;:&quot;e959980f7fec066ae776d20b70a2b088&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;f6ac534f3fa29be83a4a75055a6c0ce9&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;},&quot;customize_data&quot;:{&quot;$ref&quot;:&quot;037a0d83765e970bf1fda8826a5b68ec&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.6.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}}},&quot;sections&quot;:[],&quot;components&quot;:{&quot;631774de9f06b504d76dd71dadd8f07d&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements, limitations, and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&quot;&gt;Balance Platform API key&lt;\\\/a&gt; (for example, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;ws[_123456]@BalancePlatform.&lt;\\\/strong&gt;&lt;\\\/span&gt;&lt;strong&gt;[YourBalancePlatform]&lt;\\\/strong&gt;) to access the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/overview\\&quot; class=\\&quot; external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;Session authentication API&lt;\\\/a&gt;.&lt;br\\\/&gt;&lt;br\\\/&gt;Ensure that you have asked your Adyen contact to assign the following role to your API credential: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Disputes Component: Manage&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Supported reason codes and payment methods&lt;\\\/strong&gt; &lt;br&gt;The disputes component lets you view and, where applicable, accept disputes from various card schemes. The component shows chargebacks, Requests For Information (RFIs) and Notifications of Fraud (NOFs). The Defend option is only available for Mastercard and Visa chargebacks with the following reason codes: &lt;br&gt;&lt;br&gt;&lt;strong&gt;Mastercard&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;4853&lt;\\\/strong&gt;: Cardholder dispute - Defective \\\/ Not as described.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;4837&lt;\\\/strong&gt;: No cardholder authorization.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;br&gt;&lt;strong&gt;Visa&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;10.4&lt;\\\/strong&gt;: Other Fraud-Card Absent Environment.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;13.1&lt;\\\/strong&gt;: Merchandise - Services not received.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;13.2&lt;\\\/strong&gt;: Cancelled recurring.&lt;\\\/li&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt; See also &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-reason-codes\\\/?tab=chargeback_0_1#defense_requirements\\&quot;&gt;Dispute reason codes and defense requirements&lt;\\\/a&gt;&lt;br&gt;&lt;br&gt;&lt;strong&gt;Unsupported dispute scenarios&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;For dispute reasons or payment methods not covered by the supported list, users must contact the platform directly.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/ul&gt; &lt;strong&gt;Document upload limits&lt;\\\/strong&gt; &lt;ul&gt;&lt;li&gt;Documents must be no larger than 2 MB and in &lt;code&gt;.pdf&lt;\\\/code&gt;, &lt;code&gt;.jpg&lt;\\\/code&gt;, .&lt;code&gt;jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;li&gt; Images files must be no larger than 10 MB and in &lt;code&gt;.jpg&lt;\\\/code&gt;, &lt;code&gt;.jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;strong&gt;Refunds not supported&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;Currently this component does not support refunds.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;6eaf2049d8bccdd15327aa5332c38bd6&quot;:&quot;&lt;h2&gt;Disputes Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component shows a list of disputes, including chargebacks, Requests for Information (RFIs), and  fraud alerts for a specific balance account within a specified time period. Users can quickly view the status of open or closed disputes, helping them monitor and take action when needed.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes disputes into three tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Chargebacks&lt;\\\/strong&gt;: shows undefended or unresponded chargebacks and RFIs that require user action. Each dispute record includes details such as the respond by date, payment method, dispute reason, and disputed amount. Users can select a record to open the &lt;a href=\\&quot;#dispute-management-component\\&quot;&gt;\\n  &lt;strong&gt;Dispute Management&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, where they can accept or defend the dispute.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Fraud alerts&lt;\\\/strong&gt;: shows fraud alerts to help users identify suspicious activity. Each record includes the payment method, fraud reason, total payment amount, and date of the alert. Fraud alerts correspond to the term \\&quot;Notification of Fraud\\&quot; in the Customer Area and &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-process-and-flow\\&quot;&gt;dispute documentation&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Ongoing &amp;amp; closed&lt;\\\/strong&gt;: shows ongoing chargebacks, RFIs, and resolved disputes to help users track and match disputes against payment activity. Each dispute record includes details such as the payment method, dispute reason, and disputed amount. This tab also shows the status of a dispute, see dispute &lt;a href=\\&quot;#statuses-of-a-dispute\\&quot;&gt;statuses&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Note that the marketplace configuration dictates split chargeback handling. The &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component does not alter existing split logic. See &lt;a href=\\&quot;\\\/marketplaces\\\/split-transactions\\\/split-chargebacks\\&quot;&gt;Split chargebacks&lt;\\\/a&gt; for more details.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;The following illustrate each tab of the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabLE7V281432\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;81432&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Chargebacks&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-chargebacks-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-chargebacks-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-chargebacks&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Fraud alerts&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-fraud-alerts-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-fraud-alerts-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-fraud-alerts&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Ongoing &amp;amp; closed&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-ongoing-closed-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/disputes-ongoing-closed-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-ongoing-closed&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;Disputes Overview&lt;\\\/strong&gt; component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View a list of chargebacks, fraud alerts, and ongoing and closed disputes for all or a specific balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Filter disputes by balance account, date opened, payment method, and dispute reason. See &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#dispute-management-component\\&quot;&gt;\\n  &lt;strong&gt;Dispute Management&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific dispute and allows users to accept or defend a chargeback.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#balance-account\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Balance account&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Users with multiple balance accounts can switch between them using the &lt;strong&gt;Balance Account&lt;\\\/strong&gt; filter.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying dispute results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, disputes from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes disputes from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Year to date&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes disputes from the first day of the current year up until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#payment-method\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Payment method&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Payment method&lt;\\\/strong&gt; filter enables users to filter disputes by specifying the payment method used; this corresponds with card schemes.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#dispute-reason\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Dispute reason&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Dispute Reason&lt;\\\/strong&gt; filter lets users sort disputes by specifying the reason, such as fraud, consumer dispute, or processing error. Note, instead of dispute reasons, the fraud alerts tab shows Notifications of Fraud (NOF).&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Dispute Management component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component shows specific information about a dispute, including the &lt;a href=\\&quot;#dispute-statuses\\&quot;&gt;dispute status&lt;\\\/a&gt;, dispute reason, reason code, dispute, payment, and merchant references. The component also includes important dates such as when the dispute was opened and when a response is due. For chargebacks, users can accept or defend the dispute. When defending a chargeback, the component prompts users to complete required steps, such as selecting a defense reason and uploading supporting evidence. The component also allows for custom data integration, such as your own fields, icons, links, and buttons.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabNFA5Q81432\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;81432&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/component-description\\\\\\\/dispute-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;Dispute Management&lt;\\\/strong&gt; component enables user to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View detailed information about a selected dispute, including dispute reason, reason code, status, and related reference information.&lt;\\\/li&gt;\\n&lt;li&gt;Accept a chargeback. Accepting a chargeback confirms the disputed amount will not be returned to the balance account.&lt;\\\/li&gt;\\n&lt;li&gt;Defend a chargeback and submit a defense reason with supporting evidence, which is sent directly to the card schemes for review.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&quot;,&quot;39d5c1ad0acd4658134eae92a5be94c3&quot;:&quot;&lt;h2&gt;How disputes are defended through components&lt;\\\/h2&gt;\\n&lt;p&gt;Users can defend disputes directly through the dispute components. When the user submits a defense, the components automatically call Adyen&#039;s API to process the dispute. This means no additional actions are needed on your part as a platform.&lt;\\\/p&gt;\\n&lt;p&gt;The user flow for defending a chargeback dispute through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;From the Chargebacks tab the user selects a dispute record. In the Dispute Management, the user selects the &lt;strong&gt;Defend chargeback&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Defend chargeback&lt;\\\/strong&gt; modal window, the user specifies a reason for defending the chargeback.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Defend chargeback&lt;\\\/strong&gt; modal window the user is prompted to provide evidence. The user uploads the required documents to support the chargeback defense.&lt;\\\/li&gt;\\n&lt;li&gt;(Optional) The user has the option to upload additional documents to support the defense.&lt;\\\/li&gt;\\n&lt;li&gt;The user submits the defense for review.&lt;\\\/li&gt;\\n&lt;li&gt;After the dispute request is processed, users can view the &lt;a href=\\&quot;#dispute-statuses\\&quot;&gt;dispute status&lt;\\\/a&gt; message in the Dispute Management.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabIaR5d61151\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;61151&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Dispute management&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Defense reason&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/defend-reason.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/defend-reason.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;defense-reason&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Provide evidence&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/provide-evidence.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/provide-evidence.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;provide-evidence&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Additional evidence&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/additional-evidence.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/additional-evidence.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;additional-evidence&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Submit defense &amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/submit-defense.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/submit-defense.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;submit-defense&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute status&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-status.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/disputes\\\\\\\/1-6-0\\\\\\\/defend-disputes\\\\\\\/dispute-status.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-status&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;e959980f7fec066ae776d20b70a2b088&quot;:&quot;&lt;h2 id=\\&quot;dispute-statuses\\&quot;&gt;Statuses of a dispute&lt;\\\/h2&gt;\\n&lt;p&gt;When a transaction is disputed, it can begin as an RFI (Request for Information) or a chargeback.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;An RFI is an initial inquiry from the issuer seeking more details about a transaction, and importantly, no funds are withdrawn from the balance account at this stage. An RFI doesn&#039;t always escalate to a chargeback.&lt;\\\/li&gt;\\n&lt;li&gt;A chargeback means that the disputed funds have been, or will soon be, withdrawn from the balance account. To potentially recover these funds, the user will need to submit a formal defense.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The dispute components show the status of a chargeback or RFIs, which represents the different stages the dispute goes through. The components automatically manage status updates, so no further action is needed on your part. Disputes move between tabs based on their current status. Each status reflects where the dispute is in the resolution process, and determines which tab it appears under.&lt;\\\/p&gt;\\n&lt;p&gt;For example, a chargeback may first appear under the &lt;strong&gt;Chargebacks&lt;\\\/strong&gt; tab when the status is &lt;strong&gt;Undefended&lt;\\\/strong&gt;. After the user submits a defense, the status changes to &lt;strong&gt;Pending&lt;\\\/strong&gt;, and the dispute automatically moves to the &lt;strong&gt;Ongoing &amp;amp; Closed&lt;\\\/strong&gt; disputes tab.&lt;\\\/p&gt;\\n&lt;p&gt;The following diagram illustrates how chargeback statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Some disputes are not defendable due to the rules of the payment method, not because of a limitation in the component. These disputes begin and end in the \\&quot;Lost\\&quot; status, as no defense action is possible.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Undefended&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The chargeback is open, but no defense has been submitted yet. Action is required from the user if they want to defend the dispute.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Accepted&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has accepted the chargeback.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Pending&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has defended the chargeback. The issuer is reviewing the dispute and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Won&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was won.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Lost&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was lost, either because the issuer has not accepted the defense or the user did not take action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following diagram illustrates how RFI dispute statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-6-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Unresponded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI is open, but no information has been submitted yet. The user must provide information by a certain time or the status will change to expired.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Responded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has submitted the requested information. The issuer is reviewing the response and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Expired&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI has expired because the user did not take action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;&lt;br&gt;For more information, see the &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-process-and-flow\\\/\\&quot;&gt;Dispute flow and process&lt;\\\/a&gt; section.&lt;\\\/p&gt;&quot;,&quot;d47cf4f9625388bc796b0ebd7dfb4998&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;The integration of components involves both server-side and client-side processes. You can find more details on the &lt;a href=\\&quot;#see-also\\&quot;&gt;component libraries&lt;\\\/a&gt; page.&lt;\\\/p&gt;\\n&lt;h3&gt;Integration steps&lt;\\\/h3&gt;\\n&lt;p&gt;Follow these steps to integrate the component(s):&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#create-token\\&quot;&gt;Create an authentication session from your server&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#install-library\\&quot;&gt;Install component library in your front end&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#initialize-components\\&quot;&gt;Initialize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#localize-components\\&quot;&gt;Optional: Localize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Optional: Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-data\\&quot;&gt;Optional: Customize component data&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;3fdaa317969f3a15b3eb7794ad7070d3&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request specifying the following parameters:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To make this API request, your API key must have the &lt;strong&gt;Disputes Component: Manage&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL where the component will appear. &lt;\\\/br&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.your-company.example.com&lt;\\\/code&gt; or &lt;code&gt;https:\\\/\\\/*.your-company.example.com&lt;\\\/code&gt;, where &lt;code&gt;your-company.example.com&lt;\\\/code&gt; is the actual web address of your marketplace.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;accountHolderId&lt;\\\/code&gt;: The unique identifier of the account holder that is linked to the balance account shown in the component.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;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. &lt;\\\/br&gt;From library &lt;strong&gt;v1.6.0&lt;\\\/strong&gt;, set this to &lt;strong&gt;Disputes Component: Manage&lt;\\\/strong&gt; role in your request to enable users to process disputes through the components.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The type of product the component belongs to. Set this to &lt;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;Disputes Component: Manage\\\\&amp;quot;\\\\n      ]\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;YOUR_SESSION_TOKEN_ID\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;YOUR_SESSION_TOKEN\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;f3d47cd043b0a99a98c29c8e533848bc&quot;:&quot;&lt;h2 id=\\&quot;install-library\\&quot;&gt;2. Install component library in your front end&lt;\\\/h2&gt;\\n&lt;p&gt;Install the &lt;strong&gt;Adyen Platform Experience&lt;\\\/strong&gt; library in your front-end application as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Install the npm package.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;npm install @adyen\\\/adyen-platform-experience-web&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Import the library, the components, and the style sheet.&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;import { AdyenPlatformExperience, component_name } from &#039;@adyen\\\/adyen-platform-experience-web&#039;;\\nimport \\&quot;@adyen\\\/adyen-platform-experience-web\\\/adyen-platform-experience-web.css\\&quot;;&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;f6ac534f3fa29be83a4a75055a6c0ce9&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;tabf0MsF92147\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92147&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;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;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the dispute PSP reference when the user selects a specific dispute from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained value to show the &amp;lt;strong&amp;gt;Dispute Management&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Disputes Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the dispute (PSP reference).&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDismiss&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggers when a user selects the Go back button on the dispute management screen. Define this function if you need to handle the dismissal of the flow.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDisputeAccept&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered after the user accepts the dispute and the dispute acceptance request has been successful. Define this function to exit the default flow after a successful dispute acceptance request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDisputeDefend&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered after the user defends the dispute, and the defense acceptance request has been successful. Define this function to exit the default flow after a successful dispute defense request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Disputes Management&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabLNJEb92147\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92147&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;disputes-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;dispute-management-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both dispute components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific dispute from the overview page, the dispute ID is automatically passed to the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab2Irto92147\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;92147&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, DisputesOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst disputesOverview = new DisputesOverview({ core });\\\\\\\\n\\\\\\\\ndisputesOverview.mount(&amp;#039;#disputes-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, DisputeManagement } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst disputeManagement = new DisputeManagement({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;PPKFQ89R6QRXGN82&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ndisputeManagement.mount(&amp;#039;#dispute-management-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const disputesOverview = new DisputesOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected dispute id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const disputeManagement = new DisputeManagement({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_DISPUTE_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;Update your code for initializing components to include the localization settings. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Localize components&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenPlatformExperience, es_ES, nl_NL, fr_FR, all_locales } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\n\\\\\\\/\\\\\\\/ ...\\\\n\\\\n\\\\\\\/\\\\\\\/ Only selected languages are available\\\\nconst core = await AdyenPlatformExperience({\\\\n    availableTranslations: [es_ES, nl_NL, fr_FR],\\\\n    locale: &#039;es-ES&#039;, \\\\\\\/\\\\\\\/ You can also set this to nl-NL, fr-FR, or en-US (default)\\\\n    \\\\\\\/\\\\\\\/ ....\\\\n})\\\\n\\\\n\\\\\\\/\\\\\\\/ All supported languages are available\\\\nconst core = await AdyenPlatformExperience({\\\\n    availableTranslations: [all_locales],\\\\n    locale: &#039;es_ES&#039; \\\\\\\/\\\\\\\/ You can also set this to any of the supported languages\\\\n    \\\\\\\/\\\\\\\/ ....\\\\n})&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;&quot;,&quot;ff153d96dfb9ae9cd86e2a520e8b7658&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The dispute components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables and the class settings:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Inspect the components using your browser&#039;s developer tools.&lt;\\\/li&gt;\\n&lt;li&gt;Modify the styles in your style sheet file.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs show examples of how to style the components. The first example shows how to override predefined CSS variables to use different colors and values. The second example demonstrates how to update the CSS class setting to change the layout of the modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabKWF8D19859\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;19859&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;037a0d83765e970bf1fda8826a5b68ec&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The dispute components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab4ksSt69945\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69945&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the dispute management view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the dispute management view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Within the &lt;code&gt;details&lt;\\\/code&gt; object, define the customization settings, such as field names or visibility.&lt;br \\\/&gt;\\nYou can customize the default fields and add custom fields. In the dashboard, custom fields will be positioned immediately after the default fields.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;fields&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Defines the settings of dashboard fields in the reports overview.&lt;\\\/br&gt;&lt;\\\/br&gt;Default fields: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;disputeReason&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;reasonCode&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;openedOn&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;,&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;respondBy&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;disputeId&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;account&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;paymentPspReference&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;,&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;paymentMerchantReference&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;defenseReason&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;defendedOn&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;disputeEvidence&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;acceptedOn&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;,&lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;&#039;expiredOn&#039;&lt;\\\/strong&gt;&lt;\\\/span&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onDataRetrieve&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The callback function that retrieves a &lt;code&gt;Promise&lt;\\\/code&gt; object resolved on the extended dispute record that contains custom data.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;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;account&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            const { store } = await getAdditionalData(id);\\\\n            return {\\\\n                ...data,\\\\n                _store: store,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;3\\&quot;&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;tabt6Xi069945\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69945&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;`text` data type&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;text&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;: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  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;icon&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      src: &amp;#039;&amp;#039;,\\\\\\\\n                      alt: &amp;#039;&amp;#039;,\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;: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  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;link&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      href: &amp;#039;&amp;#039;,\\\\\\\\n                      target: &amp;#039;_self&amp;#039;,\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;: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  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;button&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      action: () =&amp;amp;gt; {},\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;tabzK0gv69945\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69945&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n dataCustomization: {\\\\\\\\n     details: {\\\\\\\\n         fields: [{ key: &amp;#039;account&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n         onDataRetrieve: async (dispute) =&amp;amp;gt; {\\\\\\\\n             const { store } = await getAdditionalData(id);\\\\\\\\n             return {\\\\\\\\n                 ...data,\\\\\\\\n                 _store: store\\\\\\\\n             };\\\\\\\\n         }\\\\\\\\n     }\\\\\\\\n }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;account&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n            onDataRetrieve: async (dispute) =&amp;amp;gt; {\\\\\\\\n                const { store } = await getAdditionalData(id);\\\\\\\\n                return {\\\\\\\\n                    ...data,\\\\\\\\n                    _store: store\\\\\\\\n                };\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Make sure to include translations for your custom fields in the library initializer:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;If you are not localizing components, add the custom field translations for &lt;code&gt;en_US&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;If you are localizing components, also include the appropriate custom field translations for all supported locales.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`translations` object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const core = await AdyenPlatformExperience({\\\\n    translations: {\\\\n        en_US: {\\\\n            _store: &#039;Store&#039;\\\\n        },\\\\n        es_ES: {\\\\n            _store: &#039;Tienda&#039;\\\\n        },\\\\n    }\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;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;dcd53c0dcea02c7e49a17b56af2a5683&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;tab4RT8e21560\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;21560&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;f634bda2aea64d4c82e737e31ffdf6b4&quot;:&quot;&lt;h2&gt;Requirements&lt;\\\/h2&gt;\\n&lt;p&gt;Before you begin, take into account the following requirements, limitations, and preparations.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have the Adyen for Platforms integration.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;API credentials&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;You must have a &lt;a href=\\&quot;\\\/marketplaces\\\/manage-access\\\/api-credentials-web-service?tab=create-ws_1\\&quot;&gt;Balance Platform API key&lt;\\\/a&gt; (for example, &lt;strong&gt;&lt;span translate=\\&quot;no\\&quot;&gt;ws[_123456]@BalancePlatform.&lt;\\\/span&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;Disputes Component: Manage&lt;\\\/strong&gt;&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Dispute visibility and access&lt;\\\/strong&gt; &lt;br&gt;&lt;br&gt;Account holders can view disputes created in this component on or after May 22, 2025.&lt;br&gt;&lt;br&gt; An account holder can perform an action or view submitted defense documents if and only if both of the following conditions are met: &lt;ul&gt;&lt;li&gt;They are the sole non-liable account holder referenced via splits in the original payment.&lt;\\\/li&gt;&lt;li&gt;They receive at least one split of type &lt;code&gt;BalanceAccount&lt;\\\/code&gt; in the corresponding payment or capture.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;br&gt;&lt;\\\/ul&gt; &lt;strong&gt;Document upload limits&lt;\\\/strong&gt; &lt;ul&gt;&lt;li&gt;Documents must be no larger than 2 MB and in &lt;code&gt;.pdf&lt;\\\/code&gt;, &lt;code&gt;.jpg&lt;\\\/code&gt;, .&lt;code&gt;jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;li&gt; Images files must be no larger than 10 MB and in &lt;code&gt;.jpg&lt;\\\/code&gt;, &lt;code&gt;.jpeg&lt;\\\/code&gt;, or &lt;code&gt;.tiff&lt;\\\/code&gt; format.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;strong&gt;Refunds not supported&lt;\\\/strong&gt;&lt;ul&gt;&lt;li&gt;Currently this component does not support refunds.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;42fa9957b746d47a4419d7c439eb057d&quot;:&quot;&lt;h2 id=\\&quot;dispute-statuses\\&quot;&gt;Statuses of a dispute&lt;\\\/h2&gt;\\n&lt;p&gt;When a transaction is disputed, it can begin as an RFI (Request for Information) or a chargeback.&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;An RFI is an initial inquiry from the issuer seeking more details about a transaction, and importantly, no funds are withdrawn from the balance account at this stage. An RFI doesn&#039;t always escalate to a chargeback.&lt;\\\/li&gt;\\n&lt;li&gt;A chargeback means that the disputed funds have been, or will soon be, withdrawn from the balance account. To potentially recover these funds, the user will need to submit a formal defense. For more information, see &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-reason-codes\\\/?tab=chargeback_0_1#defense_requirements\\&quot;&gt;Dispute reason codes and defense requirements&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The dispute components show the status of a chargeback or RFIs, which represents the different stages the dispute goes through. The components automatically manage status updates, so no further action is needed on your part. Disputes move between tabs based on their current status. Each status reflects where the dispute is in the resolution process, and determines which tab it appears under.&lt;\\\/p&gt;\\n&lt;p&gt;For example, a chargeback may first appear under the &lt;strong&gt;Chargebacks&lt;\\\/strong&gt; tab when the status is &lt;strong&gt;Undefended&lt;\\\/strong&gt;. After the user submits a defense, the status changes to &lt;strong&gt;Pending&lt;\\\/strong&gt;, and the dispute automatically moves to the &lt;strong&gt;Ongoing &amp;amp; Closed&lt;\\\/strong&gt; disputes tab.&lt;\\\/p&gt;\\n&lt;p&gt;The following diagram illustrates how chargeback statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/chargeback-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Some disputes are not defendable due to the rules of the payment method, not because of a limitation in the component. These disputes begin and end in the \\&quot;Lost\\&quot; status, as no defense action is possible.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Undefended&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The chargeback is open, but no defense has been submitted yet. Action is required from the user if they want to defend the dispute.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Accepted&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has accepted the chargeback.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Pending&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has defended the chargeback. The issuer is reviewing the dispute and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Won&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was won.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Lost&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user submitted a defense and the chargeback was lost, either because the issuer has not accepted the defense or the user did not take action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following diagram illustrates how RFI dispute statuses evolve over time.&lt;\\\/p&gt;\\n&lt;p&gt;&lt;a rel=\\&quot;lightbox\\&quot; href=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; src=\\&quot;\\&quot;&gt;\\n  &lt;img alt=\\&quot;\\&quot; src=\\&quot;\\\/user\\\/pages\\\/filters\\\/pe-components-dashboards\\\/disputes\\\/1-9-0\\\/dispute-statuses\\\/rfi-statuses.png\\&quot; \\\/&gt;\\n&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;p&gt;You can find a detailed explanation for each status in the following table.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120px\\&quot;&gt;Status&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Unresponded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI is open, but no information has been submitted yet. The user must provide information by a certain time or the status will change to expired.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Responded&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The user has submitted the requested information. The issuer is reviewing the response and will determine an outcome.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Expired&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The RFI has expired because the user did not take action.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;&lt;br&gt;For more information, see the &lt;a href=\\&quot;\\\/risk-management\\\/understanding-disputes\\\/dispute-process-and-flow\\\/\\&quot;&gt;Dispute flow and process&lt;\\\/a&gt; section.&lt;\\\/p&gt;&quot;,&quot;dbbcca3f9c6cb47b8d43f3b9328c515a&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;tabzWr3Q76744\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;76744&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;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;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;list&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the dispute PSP reference when the user selects a specific dispute from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained value to show the &amp;lt;strong&amp;gt;Dispute Management&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Disputes Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the dispute (PSP reference).&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDismiss&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggers when a user selects the Go back button on the dispute management screen. Define this function if you need to handle the dismissal of the flow.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDisputeAccept&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered after the user accepts the dispute and the dispute acceptance request has been successful. Define this function to exit the default flow after a successful dispute acceptance request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDisputeDefend&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered after the user defends the dispute, and the defense acceptance request has been successful. Define this function to exit the default flow after a successful dispute defense request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Disputes Management&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabzPQer76744\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;76744&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;disputes-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;dispute-management-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both dispute components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific dispute from the overview page, the dispute ID is automatically passed to the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tab6q4Q376744\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;76744&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, DisputesOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst disputesOverview = new DisputesOverview({ core });\\\\\\\\n\\\\\\\\ndisputesOverview.mount(&amp;#039;#disputes-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, DisputeManagement } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst disputeManagement = new DisputeManagement({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;PPKFQ89R6QRXGN82&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ndisputeManagement.mount(&amp;#039;#dispute-management-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const disputesOverview = new DisputesOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected dispute id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const disputeManagement = new DisputeManagement({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_DISPUTE_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;dc50f3edc76c482ac5f88894419ba48f&quot;:&quot;&lt;h2 id=\\&quot;customize-data\\&quot;&gt;6. Optional: Customize component data&lt;\\\/h2&gt;\\n&lt;p&gt;The dispute components allow you to include a diverse range of data types and sources to showcase within your user dashboard. You can:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Integrate custom data, such as your own fields, icons, links, and buttons.&lt;\\\/li&gt;\\n&lt;li&gt;Define the settings for each dashboard field, including their names and visibility.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;When initializing your component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the &lt;code&gt;dataCustomization&lt;\\\/code&gt; parameter, including:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabY8wfz63861\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;63861&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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 disputes 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 dispute management 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;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that includes customization settings for dashboard fields in the dispute management view.&amp;lt;\\\\\\\/br&amp;gt;&amp;lt;\\\\\\\/br&amp;gt;Example: &amp;lt;code&amp;gt;dataCustomization: { details: { } }&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Within the &lt;code&gt;list&lt;\\\/code&gt; and  &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;tabg6oV263861\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;63861&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;\\\\\\\/li&amp;gt;\\\\n&amp;lt;\\\\\\\/ol&amp;gt;\\\\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 disputes 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;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;respondBy&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;disputeReason&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;reason&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;disputedAmount&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;totalPaymentAmount&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;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;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;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Defines the settings of dashboard fields in the reports 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;disputeReason&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;reasonCode&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;openedOn&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;respondBy&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;disputeId&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;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;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;paymentMerchantReference&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;defenseReason&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;defendedOn&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;disputeEvidence&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;acceptedOn&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;expiredOn&amp;#039;&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;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 on the extended dispute record that contains custom data.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Define the settings for each dashboard field using the following parameters.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;key&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Specifies the name of a field. &lt;\\\/br&gt;&lt;\\\/br&gt;Example: &lt;code&gt;fields: [ { key: &#039;_store&#039; } ]&lt;\\\/code&gt; &lt;\\\/br&gt;&lt;\\\/br&gt; &lt;div class=\\&quot;sc-notice note\\&quot;&gt;&lt;div&gt;To prevent conflicts with the default field names, always start the names of your custom fields with an underscore (_) character.&lt;\\\/div&gt;&lt;\\\/div&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines whether a field should be shown or not. Possible values: &lt;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;account&#039;, visibility: &#039;hidden&#039; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;If adding a custom field, include the &lt;code&gt;onDataRetrieve&lt;\\\/code&gt; parameter.&lt;\\\/p&gt;\\n&lt;p&gt;Make sure to include the received data object in the return object by using the &lt;a href=\\&quot;https:\\\/\\\/developer.mozilla.org\\\/en-US\\\/docs\\\/Web\\\/JavaScript\\\/Reference\\\/Operators\\\/Spread_syntax\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;spread syntax&lt;\\\/a&gt;. The component can then use this as matching keys to map your custom data with the existing one.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;`onDataRetrieve` parameter&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;{\\\\n    details: {\\\\n        fields: [\\\\n            { key: &#039;_store&#039; },\\\\n        ],\\\\n        onDataRetrieve: (data) =&amp;gt; {\\\\n            const { store } = await getAdditionalData(id);\\\\n            return {\\\\n                ...data,\\\\n                _store: store,\\\\n            };\\\\n        },\\\\n    },\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Specify the type of your custom data.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Type&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;String&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Determines how the custom data value should look and behave. Possible values: &lt;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;tabgjSKM63861\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;63861&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Text&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;`text` data type&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;text&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n &amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-text&amp;quot;,&amp;quot;oldTabId&amp;quot;: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  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;icon&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      src: &amp;#039;&amp;#039;,\\\\\\\\n                      alt: &amp;#039;&amp;#039;,\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n &amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-icon&amp;quot;,&amp;quot;oldTabId&amp;quot;: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  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;link&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      href: &amp;#039;&amp;#039;,\\\\\\\\n                      target: &amp;#039;_self&amp;#039;,\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n &amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-link&amp;quot;,&amp;quot;oldTabId&amp;quot;: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  details: {\\\\\\\\n      fields: [\\\\\\\\n          { key: &amp;#039;_store&amp;#039; },\\\\\\\\n      ],\\\\\\\\n      onDataRetrieve: (data) =&amp;amp;gt; {\\\\\\\\n          return {\\\\\\\\n              ...data,\\\\\\\\n              _store: {\\\\\\\\n                  type: &amp;#039;button&amp;#039;,\\\\\\\\n                  value: &amp;#039;New York&amp;#039;,\\\\\\\\n                  config: {\\\\\\\\n                      action: () =&amp;amp;gt; {},\\\\\\\\n                      className: &amp;#039;my-class my-class--variant&amp;#039;,\\\\\\\\n                  },\\\\\\\\n              },\\\\\\\\n          };\\\\\\\\n      },\\\\\\\\n  },\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n &amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;custom-data-button&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;Here is an example &lt;code&gt;dataCustomization&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabTUfBI63861\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;63861&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\nlist: {\\\\\\\\n    fields: [{\\\\\\\\n            key: &amp;#039;disputeReason&amp;#039;,\\\\\\\\n            visibility: &amp;#039;hidden&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;reason&amp;#039;,\\\\\\\\n            visibility: &amp;#039;hidden&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;_summary&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;_sendEmail&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;disputedAmount&amp;#039;,\\\\\\\\n            align: &amp;#039;left&amp;#039;\\\\\\\\n        },\\\\\\\\n    ],\\\\\\\\n    onDataRetrieve: async data =&amp;amp;gt;\\\\\\\\n        data.map(dispute =&amp;amp;gt; ({\\\\\\\\n            ...dispute,\\\\\\\\n            _summary: {\\\\\\\\n                type: &amp;#039;link&amp;#039;,\\\\\\\\n                value: &amp;#039;Summary&amp;#039;,\\\\\\\\n                config: {\\\\\\\\n                    href: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/www.adyen.com\\\\\\\\\\\\\\\/&amp;#039;\\\\\\\\n                },\\\\\\\\n            },\\\\\\\\n            _sendEmail: {\\\\\\\\n                type: &amp;#039;button&amp;#039;,\\\\\\\\n                value: &amp;#039;Send email&amp;#039;,\\\\\\\\n                config: {\\\\\\\\n                    action: () =&amp;amp;gt; {\\\\\\\\n                        \\\\\\\\\\\\\\\/* client action *\\\\\\\\\\\\\\\/ }\\\\\\\\n                },\\\\\\\\n            },\\\\\\\\n        })),\\\\\\\\n},\\\\\\\\n\\\\\\\\ndetails: {\\\\\\\\n    fields: [{\\\\\\\\n            key: &amp;#039;id&amp;#039;,\\\\\\\\n            visibility: &amp;#039;hidden&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;_store&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;_product&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;_summary&amp;#039;\\\\\\\\n        },\\\\\\\\n        {\\\\\\\\n            key: &amp;#039;_sendEmail&amp;#039;\\\\\\\\n        },\\\\\\\\n    ],\\\\\\\\n    onDataRetrieve: async data =&amp;amp;gt; ({\\\\\\\\n        ...data,\\\\\\\\n        _store: &amp;#039;Sydney&amp;#039;,\\\\\\\\n        _product: &amp;#039;Coffee&amp;#039;,\\\\\\\\n        _summary: {\\\\\\\\n            type: &amp;#039;link&amp;#039;,\\\\\\\\n            value: &amp;#039;Summary&amp;#039;,\\\\\\\\n            config: {\\\\\\\\n                href: &amp;#039;https:\\\\\\\\\\\\\\\/\\\\\\\\\\\\\\\/www.adyen.com\\\\\\\\\\\\\\\/&amp;#039;\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n        _sendEmail: {\\\\\\\\n            type: &amp;#039;button&amp;#039;,\\\\\\\\n            value: &amp;#039;Send email&amp;#039;,\\\\\\\\n            config: {\\\\\\\\n                action: () =&amp;amp;gt; {\\\\\\\\n                    \\\\\\\\\\\\\\\/* client action *\\\\\\\\\\\\\\\/ }\\\\\\\\n            },\\\\\\\\n        },\\\\\\\\n    }),\\\\\\\\n},\\\\\\\\n};&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Example `dataCustomization` object&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;{\\\\\\\\n    dataCustomization: {\\\\\\\\n        details: {\\\\\\\\n            fields: [{ key: &amp;#039;account&amp;#039;, visibility: &amp;#039;hidden&amp;#039; }, { key: &amp;#039;_store&amp;#039; }],\\\\\\\\n            onDataRetrieve: async (dispute) =&amp;amp;gt; {\\\\\\\\n                const { store } = await getAdditionalData(id);\\\\\\\\n                return {\\\\\\\\n                    ...data,\\\\\\\\n                    _store: store\\\\\\\\n                };\\\\\\\\n            }\\\\\\\\n        }\\\\\\\\n    }\\\\\\\\n}&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;ol start=\\&quot;3\\&quot;&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;3ce4b0729a2bf9b5dea85bf378543b33&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;tabJWSBT44490\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;44490&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;list&amp;lt;\\\\\\\/code&amp;gt; and &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the dispute PSP reference when the user selects a specific dispute from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained value to show the &amp;lt;strong&amp;gt;Dispute Management&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Disputes Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of disputes shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;dataCustomization&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;An object that contains the &amp;lt;code&amp;gt;details&amp;lt;\\\\\\\/code&amp;gt; object, which include &amp;lt;a href=\\\\&amp;quot;#customize-data\\\\&amp;quot;&amp;gt;customization specifications&amp;lt;\\\\\\\/a&amp;gt; for dashboard fields, allowing for additional data integration from your database.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the dispute (PSP reference).&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDismiss&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggers when a user selects the Go back button on the dispute management screen. Define this function if you need to handle the dismissal of the flow.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDisputeAccept&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered after the user accepts the dispute and the dispute acceptance request has been successful. Define this function to exit the default flow after a successful dispute acceptance request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onDisputeDefend&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The callback function triggered after the user defends the dispute, and the defense acceptance request has been successful. Define this function to exit the default flow after a successful dispute defense request. The function accepts an object as an argument that includes the &amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt; for the dispute.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Disputes Management&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabbuh9Q44490\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;44490&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;disputes-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;dispute-management-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both dispute components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific dispute from the overview page, the dispute ID is automatically passed to the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;p&gt;Select the tab for the component you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabOkPoJ44490\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;44490&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Disputes Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, DisputesOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst disputesOverview = new DisputesOverview({ core });\\\\\\\\n\\\\\\\\ndisputesOverview.mount(&amp;#039;#disputes-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;disputes-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;disputes-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Dispute Management component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, DisputeManagement } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst disputeManagement = new DisputeManagement({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;PPKFQ89R6QRXGN82&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\ndisputeManagement.mount(&amp;#039;#dispute-management-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;dispute-management&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;dispute-management&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Disputes Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const disputesOverview = new DisputesOverview({\\\\n    core,\\\\n    onRecordSelection: ({ id }) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Use selected dispute id.\\\\n    }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Dispute Management&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const disputeManagement = new DisputeManagement({\\\\n    core,\\\\n    id: &#039;&amp;lt;SELECTED_DISPUTE_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;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\/disputes-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\/disputes-component","title":"Dispute components","content":"\nLearn more&nbsp;&nbsp;View our repository on GitHub&nbsp;&nbsp;Try it out with a live demo&nbsp;&nbsp;Explore the latest updates\n\nThe dispute components enable you to offer dispute management in your portal's user interface (UI) with minimal engineering effort. These components integrate all the features required to monitor and resolve chargebacks without making multiple API requests. This means you do not need to implement complex API calls to retrieve dispute reason codes, track respond-by dates, or manage the document upload process for defense. The components handle all of this automatically.\nAdditionally, the components provide greater flexibility for data customization. You can enrich the dispute 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 dispute components, which include the Dispute Overview component and the Dispute Management component.\nA standard user flow that these components cover.\nFunctionalities and information required to understand dispute components, such as filtering by balance account, defending or accepting disputes, uploading supporting documentation, and reason codes.\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":"Dispute 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\/disputes-component"},"levels":5,"category":"Marketplaces","category_color":"green","tags":["Dispute","components"]}}