Tailwind CSS Payment Transaction Details Blocks

All Blocks
Application UI
Billing & Payments
Payment Transaction Details

Payment Transaction Details

Payment transaction detail cards for received transfers, request links, and transfer review flows across wallet, finance, and billing products.

Received Transaction Detail Card with Update Timeline and Download Action Pro

Received transaction detail card pairs an update timeline with transfer totals, recipient bank details, and a report download action.

<div class="bg-card border border-card-line rounded-2xl">
      
      <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-card-divider">
        <div class="p-5 sm:p-8">
          
          <div class="mb-3">
            <h2 class="font-medium text-sm text-foreground">
              Updates
            </h2>
          </div>

<div>
            
            <div class="group flex gap-x-3">
              
              <div class="relative group-last:after:hidden after:absolute after:top-7 after:bottom-0 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
                <div class="relative z-10 size-7 flex justify-center items-center">
                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </div>
              </div>

<div class="grow pt-1 pb-4">
                <p class="mb-1 text-sm text-muted-foreground-1">
                  24 October 2024 at 18:49
                </p>
                <p class="text-sm text-foreground">
                  You set up your transfer
                </p>
              </div>
              
            </div>

<div class="group flex gap-x-3">
              
              <div class="relative group-last:after:hidden after:absolute after:top-7 after:bottom-0 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
                <div class="relative z-10 size-7 flex justify-center items-center">
                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </div>
              </div>

<div class="grow pt-1 pb-4">
                <p class="mb-1 text-sm text-muted-foreground-1">
                  24 October 2024 at 18:50
                </p>
                <p class="text-sm text-foreground">
                  You used USD in your Preline account
                </p>
              </div>
              
            </div>

<div class="grow pt-1 pb-4">
                <p class="mb-1 text-sm text-muted-foreground-1">
                  24 October 2024 at 18:50
                </p>
                <p class="text-sm text-foreground">
                  We paid out your USD
                </p>
              </div>
              
            </div>

<div class="group flex gap-x-3">
              
              <div class="relative group-last:after:hidden after:absolute after:top-7 after:bottom-0 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
                <div class="relative z-10 size-7 flex justify-center items-center">
                  <span class="flex shrink-0 justify-center items-center size-4 rounded-full bg-emerald-500 text-foreground-inverse">
                    <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                  </span>
                </div>
              </div>

<div class="grow pt-1 pb-4">
                <p class="mb-1 text-sm text-muted-foreground-1">
                  24 October 2024 at 18:50
                </p>
                <p class="mb-1 font-medium text-foreground">
                  Payment succedded
                </p>
                <p class="text-sm text-foreground">
                  We sent <span class="font-semibold">100 USD</span> to Costa Quinn
                </p>
              </div>
              
            </div>
            
          </div>
          
        </div>

<div class="px-5 sm:px-8 relative">
          
          <div class="absolute top-3 inset-e-3">
            <div class="hs-tooltip inline-block">
              <button type="button" class="hs-tooltip-toggle inline-flex justify-center items-center gap-x-2 size-8 text-sm font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-pytfm">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>
                <span class="sr-only">Download</span>
              </button>
              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                Download report
              </span>
            </div>
          </div>

<div class="divide-y divide-dashed divide-card-divider">
            
            <div class="py-5 sm:py-8">
              
              <div class="mb-3">
                <h2 class="font-medium text-sm text-foreground">
                  Transaction details
                </h2>
              </div>

<dl class="grid grid-cols-1 sm:grid-cols-2 sm:gap-y-2 gap-x-4">
                <dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  You send:
                </dt>
                <dd class="pb-3 sm:py-0.5 font-bold text-sm text-foreground">
                  100 USD
                </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  Preline fees:
                </dt>
                <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
                  9.58 USD
                </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  Isabella received:
                </dt>
                <dd class="pb-3 sm:py-0.5 font-bold text-sm text-foreground">
                  90.42 USD
                </dd>
              </dl>
              
            </div>

<div class="py-5 sm:py-8">
              
              <div class="mb-3">
                <h2 class="font-medium text-sm text-foreground">
                  Recipient details
                </h2>
              </div>

<dl class="grid grid-cols-1 sm:grid-cols-2 sm:gap-y-2 gap-x-4">
                <dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  Account holder name:
                </dt>
                <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
                  Costa Quinn
                </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  SWIFT / BIC code:
                </dt>
                <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
                  FKU2378
                </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  IBAN / Account number:
                </dt>
                <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
                  1234567890123
                </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  Email:
                </dt>
                <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
                  costa@site.so
                </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
                  Bank name:
                </dt>
                <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
                  J.P. Morgan
                </dd>
              </dl>
              
            </div>
            
          </div>
          
        </div>
        
      </div>
      
    </div>

Payment Request Detail Card with Status Badge and Copy Link Pro

Payment request detail card presents amount, pending status, expiry, reference, copyable request link, and creation date in a compact details grid.

<div class="bg-card border border-card-line rounded-2xl">
      
      <div class="py-3 px-4 border-b border-card-header">
        <h2 class="font-medium text-foreground">
          Request
        </h2>
      </div>

<div class="p-4">
        
        <dl class="grid grid-cols-1 sm:grid-cols-2 sm:gap-y-2 gap-x-4">
          <dt class="sm:py-1 text-sm text-muted-foreground-1">
            Amount:
          </dt>
          <dd class="pb-3 sm:py-1 min-h-8 text-sm text-foreground">
            50 USD
          </dd>

<dt class="sm:py-1 text-sm text-muted-foreground-1">
            Status:
          </dt>
          <dd class="pb-3 sm:py-1 min-h-8 text-sm text-foreground">
            <span class="-ms-1 p-1 pe-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-orange-100 text-orange-800 rounded-full dark:bg-orange-500/10 dark:text-orange-500">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              Pending
            </span>
          </dd>

<dt class="sm:py-1 text-sm text-muted-foreground-1">
            Expires on:
          </dt>
          <dd class="pb-3 sm:py-1 min-h-8 text-sm text-foreground">
            4 November
          </dd>

<dt class="sm:py-1 text-sm text-muted-foreground-1">
            Reference:
          </dt>
          <dd class="pb-3 sm:py-1 min-h-8 text-sm text-foreground">
            618800
          </dd>

<dt class="sm:py-1 text-sm text-muted-foreground-1">
            Link:
          </dt>
          <dd class="pb-3 sm:py-1 min-h-8 text-sm text-foreground">
            <div class="flex items-center gap-x-2">
              <span id="hs-pro-pytdcid" class="truncate">https://preline.co/pay/r/7mY7kgn0jUeQU80</span>
          
              <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip py-1 px-2 relative flex justify-center items-center gap-x-1 bg-surface border border-surface-line font-medium text-xs rounded-full text-layer-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus"
                data-clipboard-target="#hs-pro-pytdcid"
                data-clipboard-action="copy"
                data-clipboard-success-text="Copied">
                <svg class="js-clipboard-default size-3.5 group-hover:rotate-6 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg>
                <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                <span class="js-clipboard-success-text">Copy</span>
              </button>
            </div>
          </dd>

<dt class="sm:py-1 text-sm text-muted-foreground-1">
            Created on:
          </dt>
          <dd class="pb-3 sm:py-1 min-h-8 text-sm text-foreground">
            Tuesday, 22 October
          </dd>
        </dl>
        
      </div>
      
    </div>

Transfer Review Card with Editable Transfer and Recipient Details Pro

Transfer review card stacks transfer totals and recipient banking details with inline edit actions before confirming the send flow.

<div class="p-1 flex flex-col bg-surface border border-surface-line rounded-2xl">
      
      <div class="px-5 bg-card rounded-xl shadow-2xs divide-y divide-dashed divide-card-divider">
        
        <div class="py-5">
          
          <div class="mb-3">
            <h2 class="font-medium text-sm text-foreground">
              Transfer details
            </h2>
          </div>

<dl class="grid grid-cols-1 sm:grid-cols-2 sm:gap-y-2 gap-x-4">
            <dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              You send:
            </dt>
            <dd class="pb-3 sm:py-0.5 font-bold text-sm text-foreground">
              100 EURO
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Total fees (included):
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              9.58 EURO
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Total amount we'll send:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              90.42 EURO
            </dd>

<div class="py-5">
          
          <div class="mb-3">
            <h2 class="font-medium text-sm text-foreground">
              Recipient details
            </h2>
          </div>

<dl class="grid grid-cols-1 sm:grid-cols-2 sm:gap-y-2 gap-x-4">
            <dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Account holder name:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              Isabella Cruz
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              SWIFT / BIC code:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              FKU2378
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              IBAN / Account number:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              1234567890123
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Email:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              isabella@site.so
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Bank name:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              J.P. Morgan
            </dd>
          </dl>

<p class="sm:mt-2">
            <a class="inline-block font-medium text-sm text-start text-primary underline underline-offset-4 hover:text-primary-hover focus:outline-hidden" href="../../../templates/payments/payments-dashboard/send.html">
              Change
            </a>
          </p>
        </div>

<div class="py-5">
          
          <div class="mb-3">
            <h2 class="font-medium text-sm text-foreground">
              Schedule details
            </h2>
          </div>

<dl class="grid grid-cols-1 sm:grid-cols-2 sm:gap-y-2 gap-x-4">
            <dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Sending:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              Now
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Should arrive:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              by Tuesday, 29 October
            </dd>

<dt class="sm:py-0.5 text-sm text-muted-foreground-1">
              Repeats:
            </dt>
            <dd class="pb-3 sm:py-0.5 text-sm text-foreground">
              Never
            </dd>
          </dl>
          
        </div>

<div class="py-5">
          
          <div class="mb-3">
            <h2 class="font-medium text-sm text-foreground">
              Payment method
            </h2>
          </div>

<button type="button" class=" p-3 w-full flex items-center gap-x-3 text-start bg-layer border border-layer-line rounded-xl hover:bg-layer-hover focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-pysapo" >
            <span class="flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line rounded-full">
              <svg class="shrink-0 w-5 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasf4nc3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"></path></mask><g mask="url(#asfasf4nc3)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"></path><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"></path><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"></path></g></svg>
            </span>

<span class="grow">
              <span class="block font-medium text-sm text-foreground">
                Debit card •••• 8080
              </span>
              <span class="block text-sm text-muted-foreground-1">
                Expires 12/24
              </span>
            </span>

<span>
              <span class="flex items-center gap-x-1 font-medium text-sm text-primary">
                Change
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
              </span>
            </span>
          </button>
          
        </div>
        
      </div>
      
    </div>

<div id="hs-pro-pysapo" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-pysapo-label">
      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all md:max-w-3xl md:w-full m-3 md:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
        <div class="relative w-full max-h-full overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto">
          
          <div class="py-4 px-12 text-center flex justify-center items-center border-b border-overlay-header">
            <h2 id="hs-pro-pysapo-label" class="font-medium text-foreground">
              How would you like to pay?
            </h2>

<div class="absolute top-3 inset-e-3">
              <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-pysapo">
                <span class="sr-only">Close</span>
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
              </button>
            </div>
          </div>

<div id="hs-pro-pysapo-body" class="p-5 sm:p-10 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
            <div class="max-w-xl mx-auto">
              <p class="text-muted-foreground-1">
                You are sending 100 EURO to Isabella
              </p>

<h3 class="mt-8 text-[13px] text-muted-foreground-1">
                Recently used
              </h3>

<div class="divide-y divide-line-1">
                <div class="py-1">
                  
                  <button type="button" class="p-3 group w-full flex items-center gap-x-4 text-start rounded-2xl hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover">
                    <span class="shrink-0 size-11 relative">
                      <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 w-11 h-auto rounded-full" xmlns="http://www.w3.org/2000/svg" id="usd" viewBox="0 0 512 512"><g fill-rule="evenodd"><g stroke-width="1pt"><path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/><path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/></g><path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/><path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/></g></svg>
                      </span>
                    </span>
                    <span class="grow">
                      <span class="grid md:grid-cols-2 items-center">
                        <span>
                          <span class="block font-medium text-sm text-foreground">
                            Preline USD balance
                          </span>
                          <span class="block mt-0.5 text-sm text-muted-foreground-1">
                            Available balance 45,125 USD
                          </span>
                        </span>
      
                        <span>
                          <span class="block text-sm text-muted-foreground-1">
                            Fee <span class="text-foreground">1.50 EURO</span><br>Arrives <span class="text-foreground">in seconds</span>
                          </span>
                        </span>
                      </span>
                    </span>
                    <svg class="shrink-0 size-4 ms-auto text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </button>
                  
                </div>

<div class="py-1">
                  
                  <button type="button" class="p-3 group w-full flex items-center gap-x-4 text-start rounded-2xl hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover">
                    <span class="shrink-0 size-11 relative">
                      <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 w-4 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa1009" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"></path></mask><g mask="url(#asfasfa1009)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"></path><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"></path><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"></path></g></svg>
                      </span>
                    </span>
                    <span class="grow">
                      <span class="grid md:grid-cols-2 items-center">
                        <span>
                          <span class="block font-medium text-sm text-foreground">
                            Debit card •••• 8080
                          </span>
                          <span class="block mt-0.5 text-sm text-muted-foreground-1">
                            Expires 12/24
                          </span>
                        </span>
      
                        <span>
                          <span class="block text-sm text-muted-foreground-1">
                            Fee <span class="text-foreground">9.58 EURO</span><br>Arrives <span class="text-foreground">by Tuesday, 29 October</span>
                          </span>
                        </span>
                      </span>
                    </span>
                    <svg class="shrink-0 size-4 ms-auto text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </button>
                  
                </div>
              </div>

<h3 class="mt-8 text-[13px] text-muted-foreground-1">
                Other methods
              </h3>

<div class="py-1">
                  
                  <button type="button" class="p-3 group w-full flex items-center gap-x-4 text-start rounded-2xl hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover">
                    <span class="shrink-0 size-11 relative">
                      <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>
                      </span>
                    </span>
                    <span class="grow">
                      <span class="grid md:grid-cols-2 items-center">
                        <span>
                          <span class="block font-medium text-sm text-foreground">
                            Connected bank account (ACH)
                          </span>
                        </span>
      
                        <span>
                          <span class="block text-sm text-muted-foreground-1">
                            Fee <span class="text-foreground">9.25 EURO</span><br>Arrives <span class="text-foreground">by Tuesday, 29 October</span>
                          </span>
                        </span>
                      </span>
                    </span>
                    <svg class="shrink-0 size-4 ms-auto text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </button>
                  
                </div>

<div class="py-1">
                  
                  <button type="button" class="p-3 group w-full flex items-center gap-x-4 text-start rounded-2xl hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover">
                    <span class="shrink-0 size-11 relative">
                      <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
                      </span>
                    </span>
                    <span class="grow">
                      <span class="grid md:grid-cols-2 items-center">
                        <span>
                          <span class="block font-medium text-sm text-foreground">
                            Wire transfer
                          </span>
                        </span>
      
                        <span>
                          <span class="block text-sm text-muted-foreground-1">
                            Fee <span class="text-foreground">12.93 EURO</span><br>Arrives <span class="text-foreground">by Tuesday, 29 October</span>
                          </span>
                        </span>
                      </span>
                    </span>
                    <svg class="shrink-0 size-4 ms-auto text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </button>
                  
                </div>

<div class="py-1">
                  
                  <button type="button" class="p-3 group w-full flex items-center gap-x-4 text-start rounded-2xl hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover">
                    <span class="shrink-0 size-11 relative">
                      <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
                      </span>
                    </span>
                    <span class="grow">
                      <span class="grid md:grid-cols-2 items-center">
                        <span>
                          <span class="block font-medium text-sm text-foreground">
                            SWIFT
                          </span>
                        </span>
      
                        <span>
                          <span class="block text-sm text-muted-foreground-1">
                            Fee <span class="text-foreground">12.93 EURO</span><br>Arrives <span class="text-foreground">by Friday, 1 November</span>
                          </span>
                        </span>
                      </span>
                    </span>
                    <svg class="shrink-0 size-4 ms-auto text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </button>
                  
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
    </div>

Open related payments send review page