{"title":"Pay by Link 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 Pay by Link components enable payment link management within a portal's user interface (UI) with minimal engineering effort. These components integrate all the features required to create, monitor, and share payment links without making multiple API requests. This removes the need to implement complex API calls to track link status, handle expiration logic, or manage branding configurations, as the components handle these processes automatically.<\/p>\n<p>Additionally, the components provide greater flexibility for data customization. These components can be customized with your own custom fields, icons, links, and buttons, allowing the UI to align with your specific business needs.<\/p>\n<p>This page provides guidance on:<\/p>\n<ul>\n<li>The available Pay by Link components, which include the <strong>Pay by Link Overview<\/strong> component and the <strong>Pay by Link Details<\/strong> component.<\/li>\n<li>A standard user flow that these components cover.<\/li>\n<li>Functionalities such as filtering for all or a specific store, managing link expiration, tracking status history, and branding customization.<\/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-pay-by-link\"\n        :in-page-filtering=\"{&quot;guides&quot;:{&quot;pay-by-link&quot;:{&quot;label&quot;:&quot;Pay by Link&quot;,&quot;integrations&quot;:{&quot;pay-by-link-components&quot;:{&quot;label&quot;:&quot;components&quot;,&quot;description&quot;:&quot;Use Platform Experience components to build interactive dashboards for your users.&quot;,&quot;displayVersionDropdown&quot;:true,&quot;visual_content&quot;:null,&quot;visual_images&quot;:null,&quot;external_content&quot;:null,&quot;external_icon&quot;:null,&quot;versions&quot;:{&quot;version-1.14.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;7f52522ba22f1d1561cb1f6551e0c724&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;ed87a6066251a0c6161adc98c0048a6c&quot;},&quot;create-a-link&quot;:{&quot;$ref&quot;:&quot;f9a73d5b53779e676172efecdb2e815f&quot;},&quot;configure-settings&quot;:{&quot;$ref&quot;:&quot;9be2110a2fbb8fcdf8ea708f40f097d0&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;a8fdcc22c1bf071d3f005f5181392d25&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;0cbdac49c0c899a4eb1e4b48d46b8429&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;62d0d8a4ae392d4c1bd37dbce2285bfd&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;9125c0197f0fddfbf5f683d72806c6ab&quot;},&quot;prefill-data&quot;:{&quot;$ref&quot;:&quot;1ada8010a1e26f91812efd6b56bd7658&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;7f52522ba22f1d1561cb1f6551e0c724&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;ed87a6066251a0c6161adc98c0048a6c&quot;},&quot;create-a-link&quot;:{&quot;$ref&quot;:&quot;f9a73d5b53779e676172efecdb2e815f&quot;},&quot;configure-settings&quot;:{&quot;$ref&quot;:&quot;9be2110a2fbb8fcdf8ea708f40f097d0&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;a8fdcc22c1bf071d3f005f5181392d25&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;0cbdac49c0c899a4eb1e4b48d46b8429&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;62d0d8a4ae392d4c1bd37dbce2285bfd&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;9125c0197f0fddfbf5f683d72806c6ab&quot;},&quot;prefill-data&quot;:{&quot;$ref&quot;:&quot;1ada8010a1e26f91812efd6b56bd7658&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;7f52522ba22f1d1561cb1f6551e0c724&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;ed87a6066251a0c6161adc98c0048a6c&quot;},&quot;create-a-link&quot;:{&quot;$ref&quot;:&quot;f9a73d5b53779e676172efecdb2e815f&quot;},&quot;configure-settings&quot;:{&quot;$ref&quot;:&quot;9be2110a2fbb8fcdf8ea708f40f097d0&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;a8fdcc22c1bf071d3f005f5181392d25&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;0cbdac49c0c899a4eb1e4b48d46b8429&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;62d0d8a4ae392d4c1bd37dbce2285bfd&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;ad41301fc4d46a0b343218d50381de27&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;9125c0197f0fddfbf5f683d72806c6ab&quot;},&quot;prefill-data&quot;:{&quot;$ref&quot;:&quot;1ada8010a1e26f91812efd6b56bd7658&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;7f52522ba22f1d1561cb1f6551e0c724&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;ed87a6066251a0c6161adc98c0048a6c&quot;},&quot;create-a-link&quot;:{&quot;$ref&quot;:&quot;f9a73d5b53779e676172efecdb2e815f&quot;},&quot;configure-settings&quot;:{&quot;$ref&quot;:&quot;9be2110a2fbb8fcdf8ea708f40f097d0&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;a8fdcc22c1bf071d3f005f5181392d25&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;0cbdac49c0c899a4eb1e4b48d46b8429&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;87e69599dbc6a7b0cd7e25698e357eb4&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;9125c0197f0fddfbf5f683d72806c6ab&quot;},&quot;prefill-data&quot;:{&quot;$ref&quot;:&quot;1ada8010a1e26f91812efd6b56bd7658&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1},&quot;versions&quot;:{&quot;version&quot;:&quot;1.11.x&quot;}},&quot;version-1.10.x&quot;:{&quot;sections&quot;:{&quot;requirements&quot;:{&quot;$ref&quot;:&quot;7f52522ba22f1d1561cb1f6551e0c724&quot;},&quot;component_description&quot;:{&quot;$ref&quot;:&quot;ed87a6066251a0c6161adc98c0048a6c&quot;},&quot;create-a-link&quot;:{&quot;$ref&quot;:&quot;f9a73d5b53779e676172efecdb2e815f&quot;},&quot;configure-settings&quot;:{&quot;$ref&quot;:&quot;9be2110a2fbb8fcdf8ea708f40f097d0&quot;},&quot;how_it_works&quot;:{&quot;$ref&quot;:&quot;15078df03fb68d31cb4305cb05a2f19c&quot;},&quot;create_a_session&quot;:{&quot;$ref&quot;:&quot;a8fdcc22c1bf071d3f005f5181392d25&quot;},&quot;install_component_library&quot;:{&quot;$ref&quot;:&quot;0cbdac49c0c899a4eb1e4b48d46b8429&quot;},&quot;initialize_components&quot;:{&quot;$ref&quot;:&quot;87e69599dbc6a7b0cd7e25698e357eb4&quot;},&quot;localize_components&quot;:{&quot;$ref&quot;:&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;},&quot;customize_appearance&quot;:{&quot;$ref&quot;:&quot;9125c0197f0fddfbf5f683d72806c6ab&quot;},&quot;prefill-data&quot;:{&quot;$ref&quot;:&quot;1ada8010a1e26f91812efd6b56bd7658&quot;},&quot;supported_languages&quot;:{&quot;$ref&quot;:&quot;33baefb85ac0c394f26ff8940384f46c&quot;}},&quot;versions&quot;:{&quot;version&quot;:&quot;1.10.x&quot;},&quot;config&quot;:{&quot;published&quot;:true,&quot;visible&quot;:true,&quot;api_version&quot;:1}}},&quot;sections&quot;:[],&quot;components&quot;:{&quot;7f52522ba22f1d1561cb1f6551e0c724&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 roles to your API credential: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: View&lt;\\\/strong&gt;. Allows the user to view payment links only. Used in &lt;a href=\\&quot;#payment-links-overview-component\\&quot;&gt;Pay by Link Overview&lt;\\\/a&gt; and &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;Pay by Link Details&lt;\\\/a&gt; components.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: View PII&lt;\\\/strong&gt;. Allows the user to view Personally Identifiable Information (PII) associated with payment links. Used in &lt;a href=\\&quot;#payment-links-overview-component\\&quot;&gt;Pay by Link Overview&lt;\\\/a&gt; and &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;Pay by Link Details&lt;\\\/a&gt; components.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: Manage Links&lt;\\\/strong&gt;. Allows the user to view, create, and deactivate payment links. Used in &lt;a href=\\&quot;#payment-links-overview-component\\&quot;&gt;Pay by Link Overview&lt;\\\/a&gt; and &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;Pay by Link Details&lt;\\\/a&gt; components.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Pay By Link Component: Manage Settings&lt;\\\/strong&gt;. Allows the user full administrative control over component configuration, themes, and settings. Used in &lt;a href=\\&quot;#terms-and-theme-settings\\&quot;&gt;Terms and theme settings&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Link availability and scope:&lt;ul&gt;&lt;li&gt;Payment links are available and searchable in the payment link list view for up to 90 days from the day they are created.&lt;\\\/li&gt;&lt;li&gt;Payment links have an expiration date. The specific expiry date is set by the user (up to a maximum of 70 days) or, if not specified by the user, the link will automatically expire 24 hours after creation.&lt;\\\/li&gt;&lt;\\\/ul&gt;Store requirement:&lt;ul&gt;&lt;li&gt;Account holders must be associated with at least one store to use the Pay by Link components.&lt;\\\/li&gt;&lt;\\\/ul&gt;Configuration inheritance:&lt;ul&gt;&lt;li&gt;Pay by Link components inherit all merchant or company account settings, except for the terms and conditions and the theme, which are configurable per store. This makes store selection a required step when creating a link, though your store will be automatically selected if you only have one. &lt;\\\/li&gt;&lt;li&gt;This component does not support automatic email sending.&lt;\\\/li&gt;&lt;li&gt;Themes configured in the component apply only to the component and are not used for links created through the API or Customer Area.&lt;\\\/li&gt;&lt;li&gt;Terms of Service configured within the component apply only to those links and are not used for links created through the API or Customer Area.&lt;\\\/li&gt;&lt;li&gt;When a shopper makes a payment with a link created in the component, the store split configuration determines how funds are distributed to your user&#039;s balance accounts. If a store does not have a split configuration, all funds are sent to the liable balance account by default. See more details at &lt;a href=\\&quot;\\\/platforms\\\/automatic-split-configuration\\&quot;&gt;split payments automatically&lt;\\\/a&gt;. This component does not alter existing split logic.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li&gt;Associate account holders with at least one store to use the Pay by Link components.&lt;\\\/li&gt;&lt;li&gt;Link the store to a business line that includes &lt;code&gt;payByLink&lt;\\\/code&gt; or &lt;code&gt;eCommerce&lt;\\\/code&gt; in its sales channels. This can be configured during store creation (in the &lt;a href=\\&quot;\\\/platforms\\\/manage-stores?tab=CA-1_1#create-store\\&quot;&gt;Customer area&lt;\\\/a&gt; or while configuring business lines through the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/legalentity\\\/latest\\\/post\\\/businessLines\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/businessLines&lt;\\\/a&gt;).&lt;\\\/li&gt;&lt;li&gt;Verify that the component is available in the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;languages&lt;\\\/a&gt; that apply to your situation.&lt;\\\/li&gt;&lt;li&gt;Check our &lt;a href=\\&quot;\\\/marketplaces\\\/components-overview\\&quot;&gt;Component libraries&lt;\\\/a&gt; page for additional information on the supported countries\\\/regions and browser versions.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;&quot;,&quot;ed87a6066251a0c6161adc98c0048a6c&quot;:&quot;&lt;h2&gt;Payment Links Overview component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component allows users to create new payment links and view a list of existing links generated within a specified time period for all or a specific store. Users can quickly view their payment links, helping them monitor and track their status. When creating a new payment link, the marketplace configuration dictates split payment handling. This component does not alter existing split logic. For details see &lt;a href=\\&quot;#how-to-create-a-payment-link-through-components\\&quot;&gt;how to create a payment link&lt;\\\/a&gt; and &lt;a href=\\&quot;\\\/platforms\\\/automatic-split-configuration\\\/\\&quot;&gt;split payments automatically&lt;\\\/a&gt;. The links generated by this component support &lt;a href=\\&quot;\\\/unified-commerce\\\/pay-by-link\\\/supported-payment-methods#-supported-payment-methods-\\&quot;&gt;Pay by Link payment methods&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;This component organizes payment links into two tabs:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Active&lt;\\\/strong&gt;: Shows payment links that shoppers can use to make a payment. Each link record includes details such as payment link ID, status, amount, and expiration date. Links on this tab have a status of &lt;strong&gt;Active&lt;\\\/strong&gt; or &lt;strong&gt;Payment pending&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Inactive&lt;\\\/strong&gt;: Shows payment links that are no longer available for payment (either completed or expired). Each link record includes details such as payment link ID, status, amount, and expiration date. Links on this tab have a status of &lt;strong&gt;Completed&lt;\\\/strong&gt; or &lt;strong&gt;Expired&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following illustrate each tab of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabXAgYq49191\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49191&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Active&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-active-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-active-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-active&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Inactive&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-inactive-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-inactive-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-inactive&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;Payment Links Overview&lt;\\\/strong&gt; component enables users to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Create new payment links to send to shoppers.&lt;\\\/li&gt;\\n&lt;li&gt;View a list of active and inactive payment links for all or a specific store.&lt;\\\/li&gt;\\n&lt;li&gt;Filter payment links by store, date, status, type, merchant reference, and payment link ID. See &lt;a href=\\&quot;#available-filters\\&quot;&gt;available filters&lt;\\\/a&gt; for more details.&lt;\\\/li&gt;\\n&lt;li&gt;Configure settings where your users can provide terms and conditions of their services to shoppers (this is required before you can create a payment link) and set your theme, including your brand name and logo.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component includes the &lt;a href=\\&quot;#payment-link-details-component\\&quot;&gt;\\n  &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt;\\n&lt;\\\/a&gt; component, which provides more details about a specific payment link and allows users to copy or expire a payment link. Additionally, the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component provides access to the payment link creation flow and payment link settings.&lt;\\\/p&gt;\\n&lt;h3&gt;Available filters&lt;\\\/h3&gt;\\n&lt;p&gt;The following sections shows the available filters and their values for the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#store\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Store&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Store&lt;\\\/strong&gt; filter enables users to view payment links generated for a specific store.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#time-period\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Time period&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Time period&lt;\\\/strong&gt; filter specifies the date and time range for displaying payment link results. The specified time is determined by the time zone of the selected balance account.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:100px\\&quot;&gt;Filter value&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 7 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links from the previous six days and from today until the current time. For example, if today is a Tuesday and the time is 8:00 PM, payment links from the previous Wednesday midnight until this Tuesday 8:00 PM are included.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links for the current week, starting from Monday midnight until the present moment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last week&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links from Monday midnight to Sunday 11:59:59 PM of the previous week.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last 30 days&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The default setting. Includes payment links from the previous 29 days and from today until the current time.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;This month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links for the current month, starting from the first day of the month until today&#039;s date.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Last month&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Includes payment links from the previous month, starting from the first day of the month until the end of the month at 11:59:59 PM.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;strong&gt;Custom&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Allows setting a custom time period of up to 90 days.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#status\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Status&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Status&lt;\\\/strong&gt; filter enables users to filter the list by the current status of the payment link. Possible values are: &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Active&lt;\\\/strong&gt;: The link is live and ready to receive payments.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Payment pending&lt;\\\/strong&gt;: The payment process has been started, but the transaction has not been confirmed as successful or failed.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Completed&lt;\\\/strong&gt;: The payment link has successfully processed the required payment. For single use links, this status means the link is now deactivated.&lt;\\\/li&gt;&lt;li&gt;&lt;strong&gt;Expired&lt;\\\/strong&gt;: The link is no longer valid or usable, either because a set expiration date was reached or because the link was deactivated by the user.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#type\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Type&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Type&lt;\\\/strong&gt; filter enables users to filter payment links by their usage configuration, specifying whether the link is Single use or Open. &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Single use&lt;\\\/strong&gt;: A link that expires immediately after the first successful payment is made. It cannot be used again.&lt;\\\/li&gt;&lt;li&gt; &lt;strong&gt;Open&lt;\\\/strong&gt;: A link that can be used to process payments multiple times, until manually deactivated or canceled by the user.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#merchant-reference\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Merchant reference &lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Merchant reference&lt;\\\/strong&gt; filter enables users to filter the list by the unique reference associated with the payment.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#payment-link-id\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;Payment link ID&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;The &lt;strong&gt;Payment link ID&lt;\\\/strong&gt; filter enables users to filter the list by entering a unique identifier of the payment link.&lt;\\\/p&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h2&gt;Payment Link Details component&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component shows specific information about a payment link. Users have the ability to disable an active link, which prevents any further payments from being made with that link, or easily copy the link&#039;s URL for sharing. This component provides users with a comprehensive view of payment link details such as the payment link ID, store, merchant reference, creation, expiration dates, link type, description. It also includes shopper specific information such as shopper reference number, full name, email, email notifications, phone, country or region, shipping and billing address and status history.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component is embedded in the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component and is shown as a modal window on the overview page. You can also choose to show the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component on a separate page during the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initialization of the components&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;The following tabs illustrate how the component appears on various screen sizes.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabzyplD49191\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;49191&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Mobile&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-mobile.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-mobile.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-mobile&amp;quot;,&amp;quot;oldTabId&amp;quot;: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\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-desktop.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/component-description\\\\\\\/pay-by-link-details-desktop.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview-desktop&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;Payment Link Details&lt;\\\/strong&gt; component enables user to:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;View detailed information about a selected payment link, including link information, shopper information, and activity.&lt;\\\/li&gt;\\n&lt;li&gt;Expire a payment link, making it unusable for further payments.&lt;\\\/li&gt;\\n&lt;li&gt;Copy a payment link, allowing the user to easily copy the payment link&#039;s URL to their clipboard, facilitating quick sharing via email or chat.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&quot;,&quot;f9a73d5b53779e676172efecdb2e815f&quot;:&quot;&lt;h2&gt;How to create a payment link through components&lt;\\\/h2&gt;\\n&lt;p&gt;Users can create a new payment link directly through the Pay by Link components.&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices yellow\\&quot;&gt;\\n&lt;p&gt;Note: The user must provide the required shopper Terms and conditions URL and confirm compliance under the &lt;a href=\\&quot;#terms-and-theme-settings\\&quot;&gt;Settings&lt;\\\/a&gt; tab before a payment link can be created.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;The user flow for creating a payment link through the components is as follows:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;From the &lt;strong&gt;Active&lt;\\\/strong&gt; or &lt;strong&gt;Inactive&lt;\\\/strong&gt; tabs the user selects the &lt;strong&gt;Create payment link&lt;\\\/strong&gt; button, selects a &lt;strong&gt;Store&lt;\\\/strong&gt;, and selects the &lt;strong&gt;Continue&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Payment&lt;\\\/strong&gt; step, the user fills in the required information and selects the &lt;strong&gt;Continue&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Customer&lt;\\\/strong&gt; step, the user provides contact and address details and selects the &lt;strong&gt;Continue&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;In the &lt;strong&gt;Summary&lt;\\\/strong&gt; step, the user reviews all the details before generating the link. Note, that once created you will no longer be able to change the details of the payment link. To complete the process and generate the link, the user selects the &lt;strong&gt;Create payment link&lt;\\\/strong&gt; button.&lt;\\\/li&gt;\\n&lt;li&gt;A confirmation screen appears to indicate the payment link has been created. At this point the user can copy the payment link to share the URL with the shopper, or they can select &lt;strong&gt;Show details&lt;\\\/strong&gt; to view the details.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Payment links created through this component are visible and accessible in both the component&#039;s list view and the &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Customer Area&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;div id=\\&quot;tabhi7oj65447\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;65447&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Initiate&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-initiate.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-initiate.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;initiate&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-payment-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-payment-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Customer details&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-customer-details.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-customer-details.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;shopper-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Review summary&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-review-summary.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-review-summary.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;review-summary&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Share &amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-share.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/create-a-link\\\\\\\/pay-by-link-share.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;confirm-share&amp;quot;,&amp;quot;oldTabId&amp;quot;: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;9be2110a2fbb8fcdf8ea708f40f097d0&quot;:&quot;&lt;h2&gt;Terms and theme settings&lt;\\\/h2&gt;\\n&lt;p&gt;The settings area of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component is where your users must complete the initial requirements and can optionally customize the shopper&#039;s payment experience.&lt;\\\/p&gt;\\n&lt;p&gt;The settings menu contains two items that are managed per store: &lt;strong&gt;Themes&lt;\\\/strong&gt; and &lt;strong&gt;Terms and conditions&lt;\\\/strong&gt;. For each store selected, the your user can set or edit the following items:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Terms and conditions&lt;\\\/strong&gt;: Your users must provide a terms and conditions URL that satisfies all the &lt;a href=\\&quot;\\\/unified-commerce\\\/pay-by-link#terms-and-conditions-requirements\\&quot;&gt;required information&lt;\\\/a&gt;. This step is required before your users can create their first payment link, as consumer law and scheme regulations require your users to inform shoppers of the applicable terms. Only one terms and conditions URL is allowed per store.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Themes&lt;\\\/strong&gt;: Your users can set a theme and customize the appearance of the payment page that shoppers see, which includes configuring a brand name and uploading a logo. Your users are limited to two logo options: Full-width and standard logo, both with specified constraints. Only one theme is allowed per store.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n\\n&lt;div id=\\&quot;tabFaohM12338\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;12338&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Terms and conditions&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-terms-conditions.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-terms-conditions.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;pay-back-link-terms-conditions&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Themes&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;p&amp;gt;&amp;lt;a rel=\\\\&amp;quot;lightbox\\\\&amp;quot; href=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-themes.png\\\\&amp;quot; src=\\\\&amp;quot;\\\\&amp;quot;&amp;gt;\\\\n  &amp;lt;img alt=\\\\&amp;quot;\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/pages\\\\\\\/filters\\\\\\\/pe-components-dashboards\\\\\\\/pay-by-link\\\\\\\/1-10-0\\\\\\\/configure-settings\\\\\\\/pay-by-link-themes.png\\\\&amp;quot; \\\\\\\/&amp;gt;\\\\n&amp;lt;\\\\\\\/a&amp;gt;&amp;lt;\\\\\\\/p&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-by-link-themes&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;15078df03fb68d31cb4305cb05a2f19c&quot;:&quot;&lt;h2&gt;How it works&lt;\\\/h2&gt;\\n&lt;p&gt;The integration of components involves both server-side and client-side processes. You can find more details on the &lt;a href=\\&quot;#see-also\\&quot;&gt;component libraries&lt;\\\/a&gt; page.&lt;\\\/p&gt;\\n&lt;h3&gt;Integration steps&lt;\\\/h3&gt;\\n&lt;p&gt;Follow these steps to integrate the component(s):&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#create-token\\&quot;&gt;Create an authentication session from your server&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#install-library\\&quot;&gt;Install component library in your front end&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#initialize-components\\&quot;&gt;Initialize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#localize-components\\&quot;&gt;Optional: Localize components&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;&lt;a href=\\&quot;#customize-appearance\\&quot;&gt;Optional: Customize component appearance&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;a8fdcc22c1bf071d3f005f5181392d25&quot;:&quot;&lt;h2 id=\\&quot;create-token\\&quot;&gt;1. Create an authentication session from your server&lt;\\\/h2&gt;\\n&lt;p&gt;To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;From your server, make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/sessions&lt;\\\/a&gt; request specifying the following parameters:&lt;\\\/p&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;To make this API request, your API key must have the &lt;strong&gt;Pay By Link Component: View&lt;\\\/strong&gt; role in your Customer Area. For more information, refer to the &lt;a href=\\&quot;#requirements\\&quot;&gt;Requirements&lt;\\\/a&gt; section.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: center;\\&quot;&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-allowOrigin\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;allowOrigin&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL where the component will appear. &lt;\\\/br&gt;Must follow the format of &lt;code&gt;https:\\\/\\\/www.yourcompany.com&lt;\\\/code&gt; or &lt;code&gt;https:\\\/\\\/*.yourcompany.com&lt;\\\/code&gt;, where &lt;code&gt;yourcompany.com&lt;\\\/code&gt; is the actual web address of your marketplace.&lt;\\\/br&gt;On live, only the HTTPS protocol is supported.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;policy&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;An object that contains: &lt;ul&gt;&lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;resources&lt;\\\/a&gt;: An object that contains: &lt;ul&gt;&lt;li&gt;&lt;code&gt;accountHolderId&lt;\\\/code&gt;: The unique identifier of the account holder that is linked to the stores and associated with the payment links in the component.&lt;\\\/li&gt; &lt;li&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-policy-resources-type\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;type&lt;\\\/a&gt;: The type of resource. Set this to &lt;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 roles required to use the component: &lt;br&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: View&lt;\\\/strong&gt; to enable users to view payment links only.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: View PII&lt;\\\/strong&gt; to enable users to view Personally Identifiable Information (PII).&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: Manage Links&lt;\\\/strong&gt; role to allow the user to view, create, and deactivate payment links.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;ul&gt;&lt;li&gt;Include the &lt;strong&gt;Pay By Link Component: Manage Settings&lt;\\\/strong&gt; role to grant the user full administrative control over component configuration, themes, and settings.&lt;\\\/li&gt; &lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/sessionauthentication\\\/latest\\\/post\\\/sessions#request-product\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;product&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: center;\\&quot;&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The type of product the component belongs to. Set this to &lt;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;Pay By Link Component: View\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Pay By Link Component: View PII\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Pay By Link Component: Manage Links\\\\&amp;quot;,\\\\n        \\\\&amp;quot;Pay By Link Component: Manage Settings\\\\&amp;quot;\\\\n      ]\\\\n   }\\\\n}&#039;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Note the API response. Later, when &lt;a href=\\&quot;#initialize-components\\&quot;&gt;initializing the components&lt;\\\/a&gt;, you need to create and call a function that passes the entire session object from the response to your front end.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Session token created&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;EC1234-1234-1234-1234\\\\\\&quot;,\\\\n  \\\\\\&quot;token\\\\\\&quot;: \\\\\\&quot;xxxxx.yyyyy.zzzzzz\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;0cbdac49c0c899a4eb1e4b48d46b8429&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;tabYcMp379858\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;79858&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;87e69599dbc6a7b0cd7e25698e357eb4&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;tabT14VH69985\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69985&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of payment links shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;span translate=\\\\&amp;quot;no\\\\&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;&amp;lt;\\\\\\\/span&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the payment link ID when the user selects a specific payment link from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Payment Link Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Payment Links Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of payment links shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the payment link.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Select the tab for the feature you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabgkwJ869985\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69985&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fieldsConfig&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;A configuration object used to prefill the payment link form and control field visibility. See &amp;lt;a href=\\\\&amp;quot;#prefill-data\\\\&amp;quot;&amp;gt;details below&amp;lt;\\\\\\\/a&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onPaymentLinkCreated&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, this event triggers upon the successful creation of a payment link by the user, providing the complete payment link details along with the unique payment link ID. The obtained ID value can be used to send an email to the shopper or show details in a different location within your portal&amp;#039;s UI.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Select the tab for the component you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabhMgSp69985\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69985&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-links-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-link-details-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Select the tab for the feature you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabRtNEJ69985\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69985&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-link-creation-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-link-settings-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both &lt;strong&gt;Pay by Link&lt;\\\/strong&gt; components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific payment link from the overview page, the payment link ID is automatically passed to the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Select the tab for the component you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabH1l0D69985\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69985&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinksOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst paymentLinksOverview = new PaymentLinksOverview({ core });\\\\\\\\n\\\\\\\\npaymentLinksOverview.mount(&amp;#039;#payment-links-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinkDetails } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst paymentLinkDetails = new PaymentLinkDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkDetails.mount(&amp;#039;#payment-link-details-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Select the tab for the feature you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabZBoSF69985\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;69985&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Payment Link creation&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinkCreation } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst paymentLinkCreation = new PaymentLinkCreation({\\\\\\\\n    core,\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkCreation.mount(&amp;#039;#payment-link-creation-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Payment Link settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinkSettings } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst paymentLinkSettings = new PaymentLinkSettings({\\\\\\\\n    core,\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkSettings.mount(&amp;#039;#payment-link-settings-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const paymentLinksOverview = new PaymentLinksOverview({\\\\n      core,\\\\n      onRecordSelection: ({ id }) =&amp;gt; {\\\\n             \\\\\\\/\\\\\\\/ Use selected payment link id.\\\\n      }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const paymentLinkDetails = new PaymentLinkDetails({\\\\n      core,\\\\n      id: &#039;&amp;lt;SELECTED_PaymentLink_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;5484b6d3e0eccb591cc08999a3705ef3&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;Update your code for initializing components to include the localization settings. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Localize components&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenPlatformExperience, es_ES, nl_NL, fr_FR, all_locales } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\n\\\\\\\/\\\\\\\/ ...\\\\n\\\\n\\\\\\\/\\\\\\\/ Only selected languages are available\\\\nconst core = await AdyenPlatformExperience({\\\\n    availableTranslations: [es_ES, nl_NL, fr_FR],\\\\n    locale: &#039;es-ES&#039;, \\\\\\\/\\\\\\\/ You can also set this to nl-NL, fr-FR, or en-US (default)\\\\n    \\\\\\\/\\\\\\\/ ....\\\\n})\\\\n\\\\n\\\\\\\/\\\\\\\/ All supported languages are available\\\\nconst core = await AdyenPlatformExperience({\\\\n    availableTranslations: [all_locales],\\\\n    locale: &#039;es_ES&#039; \\\\\\\/\\\\\\\/ You can also set this to any of the supported languages\\\\n    \\\\\\\/\\\\\\\/ ....\\\\n})&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;&quot;,&quot;9125c0197f0fddfbf5f683d72806c6ab&quot;:&quot;&lt;h2 id=\\&quot;customize-appearance\\&quot;&gt;5. Optional: Customize component appearance&lt;\\\/h2&gt;\\n&lt;p&gt;The pay-by-link components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables and the class settings:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Inspect the components using your browser&#039;s developer tools.&lt;\\\/li&gt;\\n&lt;li&gt;Modify the styles in your style sheet file.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;p&gt;The following tabs show examples of how to style the components. The first example shows how to override predefined CSS variables to use different colors and values. The second example demonstrates how to update the CSS class setting to change the layout of the modal window from a pop-up window to a side panel view.&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabRBLSp54448\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;54448&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;1ada8010a1e26f91812efd6b56bd7658&quot;:&quot;&lt;h2 id=\\&quot;prefill-data\\&quot;&gt;6. Optional: Pre-populate component data&lt;\\\/h2&gt;\\n&lt;p&gt;The &lt;code&gt;fieldsConfig&lt;\\\/code&gt; object allows you to pre-populate the payment link creation form, set fields to a &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;readOnly&lt;\\\/strong&gt;&lt;\\\/span&gt; state to restrict user editing, and control the visibility of individual fields.&lt;\\\/p&gt;\\n&lt;p&gt;The object accepts two optional parameters:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Parameter&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;data&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Contains the values used to pre-populate any subset of supported fields.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;visibility&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Sets field behavior to either &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;readOnly&lt;\\\/strong&gt;&lt;\\\/span&gt; (visible but locked) or &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;hidden&lt;\\\/strong&gt;&lt;\\\/span&gt; (removed from the UI, but still validated). If a key is missing from the &lt;code&gt;visibility&lt;\\\/code&gt; object, the field defaults to an editable state.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;Use the following structure to define your &lt;code&gt;fieldsConfig&lt;\\\/code&gt; object:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Initial structure&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;\\\\n{\\\\n \\\\\\&quot;data\\\\\\&quot;: {\\\\n   \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;shopper@example.com\\\\\\&quot;,\\\\n   \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;+31 0690758074\\\\\\&quot;\\\\n },\\\\n \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n   \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n   \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;\\\\n }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h3&gt;Targetable fields and subfields&lt;\\\/h3&gt;\\n&lt;p&gt;The following example shows the object structure and all fields available for pre-population or restriction within &lt;code&gt;fieldsConfig&lt;\\\/code&gt;. You can target top-level fields or specific sub-fields. To do this, see &lt;a href=\\&quot;#field-visibility-settings-notation\\&quot;&gt;Field visibility settings notation&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Targetable fields and subfields&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;data\\\\\\&quot;: {\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n      \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;, \\\\\\\/\\\\\\\/ Three letter currency code\\\\n      \\\\\\&quot;value\\\\\\&quot;: 10000 \\\\\\\/\\\\\\\/ 100 EUR with 2 decimals\\\\n    },\\\\n    \\\\\\&quot;deliveryAddress\\\\\\&quot;: {\\\\n      \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Amsterdam\\\\\\&quot;,\\\\n      \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;NL\\\\\\&quot;, \\\\\\\/\\\\\\\/ Two letter country code (ISO 3166-1 alpha-2)\\\\n      \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;136\\\\\\&quot;,\\\\n      \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;1011DJ\\\\\\&quot;,\\\\n      \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;Simon Carmiggeltstraat\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;billingAddress\\\\\\&quot;: {\\\\n      \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Medellin\\\\\\&quot;,\\\\n      \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;CO\\\\\\&quot;, \\\\\\\/\\\\\\\/ Two letter country code (ISO 3166-1 alpha-2)\\\\n      \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;201\\\\\\&quot;,\\\\n      \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;05001\\\\\\&quot;,\\\\n      \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;Calle 25 #34-12\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;description\\\\\\&quot;: \\\\\\&quot;This is a test description\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;MER-000001\\\\\\&quot;, \\\\\\\/\\\\\\\/ Merchant Reference\\\\n    \\\\\\&quot;deliverAt\\\\\\&quot;: \\\\\\&quot;2025-12-09T11:39:24.458Z\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;shopper@example.com\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperLocale\\\\\\&quot;: \\\\\\&quot;en-US\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;SHP-000001\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperName\\\\\\&quot;: {\\\\n      \\\\\\&quot;firstName\\\\\\&quot;: \\\\\\&quot;John\\\\\\&quot;,\\\\n      \\\\\\&quot;lastName\\\\\\&quot;: \\\\\\&quot;Doe\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;countryCode\\\\\\&quot;: \\\\\\&quot;ES\\\\\\&quot;, \\\\\\\/\\\\\\\/ Two letter country code (ISO 3166-1 alpha-2)\\\\n    \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;+31 0690758074\\\\\\&quot;, \\\\\\\/\\\\\\\/ Format: +&amp;lt;country code&amp;gt; &amp;lt;phone number&amp;gt;\\\\n    \\\\\\&quot;linkValidity\\\\\\&quot;: {\\\\n      \\\\\\&quot;durationUnit\\\\\\&quot;: \\\\\\&quot;week\\\\\\&quot;, \\\\\\\/\\\\\\\/ minute, hour, day, week\\\\n      \\\\\\&quot;quantity\\\\\\&quot;: 3\\\\n    }\\\\n  },\\\\n  \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n      \\\\\\&quot;value\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;deliveryAddress\\\\\\&quot;: {\\\\n      \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n    },\\\\n    \\\\\\&quot;billingAddress\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;description\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;deliverAt\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperEmail\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperLocale\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;shopperName\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;,\\\\n    \\\\\\&quot;countryCode\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n    \\\\\\&quot;linkValidity\\\\\\&quot;: {\\\\n      \\\\\\&quot;durationUnit\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n      \\\\\\&quot;quantity\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n    }\\\\n  }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h3&gt;Field requirements and constraints&lt;\\\/h3&gt;\\n&lt;p&gt;When pre-populating data, ensure that you follow these specific formats:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Fields&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: right;\\&quot;&gt;Type&lt;\\\/th&gt;\\n&lt;th&gt;&lt;div style=\\&quot;width:120%\\&quot;&gt;Description&lt;\\\/div&gt;&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;currency&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The three-character &lt;a href=\\&quot;\\\/development-resources\\\/currency-codes#currency-codes\\&quot;&gt;ISO currency code&lt;\\\/a&gt; of the amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;value&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The numeric value of the amount, in &lt;a href=\\&quot;\\\/development-resources\\\/currency-codes#minor-units\\&quot;&gt;minor units&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;country&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The two-letter country code, in &lt;a href=\\&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/ISO_3166-1_alpha-2\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 3166-1 alpha-2&lt;\\\/a&gt; format. Used in &lt;code&gt;billingAddress&lt;\\\/code&gt; and &lt;code&gt;deliveryAddress&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;deliverAt&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The date and time when the purchased goods should be delivered.&lt;br&gt; &lt;a href=\\&quot;https:\\\/\\\/www.w3.org\\\/TR\\\/NOTE-datetime\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;ISO 8601&lt;\\\/a&gt; format: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;YYYY-MM-DDThh:mm:ss+TZD&lt;\\\/strong&gt;&lt;\\\/span&gt;, for example, 2020-12-18T10:15:30+01:00.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;shopperLocale&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The combination of a language code and a country code to specify the &lt;a href=\\&quot;\\\/unified-commerce\\\/pay-by-link\\\/create-payment-links\\\/api#language\\&quot;&gt;language&lt;\\\/a&gt; to be used.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;telephoneNumber&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The shopper&#039;s telephone number. Must include a \\&quot;+\\&quot; prefix, country code, and a space before the number (for example, +31 0690758074).&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;durationUnit&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The duration of the payment link validity. Possible values: &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;minute&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;hour&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;day&lt;\\\/strong&gt;&lt;\\\/span&gt;, &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;week&lt;\\\/strong&gt;&lt;\\\/span&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;quantity&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;integer&lt;\\\/td&gt;\\n&lt;td&gt;The numerical value of the duration of the payment link validity, in terms of the defined &lt;code&gt;durationUnit&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;reference&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The reference to uniquely identify your user.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;shopperReference&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: right;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td&gt;The reference to uniquely identify this shopper.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h3&gt;Field visibility settings notation&lt;\\\/h3&gt;\\n&lt;p&gt;When setting the visibility of fields, you can either apply a rule to a top-level field (which affects all its nested properties) or target specific sub-fields individually.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Notation&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Usage&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Example&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;string&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Applies one rule to an entire top-level field (fieldset).&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;\\&quot;billingAddress\\&quot;: \\&quot;readOnly\\&quot;&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;object&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Applies different rules per individual sub-field.&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;code&gt;\\&quot;billingAddress\\&quot;: { \\&quot;city\\&quot;: \\&quot;readOnly\\&quot; }&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;div class=\\&quot;notices green\\&quot;&gt;\\n&lt;p&gt;Individual address fields cannot be set to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;hidden&lt;\\\/strong&gt;&lt;\\\/span&gt;. This rule must be applied to the entire fieldset (for example, &lt;code&gt;billingAddress&lt;\\\/code&gt; or &lt;code&gt;deliveryAddress&lt;\\\/code&gt;). This restriction exists because if any field within an address fieldset is populated, all other fields are also required to have a value for validation.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;Common use cases&lt;\\\/h4&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Use case&lt;\\\/th&gt;\\n&lt;th&gt;Data&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Visibility\\\/State&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Pre-populate shopper details, allow edits.&lt;\\\/td&gt;\\n&lt;td&gt;Provide values for specific fields, for example &lt;code&gt;shopperEmail&lt;\\\/code&gt;).&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Omit the field or object.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Pre-populate and lock addresses.&lt;\\\/td&gt;\\n&lt;td&gt;Provide values, for example &lt;code&gt;billingAddress&lt;\\\/code&gt; or &lt;code&gt;deliveryAddress&lt;\\\/code&gt;. In this case, provide all required sub-fields for &lt;code&gt;billingAddress&lt;\\\/code&gt; or &lt;code&gt;deliveryAddress&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Set to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;readOnly&lt;\\\/strong&gt;&lt;\\\/span&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Hide optional sections.&lt;\\\/td&gt;\\n&lt;td&gt;Provide values for the field for required for validation.&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Set the specific object or field to &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;hidden&lt;\\\/strong&gt;&lt;\\\/span&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h4&gt;Example configurations&lt;\\\/h4&gt;\\n&lt;p&gt;This example shows how to pre-populate an address, transaction amount, and phone number, while you lock the address and hide the &lt;code&gt;shopperReference&lt;\\\/code&gt; field.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Pre-populate and lock billing data&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;\\\\n{\\\\n \\\\\\&quot;data\\\\\\&quot;: {\\\\n   \\\\\\&quot;billingAddress\\\\\\&quot;: {\\\\n     \\\\\\&quot;city\\\\\\&quot;: \\\\\\&quot;Amsterdam\\\\\\&quot;,\\\\n     \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;NL\\\\\\&quot;,\\\\n     \\\\\\&quot;houseNumberOrName\\\\\\&quot;: \\\\\\&quot;136\\\\\\&quot;,\\\\n     \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;1011DJ\\\\\\&quot;,\\\\n     \\\\\\&quot;street\\\\\\&quot;: \\\\\\&quot;Simon Carmiggeltstraat\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;amount\\\\\\&quot;: {\\\\n     \\\\\\&quot;value\\\\\\&quot;: 12500,\\\\n     \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;telephoneNumber\\\\\\&quot;: \\\\\\&quot;+31 0690758074\\\\\\&quot;,\\\\n   \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;SHP-000001\\\\\\&quot;\\\\n },\\\\n \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n   \\\\\\&quot;billingAddress\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n   \\\\\\&quot;amount\\\\\\&quot;: {\\\\n     \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;shopperReference\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;\\\\n }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;This example shows how to lock specific fields. Note that individual address sub-fields remain &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;readOnly&lt;\\\/strong&gt;&lt;\\\/span&gt; per the validation requirements.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Mixed visibility on nested fields&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;\\\\n{\\\\n \\\\\\&quot;visibility\\\\\\&quot;: {\\\\n   \\\\\\&quot;deliveryAddress\\\\\\&quot;: {\\\\n     \\\\\\&quot;country\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;,\\\\n     \\\\\\&quot;postalCode\\\\\\&quot;: \\\\\\&quot;readOnly\\\\\\&quot;\\\\n   },\\\\n   \\\\\\&quot;linkValidity\\\\\\&quot;: \\\\\\&quot;hidden\\\\\\&quot;\\\\n }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;Usage tips&lt;\\\/h4&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;strong&gt;Pre-populate locked fields&lt;\\\/strong&gt;: A read-only input without data is confusing. Always provide values for locked fields.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Hidden are not optional&lt;\\\/strong&gt;: Validation still runs on &lt;span translate=\\&quot;no\\&quot;&gt;&lt;strong&gt;hidden&lt;\\\/strong&gt;&lt;\\\/span&gt; fields. You must provide valid values via &lt;code&gt;data&lt;\\\/code&gt; for any required fields you hide.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;strong&gt;Match compliance policies&lt;\\\/strong&gt;: Hide or lock fields that must not be edited based on your specific compliance requirements.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&quot;,&quot;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;62d0d8a4ae392d4c1bd37dbce2285bfd&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;tabk5gVK72666\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;72666&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;allowLimitSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;Determines whether the user can change the number of payment links shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;true&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onRecordSelection&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, the event allows obtaining the payment link ID when the user selects a specific payment link from any tab of the overview.&amp;lt;br&amp;gt;You can use the obtained ID value to show the &amp;lt;strong&amp;gt;Payment Link Details&amp;lt;\\\\\\\/strong&amp;gt; component in a different location within your portal&amp;#039;s UI, outside the &amp;lt;strong&amp;gt;Payment Links Overview&amp;lt;\\\\\\\/strong&amp;gt; component.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;preferredLimit&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The number of payment links shown per page.&amp;lt;br&amp;gt;Default value: &amp;lt;strong&amp;gt;10&amp;lt;\\\\\\\/strong&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;id&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The unique identifier of the payment link.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Select the tab for the feature you want to use:&lt;\\\/p&gt;\\n\\n&lt;div id=\\&quot;tabqePJ872666\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;72666&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;fieldsConfig&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;A configuration object used to prefill the payment link form and control field visibility. See &amp;lt;a href=\\\\&amp;quot;#prefill-data\\\\&amp;quot;&amp;gt;details below&amp;lt;\\\\\\\/a&amp;gt;.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;onPaymentLinkCreated&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;If defined, this event triggers upon the successful creation of a payment link by the user, providing the complete payment link details along with the unique payment link ID. The obtained ID value can be used to send an email to the shopper or show details in a different location within your portal&amp;#039;s UI.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;table&amp;gt;\\\\n&amp;lt;thead&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;th&amp;gt;Parameter&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;Required&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;th&amp;gt;&amp;lt;div style=\\\\&amp;quot;width:120%\\\\&amp;quot;&amp;gt;Description&amp;lt;\\\\\\\/div&amp;gt;&amp;lt;\\\\\\\/th&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/thead&amp;gt;\\\\n&amp;lt;tbody&amp;gt;\\\\n&amp;lt;tr&amp;gt;\\\\n&amp;lt;td&amp;gt;&amp;lt;code&amp;gt;core&amp;lt;\\\\\\\/code&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td style=\\\\&amp;quot;text-align: center;\\\\&amp;quot;&amp;gt;&amp;lt;img title=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; alt=\\\\&amp;quot;-white_check_mark-\\\\&amp;quot; class=\\\\&amp;quot;smileys\\\\&amp;quot; src=\\\\&amp;quot;\\\\\\\/user\\\\\\\/data\\\\\\\/smileys\\\\\\\/emoji\\\\\\\/white_check_mark.png\\\\&amp;quot; \\\\\\\/&amp;gt;&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;td&amp;gt;The instance of the library.&amp;lt;\\\\\\\/td&amp;gt;\\\\n&amp;lt;\\\\\\\/tr&amp;gt;\\\\n&amp;lt;\\\\\\\/tbody&amp;gt;\\\\n&amp;lt;\\\\\\\/table&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Create a DOM element on your portal&#039;s UI page where you want the component to be rendered.&lt;\\\/p&gt;\\n&lt;p&gt;Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your portal&#039;s UI.&lt;\\\/p&gt;\\n&lt;p&gt;By default, the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component is shown as a modal window within the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component. In this scenario, you only need to create a DOM element for the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component. If you want to use the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component on its own, you need to create a separate DOM element for it.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Select the tab for the component you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tab6Hso472666\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;72666&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-links-overview-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-link-details-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Select the tab for the feature you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabkBRbm72666\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;72666&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-link-creation-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Create DOM element&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=&amp;#039;[{\\\\&amp;quot;language\\\\&amp;quot;:\\\\&amp;quot;html\\\\&amp;quot;,\\\\&amp;quot;tabTitle\\\\&amp;quot;:\\\\&amp;quot;\\\\&amp;quot;,\\\\&amp;quot;content\\\\&amp;quot;:\\\\&amp;quot;&amp;amp;lt;div id=\\\\\\\\\\\\&amp;quot;payment-link-settings-container\\\\\\\\\\\\&amp;quot;&amp;amp;gt;&amp;amp;lt;\\\\\\\\\\\\\\\/div&amp;amp;gt;\\\\&amp;quot;}]&amp;#039; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Add a function that &lt;a href=\\&quot;#create-token\\&quot;&gt;calls your API&lt;\\\/a&gt; to retrieve and refresh an authentication session token.&lt;\\\/p&gt;\\n&lt;p&gt;The following code is the same for both &lt;strong&gt;Pay by Link&lt;\\\/strong&gt; components.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Add function to retrieve and refresh an authentication session token&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;async function handleSessionCreate() {\\\\n   const response = await fetch(&#039;YOUR_IMPLEMENTATION_OF_CREATE_SESSION_ENDPOINT&#039;);\\\\n   return response.json();\\\\n}&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Initialize the component and mount it to the container you created.&lt;\\\/p&gt;\\n&lt;p&gt;Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.&lt;\\\/p&gt;\\n&lt;p&gt;To implement the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component as a modal window within the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component, use the following code examples. In this implementation, when a user selects a specific payment link from the overview page, the payment link ID is automatically passed to the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component, and the modal window opens.&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Select the tab for the component you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;tabZmoeF72666\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;72666&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Links Overview component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinksOverview } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\nconst paymentLinksOverview = new PaymentLinksOverview({ core });\\\\\\\\n\\\\\\\\npaymentLinksOverview.mount(&amp;#039;#payment-links-overview-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-links-overview&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-links-overview&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link Details component&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Initialize library and create component&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinkDetails } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst paymentLinkDetails = new PaymentLinkDetails({\\\\\\\\n    core,\\\\\\\\n    id: &amp;#039;ABCDEFG1234567890&amp;#039;\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkDetails.mount(&amp;#039;#payment-link-details-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-details&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-details&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Select the tab for the feature you want to use:&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n\\n&lt;div id=\\&quot;taboW74Z72666\\&quot;&gt;\\n    &lt;div data-component-wrapper=\\&quot;tabs\\&quot;&gt;\\n        &lt;tabs\\n             :id=\\&quot;&amp;quot;72666&amp;quot;\\&quot;             :items=\\&quot;[{&amp;quot;title&amp;quot;:&amp;quot;Payment Link creation&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Payment Link creation&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinkCreation } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst paymentLinkCreation = new PaymentLinkCreation({\\\\\\\\n    core,\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkCreation.mount(&amp;#039;#payment-link-creation-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-creation&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-creation&amp;quot;},{&amp;quot;title&amp;quot;:&amp;quot;Payment Link settings&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;\\\\n&amp;lt;div data-component-wrapper=\\\\&amp;quot;code-sample\\\\&amp;quot;&amp;gt;\\\\n&amp;lt;code-sample :title=\\\\&amp;quot;&amp;#039;Payment Link settings&amp;#039;\\\\&amp;quot; :id=\\\\&amp;quot;&amp;#039;&amp;#039;\\\\&amp;quot; :code-data=\\\\&amp;quot;[{&amp;amp;quot;language&amp;amp;quot;:&amp;amp;quot;javascript&amp;amp;quot;,&amp;amp;quot;tabTitle&amp;amp;quot;:&amp;amp;quot;&amp;amp;quot;,&amp;amp;quot;content&amp;amp;quot;:&amp;amp;quot;import { AdyenPlatformExperience, PaymentLinkSettings } from &amp;#039;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web&amp;#039;;\\\\\\\\nimport \\\\\\\\&amp;amp;quot;@adyen\\\\\\\\\\\\\\\/adyen-platform-experience-web\\\\\\\\\\\\\\\/adyen-platform-experience-web.css\\\\\\\\&amp;amp;quot;;\\\\\\\\n\\\\\\\\nconst core = await AdyenPlatformExperience({\\\\\\\\n    onSessionCreate: handleSessionCreate,\\\\\\\\n});\\\\\\\\n\\\\\\\\nconst paymentLinkSettings = new PaymentLinkSettings({\\\\\\\\n    core,\\\\\\\\n});\\\\\\\\n\\\\\\\\nPaymentLinkSettings.mount(&amp;#039;#payment-link-settings-container&amp;#039;);&amp;amp;quot;}]\\\\&amp;quot; :enable-copy-link-to-code-block=\\\\&amp;quot;true\\\\&amp;quot; :code-sample-card-size=\\\\&amp;quot;&amp;#039;fullsize&amp;#039;\\\\&amp;quot;&amp;gt;&amp;lt;\\\\\\\/code-sample&amp;gt;\\\\n&amp;lt;\\\\\\\/div&amp;gt;\\\\n&amp;quot;,&amp;quot;altTitle&amp;quot;:&amp;quot;payment-link-settings&amp;quot;,&amp;quot;oldTabId&amp;quot;:1,&amp;quot;relation&amp;quot;:&amp;quot;payment-link-settings&amp;quot;}]\\&quot;\\n            :should-update-when-url-changes=&#039;true&#039;&gt;\\n        &lt;\\\/tabs&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;(Optional) To use the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component outside of the &lt;strong&gt;Payment Links Overview&lt;\\\/strong&gt; component:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Define the &lt;code&gt;onRecordSelection&lt;\\\/code&gt; callback.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Define onRecordSelection callback&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const paymentLinksOverview = new PaymentLinksOverview({\\\\n      core,\\\\n      onRecordSelection: ({ id }) =&amp;gt; {\\\\n             \\\\\\\/\\\\\\\/ Use selected payment link id.\\\\n      }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;ol start=\\&quot;2\\&quot;&gt;\\n&lt;li&gt;Initialize the &lt;strong&gt;Payment Link Details&lt;\\\/strong&gt; component using the &lt;code&gt;id&lt;\\\/code&gt; from the object argument as shown below.&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Link to the selected record&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const paymentLinkDetails = new PaymentLinkDetails({\\\\n      core,\\\\n      id: &#039;&amp;lt;SELECTED_PaymentLink_ID&amp;gt;&#039;\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;&quot;,&quot;ad41301fc4d46a0b343218d50381de27&quot;:&quot;&lt;h2 id=\\&quot;localize-components\\&quot;&gt;4. Optional: Localize components&lt;\\\/h2&gt;\\n&lt;p&gt;During the &lt;a href=\\&quot;#initialize-components\\&quot;&gt;component initialization&lt;\\\/a&gt;, you can also configure the components to use one of the &lt;a href=\\&quot;#supported-languages\\&quot;&gt;supported languages&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;p&gt;Update your code for initializing components to include the localization settings. If no localization settings are provided, the components will default to English.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Localize components&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenPlatformExperience } from &#039;@adyen\\\\\\\/adyen-platform-experience-web&#039;;\\\\n\\\\nconst core = await AdyenPlatformExperience({\\\\n    locale: &#039;es-ES&#039;, \\\\\\\/\\\\\\\/ See supported languages for possible values\\\\n    \\\\\\\/* ... *\\\\\\\/\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;&quot;}}}}}}\"\n        query-param-tab=\"component\"\n        query-param-box=\"integration\"\n        query-param-dropdown=\"version\">\n    <\/in-page-filtering>\n<\/div>\n<div class=\"version_docs__image-placeholder u-display-none\">\n    <\/div>\n\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/platforms\/components-overview\"\n                        target=\"_self\"\n                        >\n                    Component libraries\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/platforms\/components-overview\/after-payment\/pay-by-link-component","articleFields":{"description":"Use Platform Experience components to build interactive dashboards for your users.","feedback_component":true,"filters_component":false,"cache_enable":false,"parameters":{"directoryPath":"\/platforms","model":"platform"}},"algolia":{"url":"https:\/\/docs.adyen.com\/platforms\/components-overview\/after-payment\/pay-by-link-component","title":"Pay by Link 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 Pay by Link components enable payment link management within a portal's user interface (UI) with minimal engineering effort. These components integrate all the features required to create, monitor, and share payment links without making multiple API requests. This removes the need to implement complex API calls to track link status, handle expiration logic, or manage branding configurations, as the components handle these processes automatically.\nAdditionally, the components provide greater flexibility for data customization. These components can be customized with your own custom fields, icons, links, and buttons, allowing the UI to align with your specific business needs.\nThis page provides guidance on:\n\nThe available Pay by Link components, which include the Pay by Link Overview component and the Pay by Link Details component.\nA standard user flow that these components cover.\nFunctionalities such as filtering for all or a specific store, managing link expiration, tracking status history, and branding customization.\n\nThe guidance and features available may differ based on the library version in use. We recommend using the latest library version to take advantage of the newest features and improvements.\nEnsure you select a version in the next section before starting your integration.\n\n    \n    \n\n\n    \n\nSee also\n\n\n                    Component libraries\n                \n","type":"page","locale":"en","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Platforms","lvl2":"Build your interface with UI component libraries","lvl3":"After payment","lvl4":"Pay by Link components"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/platforms","lvl2":"https:\/\/docs.adyen.com\/platforms\/components-overview","lvl3":"https:\/\/docs.adyen.com\/platforms\/components-overview\/after-payment","lvl4":"\/platforms\/components-overview\/after-payment\/pay-by-link-component"},"levels":5,"category":"Platforms","category_color":"green","tags":["components"]}}
