Tailwind CSS Payment Method Forms Blocks

All Blocks
Application UI
Forms
Payment Method Forms

Payment Method Forms

Payment method forms for saved cards, new payment method entry, bank account setup, and billing details.

Saved Payment Cards Grid Pro

Responsive grid shows saved payment cards with brand icons, balances, and per-card actions.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                      
                      <div id="hs-pro-shpc1" class="p-1 min-h-52 flex flex-col bg-surface border border-surface-line rounded-2xl">
                        
                        <div class="p-4 h-full min-h-40 flex flex-col justify-between bg-layer rounded-xl shadow-2xs">
                          
                          <div class="mb-4 flex flex-wrap justify-between items-center gap-2">
                            <div class="grow">
                              <p class="font-semibold text-foreground">
                                James Collins
                              </p>
                            </div>

<span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-full border border-primary-200 bg-primary-100 text-primary-800 dark:border-primary-500/20 dark:bg-primary-500/10 dark:text-primary-500">Default</span>
                          </div>

<div class="flex items-center gap-x-3">
                            <div>
                              <div class="p-1 border border-line-2 rounded-md">
                                <svg class="shrink-0 w-6 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa112" 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(#asfasfa112)"><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>
                              </div>
                            </div>

<div class="grow">
                              <p class="text-sm text-foreground">
                                MasterCard •••• 4242
                              </p>
                              <p class="inline-flex items-center gap-x-1 text-xs text-destructive">
                                <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"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
                                Expired on 07/24
                              </p>
                            </div>
                          </div>
                          
                        </div>

<div class="mt-auto">
                          <ul class="flex flex-wrap justify-center items-center gap-3">
                            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3 after:bg-line-3 after:-translate-y-1/2">
                              <button type="button" class="py-3 font-medium text-xs text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none disabled:no-underline" data-hs-overlay="#hs-pro-shepm">
                                Edit
                              </button>
                            </li>
                            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3 after:bg-line-3 after:-translate-y-1/2">
                              <button type="button" class="py-3 font-medium text-xs text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none disabled:no-underline" disabled data-hs-remove-element="#hs-pro-shpc1">
                                Remove
                              </button>
                            </li>
                            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3 after:bg-line-3 after:-translate-y-1/2">
                              <button type="button" class="py-3 font-medium text-xs text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none disabled:no-underline" disabled>
                                Set as default
                              </button>
                            </li>
                          </ul>
                        </div>
                        
                      </div>

<button type="button" class="p-1 group min-h-52 flex flex-col justify-center items-center gap-y-2 border border-dashed border-line-3 rounded-2xl hover:border-line-4 focus:outline-hidden focus:border-line-4" data-hs-overlay="#hs-pro-shcpm">
                        <svg class="shrink-0 size-7 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                        <span class="text-sm text-foreground group-hover:text-primary-hover group-focus:text-primary-focus">
                          Add payment method
                        </span>
                      </button>
                      
                    </div>

Open related payment template

Payment Method Form with Tabs Pro

Centered payment form switches between method tabs above the card fields and submit action.

<nav  class="p-0.5 inline-flex bg-layer border border-layer-line rounded-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-muted-focus inline-flex justify-center items-center gap-x-2 text-foreground py-2 px-3 text-sm rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-pysp-item-saved-card" aria-selected="true" data-hs-tab="#hs-pro-tabs-pysp-saved-card" aria-controls="hs-pro-tabs-pysp-saved-card" role="tab" >
    Saved card
  </button>
  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-muted-focus inline-flex justify-center items-center gap-x-2 text-foreground py-2 px-3 text-sm rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pysp-item-new-card" aria-selected="false" data-hs-tab="#hs-pro-tabs-pysp-new-card" aria-controls="hs-pro-tabs-pysp-new-card" role="tab" >
    New card
  </button>
</nav>

<div class="mt-4">
  
  <div id="hs-pro-tabs-pysp-saved-card" role="tabpanel" aria-labelledby="hs-pro-tabs-pysp-item-saved-card">
    
    <div class="p-5 flex flex-col gap-y-4 sm:gap-y-6 bg-layer border border-layer-line rounded-2xl">
      
      <div class="flex gap-x-3">
        <span class="flex shrink-0 justify-center items-center size-10">
          <svg class="shrink-0 w-7 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa152" 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(#asfasfa152)"><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>

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

<div>
        <label for="hs-pro-pyspcvc" class="block mb-2 text-sm text-foreground">
          Confirm security code (CVC/CVV)
        </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
            <span class="hs-tooltip inline-block">
              <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
              </svg>
              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                Your security code is the last three digits on the back of your card.
              </span>
            </span>
          </div>
        </div>
      </div>

<p class="text-sm text-muted-foreground-1">
        Since your card is not issued in the U.S., an additional processing fee will apply. If your card is not in USD, your bank may also charge an extra fee.
      </p>
    </div>
    
  </div>

<div id="hs-pro-tabs-pysp-new-card" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pysp-item-new-card">
    
    <div class="p-5 flex flex-col gap-y-4 sm:gap-y-6 bg-layer border border-layer-line rounded-2xl">
      <div class="flex flex-col gap-y-4">
        
        <div>
          <label for="hs-pro-pyocpcn" class="block mb-2 text-sm text-foreground">
            Card number
          </label>

<div class="grid grid-cols-2 gap-4">
          
          <div>
            <label for="hs-pro-pyocpep" class="block mb-2 text-sm text-foreground">
              Expiration
            </label>

<div>
            <label for="hs-pro-pyocpcvc" class="block mb-2 text-sm text-foreground">
              CVC
            </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
                <span class="hs-tooltip inline-block">
                  <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                    <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                    <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                    <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                    <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
                  </svg>
                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                    Your security code is the last three digits on the back of your card.
                  </span>
                </span>
              </div>
            </div>
          </div>
          
        </div>

<div class="w-full flex justify-between items-center">
          <label for="hs-pro-pyocpstcffp" class="flex flex-1 text-sm text-muted-foreground-1">Save this card for future payments</label>
          <label for="hs-pro-pyocpstcffp" class="relative inline-block w-11 h-6 cursor-pointer">
            <input type="checkbox" id="hs-pro-pyocpstcffp" class="peer sr-only" checked>
            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
          </label>
        </div>
        
      </div>
    </div>
    
  </div>
  
</div>

Open related add money payment template

Add Payment Method Form Pro

Card-payment form stacks payment-type options, card inputs, and a default-method checkbox.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2  class="font-medium text-foreground">
      Add Payment
    </h2>
  </div>

<div class="p-4">
    
    <div class="mb-6 grid grid-cols-3 gap-2">
      
      <label for="hs-pro-shcpmgpr1" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
        <input type="radio" id="hs-pro-shcpmgpr1" class="hidden" value="Card" name="hs-pro-shcpmgpr" checked >
        <span class="block text-foreground">
          <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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        </span>
        <span class="block font-medium text-xs sm:text-sm text-foreground">
          Card
        </span>
      </label>

<label for="hs-pro-shcpmgpr2" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
        <input type="radio" id="hs-pro-shcpmgpr2" class="hidden" value="PayPal" name="hs-pro-shcpmgpr"  >
        <span class="block text-foreground">
          <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6424 30.9152L11.197 27.3925L9.96162 27.3639H4.06256L8.16211 1.37005C8.17431 1.29063 8.21465 1.21823 8.27577 1.16607C8.33689 1.1139 8.41472 1.08543 8.49508 1.08586H18.4417C21.7438 1.08586 24.0227 1.773 25.2124 3.12927C25.7702 3.76551 26.1255 4.43039 26.2972 5.16208C26.4775 5.92981 26.4807 6.84707 26.3047 7.9658L26.2919 8.04745V8.76429L26.8497 9.08029C27.2755 9.29602 27.6583 9.58784 27.979 9.94134C28.4562 10.4853 28.7648 11.1767 28.8952 11.9964C29.0299 12.8394 28.9854 13.8426 28.7648 14.9783C28.5103 16.2847 28.0989 17.4225 27.5432 18.3536C27.053 19.1876 26.3938 19.91 25.608 20.4744C24.8699 20.9982 23.993 21.3959 23.0015 21.6504C22.0408 21.9007 20.9454 22.0268 19.7439 22.0268H18.9698C18.4163 22.0268 17.8786 22.2262 17.4566 22.5836C17.0352 22.9447 16.7556 23.4438 16.6677 23.9918L16.6093 24.3088L15.6295 30.5175L15.585 30.7455C15.5733 30.8176 15.5532 30.8537 15.5235 30.8781C15.4947 30.9016 15.4588 30.9147 15.4217 30.9152H10.6424Z" fill="#253B80"></path><path d="M27.3778 8.13017C27.3481 8.31998 27.3142 8.51403 27.276 8.71339C25.9643 15.4481 21.4766 17.7746 15.7451 17.7746H12.8268C12.1259 17.7746 11.5352 18.2836 11.426 18.975L9.93191 28.4508L9.5088 31.1368C9.49195 31.2434 9.49838 31.3523 9.52767 31.4561C9.55695 31.5599 9.60838 31.6562 9.67842 31.7382C9.74846 31.8202 9.83545 31.8861 9.9334 31.9313C10.0313 31.9765 10.1379 31.9999 10.2458 32H15.4217C16.0346 32 16.5552 31.5546 16.6517 30.9502L16.7026 30.6872L17.6771 24.5029L17.7397 24.1636C17.8351 23.557 18.3569 23.1116 18.9698 23.1116H19.7439C24.7586 23.1116 28.6842 21.0757 29.8316 15.184C30.3109 12.7228 30.0627 10.6677 28.7945 9.22239C28.3925 8.77528 27.9124 8.40516 27.3778 8.13017Z" fill="#179BD7"></path><path d="M26.0056 7.58299C25.5868 7.46183 25.1607 7.36727 24.7299 7.29986C23.8788 7.16905 23.0185 7.10629 22.1574 7.11217H14.3612C14.0645 7.11194 13.7776 7.21787 13.5521 7.41079C13.3267 7.60372 13.1778 7.87092 13.1322 8.1641L11.4737 18.6685L11.426 18.975C11.4777 18.6406 11.6473 18.3357 11.9043 18.1155C12.1612 17.8954 12.4885 17.7744 12.8268 17.7746H15.7451C21.4766 17.7746 25.9642 15.447 27.276 8.71339C27.3152 8.51403 27.3481 8.31998 27.3778 8.13017C27.0316 7.94865 26.6709 7.79648 26.2993 7.67525C26.2019 7.64293 26.104 7.61217 26.0056 7.58299Z" fill="#222D65"></path><path d="M13.1321 8.1641C13.1773 7.87084 13.3262 7.60351 13.5517 7.41068C13.7772 7.21785 14.0644 7.11231 14.3611 7.11323H22.1573C23.0809 7.11323 23.943 7.17368 24.7298 7.30092C25.2623 7.3846 25.7874 7.50976 26.3003 7.67525C26.6874 7.80356 27.0468 7.9552 27.3787 8.13017C27.769 5.64138 27.3756 3.94685 26.0299 2.41243C24.5464 0.7232 21.8688 0 18.4427 0H8.49601C7.79614 0 7.19913 0.508997 7.09097 1.20144L2.94795 27.4625C2.92865 27.5844 2.93599 27.7091 2.96947 27.8279C3.00294 27.9467 3.06176 28.0569 3.14187 28.1508C3.22198 28.2447 3.32149 28.3202 3.43354 28.3719C3.54559 28.4237 3.66753 28.4506 3.79097 28.4508H9.93181L11.4736 18.6685L13.1321 8.1641Z" fill="#253B80"></path></svg>
        </span>
        <span class="block font-medium text-xs sm:text-sm text-foreground">
          PayPal
        </span>
      </label>

<label for="hs-pro-shcpmgpr3" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
        <input type="radio" id="hs-pro-shcpmgpr3" class="hidden" value="Klarna" name="hs-pro-shcpmgpr"  disabled>
        <span class="block text-foreground">
          <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" fill="currentColor"/></svg>
        </span>
        <span class="block font-medium text-xs sm:text-sm text-foreground">
          Klarna
        </span>
        <span class="absolute -top-2 -inset-e-2 pointer-events-none">
          <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-full border border-primary-200 bg-primary-100 text-primary-800 dark:border-primary-500/20 dark:bg-primary-900 dark:text-primary-200">Soon</span>
        </span>
      </label>
      
    </div>

<div class="space-y-4">
      
      <div class="relative">
        <label for="hs-pro-shcpmcn" class="sr-only">
          Card number
        </label>

<div class="grid grid-cols-2 gap-x-2">
        
        <div>
          <label for="hs-pro-shcpmex" class="sr-only">
            Expiration
          </label>

<div>
          <label for="hs-pro-shcpmcvc" class="sr-only">
            CVC
          </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
              <span class="hs-tooltip inline-block">
                <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                  <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                  <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                  <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                  <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
                </svg>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                  Your security code is the last three digits on the back of your card.
                </span>
              </span>
            </div>
          </div>
        </div>
        
      </div>

<div>
        <label for="hs-pro-shcpmnoc" class="sr-only">
          Name on card
        </label>

<input id="hs-pro-shcpmnoc" type="text" class="py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Name on card" >
      </div>
      
    </div>
    
    
    <div class="mt-4 flex items-center gap-x-2">
      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shcpmmdach" >
      <label for="hs-pro-shcpmmdach" class="text-sm text-muted-foreground-1">
        Set as default payment method
      </label>
    </div>
    
  </div>
  
</div>

Open related payment template

Card Details and Billing Form Pro

One billing form groups card details, address fields, a country select, and a default-card checkbox.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2  class="font-medium text-foreground">
      Add card details
    </h2>
  </div>

<div class="p-4 space-y-5">
    <div class="space-y-2">
      <div class="flex flex-wrap justify-between items-center gap-2">
        <label class="block text-sm font-medium text-foreground">
          Card details
        </label>

<div class="flex gap-x-2">
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M34.482 9a8.17 8.17 0 0 1 3.052.577l-.463 2.926-.308-.143a5.638 5.638 0 0 0-2.534-.52c-1.343 0-1.946.591-1.96 1.168 0 .635.73 1.053 1.92 1.673 1.96.966 2.868 2.148 2.855 3.69C37.016 21.184 34.692 23 31.122 23c-1.526-.015-2.996-.347-3.794-.721l.476-3.043.448.217c1.106.505 1.834.72 3.192.72.98 0 2.03-.418 2.043-1.325 0-.592-.447-1.024-1.763-1.688-1.288-.649-3.01-1.73-2.982-3.676.014-2.639 2.38-4.484 5.74-4.484ZM21.798 22.798H25.2l2.128-13.552h-3.402l-2.128 13.552Z" fill="#00579F" />
            <path clip-rule="evenodd" d="M46.255 9.246h-2.631c-.812 0-1.428.245-1.779 1.124l-5.053 12.428h3.57l.714-2.033h4.368c.098.476.406 2.033.406 2.033H49L46.255 9.246Zm-4.2 8.75 1.36-3.79c-.007.01.038-.116.104-.305.098-.28.243-.693.343-.993l.237 1.167s.645 3.244.785 3.922h-2.828Z" fill="#00579F" fill-rule="evenodd" />
            <path d="m15.624 18.487 3.332-9.241h3.598l-5.348 13.538h-3.598l-3.052-11.852c2.156 1.168 4.088 3.518 4.704 5.68l.364 1.875Z" fill="#00579F" />
            <path d="M12.53 9.246H7.056L7 9.519c4.27 1.125 7.098 3.836 8.26 7.094l-1.19-6.228c-.196-.866-.798-1.11-1.54-1.14Z" fill="#FAA61A" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M28.017 22.85A9.137 9.137 0 0 1 22.108 25C17.078 25 13 20.97 13 16s4.078-9 9.108-9c2.255 0 4.318.81 5.909 2.15A9.137 9.137 0 0 1 33.925 7c5.03 0 9.108 4.03 9.108 9s-4.078 9-9.108 9a9.137 9.137 0 0 1-5.908-2.15Z" fill="#ED0006" />
            <path d="M28.017 22.85a8.937 8.937 0 0 0 3.2-6.85c0-2.743-1.242-5.2-3.2-6.85A9.137 9.137 0 0 1 33.925 7c5.03 0 9.108 4.03 9.108 9s-4.078 9-9.108 9a9.137 9.137 0 0 1-5.908-2.15Z" fill="#F9A000" />
            <path d="M28.017 22.85c1.958-1.65 3.2-4.107 3.2-6.85 0-2.743-1.242-5.2-3.2-6.85a8.937 8.937 0 0 0-3.2 6.85c0 2.743 1.241 5.2 3.2 6.85Z" fill="#FF5E00" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M17.69 5.001h8.528c1.19 0 1.93 1 1.652 2.228L23.9 24.775C23.62 26.001 22.43 27 21.239 27H12.71c-1.188 0-1.93-1-1.653-2.225L15.03 7.23c.278-1.229 1.469-2.228 2.66-2.228Z" fill="#E21836" />
            <path d="M25.507 5h9.806c1.19 0 .654.999.374 2.228l-3.97 17.546C31.44 26 31.526 27 30.333 27h-9.806c-1.192 0-1.93-1-1.65-2.225l3.969-17.546C23.128 5.998 24.316 5 25.507 5Z" fill="#00447C" />
            <path d="M34.925 5h8.527c1.192 0 1.932.999 1.652 2.228l-3.969 17.546C40.855 26 39.662 27 38.47 27h-8.523c-1.192 0-1.932-1-1.653-2.225l3.97-17.546C32.542 5.998 33.732 5 34.924 5Z" fill="#007B84" />
            <path d="M19.917 10.623c-.877.01-1.136 0-1.219-.02-.032.155-.623 2.965-.625 2.967-.127.569-.22.974-.535 1.236a.937.937 0 0 1-.63.225c-.388 0-.615-.198-.653-.575l-.007-.13.119-.766s.62-2.56.732-2.899a.246.246 0 0 0 .009-.038c-1.21.01-1.423 0-1.438-.02-.008.027-.038.186-.038.186l-.634 2.886-.055.245-.105.8c0 .238.045.432.135.596.29.52 1.113.597 1.58.597.6 0 1.164-.131 1.544-.37.661-.403.834-1.031.988-1.59l.072-.286s.64-2.66.748-3.006c.005-.019.006-.029.012-.038Zm2.177 2.145a1.65 1.65 0 0 0-.69.166c-.091.05-.178.105-.27.161l.083-.307-.046-.052c-.537.112-.657.127-1.152.198l-.042.029c-.058.492-.109.861-.322 1.827-.082.356-.166.715-.25 1.07l.022.046c.509-.028.663-.028 1.104-.02l.036-.04c.056-.296.064-.366.188-.965.058-.284.18-.908.24-1.13.11-.053.22-.105.323-.105.248 0 .218.222.208.31-.01.15-.1.635-.193 1.052l-.062.27c-.043.198-.09.391-.133.588l.019.04c.5-.028.653-.028 1.081-.02l.05-.04c.078-.463.1-.586.238-1.26l.069-.308c.134-.605.2-.912.1-1.162-.108-.28-.365-.348-.601-.348Zm2.431.634c-.266.052-.436.088-.605.11-.167.028-.33.053-.588.09l-.02.019-.018.015c-.027.197-.046.368-.082.568-.03.207-.076.443-.151.781-.059.26-.09.35-.122.441-.033.091-.069.18-.134.435l.015.023.013.022c.24-.012.398-.02.56-.022.161-.006.328 0 .587.002l.023-.02.024-.02c.038-.23.043-.292.066-.404.023-.12.062-.287.158-.731.045-.21.096-.417.143-.63.048-.213.1-.422.148-.63l-.007-.026-.01-.023Zm.006-.854c-.242-.147-.667-.1-.953.102-.284.2-.317.482-.076.63.238.144.664.101.948-.104.284-.203.32-.483.08-.628Zm1.463 3.404c.49 0 .991-.14 1.369-.551.29-.334.424-.832.47-1.036.15-.679.033-.996-.114-1.189-.223-.294-.618-.388-1.027-.388-.246 0-.832.025-1.29.46-.329.313-.48.738-.572 1.146-.093.415-.2 1.163.469 1.442.206.09.503.116.695.116Zm-.038-1.527c.113-.514.246-.946.586-.946.266 0 .286.322.167.837-.021.115-.118.54-.25.721-.092.134-.2.215-.32.215-.036 0-.249 0-.252-.325a2.27 2.27 0 0 1 .069-.502Zm3.1 1.46.038-.04c.055-.295.064-.365.184-.964.06-.284.184-.908.243-1.13.11-.053.217-.105.324-.105.246 0 .216.222.207.31-.01.15-.1.635-.194 1.052l-.058.27c-.045.198-.093.391-.136.588l.018.04c.503-.028.65-.028 1.08-.02l.052-.04c.075-.463.096-.586.237-1.259l.067-.31c.135-.604.203-.911.104-1.161-.11-.28-.37-.348-.603-.348-.154 0-.438.039-.69.167-.09.048-.18.104-.268.16l.077-.307-.041-.052c-.537.112-.66.127-1.155.199l-.038.028c-.06.492-.109.86-.322 1.827-.081.356-.166.716-.25 1.07l.023.046c.509-.028.66-.028 1.101-.02Zm3.693.02.22-1.099s.16-.69.17-.715c0 0 .05-.072.1-.1h.075c.698 0 1.486 0 2.104-.469.42-.32.708-.795.836-1.37.034-.142.058-.31.058-.478 0-.22-.043-.438-.167-.609-.315-.454-.943-.462-1.667-.466l-.357.004c-.927.012-1.3.008-1.452-.011l-.037.193-.332 1.587-.832 3.528c.81-.01 1.141-.01 1.28.006Zm.615-2.814.352-1.575.011-.082.005-.061.141.015.745.066c.288.114.406.41.324.794-.076.352-.298.648-.583.791-.234.121-.522.131-.818.131h-.191l.014-.08Zm2.199 1.363c-.094.41-.2 1.158.464 1.424.212.093.402.12.595.11.204-.01.393-.116.568-.268l-.047.188.03.04c.478-.021.626-.021 1.144-.017l.047-.037c.076-.458.147-.902.344-1.778.096-.42.191-.835.29-1.253l-.016-.046c-.535.102-.678.124-1.192.199l-.04.032-.015.125a.741.741 0 0 0-.375-.318c-.229-.093-.766.027-1.228.46-.325.31-.48.733-.57 1.14Zm1.123.025c.115-.505.246-.932.587-.932.216 0 .33.205.306.554l-.061.283c-.034.15-.071.299-.107.447-.037.102-.08.198-.126.262-.088.128-.297.208-.417.208-.034 0-.244 0-.252-.32-.001-.159.03-.322.07-.502Zm5.868-1.666-.042-.049c-.529.11-.625.128-1.111.196l-.036.036-.006.024-.001-.008c-.362.86-.352.674-.646 1.35l-.004-.082-.073-1.467-.047-.049c-.554.11-.567.128-1.08.196l-.04.036c-.005.018-.005.037-.008.058l.003.008c.064.336.049.261.113.793.03.26.07.523.1.78.05.432.078.644.14 1.302-.346.587-.428.81-.76 1.325l.002.005-.235.382c-.027.04-.05.068-.085.08a.344.344 0 0 1-.154.022h-.13l-.193.661.663.012c.389-.002.633-.189.765-.44l.416-.735H40.1l.043-.052c.28-.621 2.412-4.384 2.412-4.384Zm-6.991 8.682h-.281l1.04-3.54h.345l.11-.366.01.406c-.013.25.179.473.682.436h.582l.2-.681h-.218c-.127 0-.185-.033-.178-.103l-.01-.413h-1.078v.002c-.349.008-1.39.034-1.6.092-.256.068-.524.267-.524.267l.105-.365H33.74l-.21.724-1.054 3.595h-.205l-.2.678h2.008l-.067.225h.99l.065-.226h.278l.218-.73Zm-.824-2.821c-.162.046-.462.185-.462.185l.267-.905h.801l-.193.66s-.248.015-.413.06Zm.015 1.293s-.252.032-.417.07c-.164.052-.47.212-.47.212l.277-.942h.805l-.195.66Zm-.449 1.537h-.804l.233-.795h.801l-.23.795Zm1.936-2.197h1.158l-.166.555h-1.174l-.176.607h1.027l-.778 1.127a.322.322 0 0 1-.158.136.45.45 0 0 1-.208.062h-.285l-.196.664h.745c.388 0 .617-.181.785-.42l.534-.75.114.762a.357.357 0 0 0 .192.26c.075.038.152.104.26.114.117.005.202.009.258.009h.366l.22-.744h-.145c-.082 0-.225-.014-.25-.04-.024-.033-.024-.083-.037-.16l-.116-.764h-.476l.209-.256h1.171l.18-.607h-1.084l.169-.555h1.081l.2-.684h-3.223l-.197.684Zm-9.785 2.351.27-.926h1.111l.204-.688h-1.113l.17-.57h1.087l.201-.667h-2.72l-.197.667h.618l-.165.57h-.62l-.204.7h.617l-.36 1.225c-.049.162.023.224.068.3a.299.299 0 0 0 .199.149c.109.025.183.04.285.04h1.253l.223-.763-.555.079c-.108 0-.405-.014-.372-.116Zm.127-4.433-.281.524a.606.606 0 0 1-.164.219c-.043.027-.128.039-.251.039h-.147l-.197.67h.488c.235 0 .415-.088.501-.133.093-.05.117-.022.188-.093l.165-.147h1.524l.202-.697h-1.115l.195-.382h-1.108Zm2.25 4.447c-.026-.039-.007-.107.032-.248l.417-1.419h1.482c.216-.003.372-.006.473-.013a.95.95 0 0 0 .356-.124.675.675 0 0 0 .26-.246c.063-.09.167-.29.255-.596l.524-1.796-1.538.009s-.473.072-.682.151c-.21.089-.51.336-.51.336l.138-.492h-.95l-1.33 4.54a2.886 2.886 0 0 0-.086.38c-.002.083.102.165.17.227.079.062.197.052.31.062.118.01.287.015.52.015h.73l.224-.779-.654.064a.17.17 0 0 1-.141-.071Zm.718-2.625h1.556l-.099.319c-.014.007-.047-.016-.206.003h-1.347l.096-.322Zm.311-1.071h1.57l-.113.384s-.74-.007-.858.015c-.521.093-.826.38-.826.38l.227-.78Zm1.18 2.459a.172.172 0 0 1-.06.098c-.032.021-.084.029-.16.029H30.6l.013-.389h-.922l-.037 1.9c-.002.138.011.217.109.28.097.08.397.09.802.09h.578l.208-.711-.503.028-.167.01c-.023-.01-.045-.019-.07-.044-.02-.022-.056-.008-.05-.146l.004-.487.527-.022c.285 0 .407-.096.511-.187.1-.087.132-.187.169-.322l.088-.431h-.725l-.092.304Z" fill="#FEFEFE" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M19.648 15.984c0 2.074 1.629 3.683 3.725 3.683.592 0 1.1-.117 1.726-.411v-1.62c-.55.55-1.038.772-1.662.772-1.386 0-2.37-1.005-2.37-2.434 0-1.355 1.015-2.424 2.306-2.424.656 0 1.153.235 1.726.794v-1.62c-.604-.306-1.101-.433-1.694-.433-2.085 0-3.757 1.642-3.757 3.693ZM16.116 14.27c0 .382.242.584 1.068.89 1.566.572 2.03 1.08 2.03 2.2 0 1.366-1.003 2.317-2.434 2.317-1.047 0-1.809-.412-2.443-1.343l.89-.856c.316.612.845.94 1.501.94.614 0 1.069-.423 1.069-.995 0-.296-.138-.55-.413-.73-.138-.085-.412-.212-.951-.402-1.293-.465-1.736-.962-1.736-1.935 0-1.155.952-2.022 2.2-2.022.774 0 1.482.265 2.074.783l-.72.943c-.359-.402-.698-.572-1.11-.572-.593 0-1.025.338-1.025.783Z" fill="#231F20" />
            <path clip-rule="evenodd" d="M8.02 12.451H6v7.057h2.01c1.068 0 1.84-.252 2.518-.815a3.54 3.54 0 0 0 1.28-2.709c0-2.082-1.555-3.533-3.788-3.533Zm1.608 5.301c-.432.39-.994.561-1.883.561h-.37v-4.666h.37c.89 0 1.429.159 1.883.57.476.424.763 1.081.763 1.757 0 .677-.287 1.354-.763 1.778Z" fill="#231F20" fill-rule="evenodd" />
            <path d="M13.819 12.451h-1.377v7.057h1.377V12.45ZM34.13 12.451l1.882 4.74 1.906-4.74h1.492l-3.048 7.238h-.74l-2.995-7.238h1.503ZM40.033 19.508h3.903v-1.195h-2.528v-1.905h2.435v-1.195h-2.435v-1.566h2.528V12.45h-3.903v7.057Z" fill="#231F20" />
            <path clip-rule="evenodd" d="M46.889 12.451c1.587 0 2.497.762 2.497 2.083 0 1.08-.57 1.79-1.607 2L50 19.509h-1.693l-1.905-2.835h-.18v2.835h-1.374V12.45h2.04Zm-.666 3.249h.402c.879 0 1.345-.382 1.345-1.091 0-.687-.466-1.046-1.323-1.046h-.424V15.7Z" fill="#231F20" fill-rule="evenodd" />
            <path d="M29.302 19.758a3.754 3.754 0 1 0 0-7.508 3.754 3.754 0 0 0 0 7.508Z" fill="#F48120" />
            <path d="M56 20c-1.492 1.035-12.661 8.428-32 12h28.85c1.74 0 3.15-1.39 3.15-3.104V20Z" fill="#F47216" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
        </div>
      </div>
      <div class="relative">
        <div class="absolute inset-y-0 inset-s-0 flex items-center z-20 ps-3 cursor-pointer">
          <svg class="shrink-0 size-4 text-muted-foreground-1" 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="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        </div>
        <label for="hs-pro-dacfcnl" class="hidden mb-2 text-sm font-medium text-foreground">
          Card number
        </label>
        <input id="hs-pro-dacfcnl" type="text" class="py-1.5 sm:py-2 pe-3 ps-9 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Card number" value="">
      </div>

<div class="grid grid-cols-2 gap-x-2">
        <div>
          <label for="hs-pro-dacfexl" class="hidden mb-2 text-sm font-medium text-foreground">
            Expiration
          </label>
          <input id="hs-pro-dacfexl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Expiration" value="">
        </div>
        <div>
          <label for="hs-pro-dacfcvl" class="hidden mb-2 text-sm font-medium text-foreground">
            CVV
          </label>
          <input id="hs-pro-dacfcvl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="CVV" value="">
        </div>
      </div>

<p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
        <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="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        This is a secure form
      </p>
    </div>

<div class="space-y-2">
      <label class="block mb-2 text-sm font-medium text-foreground">
        Billing address
      </label>

<div>
        <label for="hs-pro-dacfad1l" class="hidden mb-2 text-sm font-medium text-foreground">
          Address
        </label>
        <input id="hs-pro-dacfad1l" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Street address" value="">
      </div>
      <div>
        <label for="hs-pro-dacfad2l" class="hidden mb-2 text-sm font-medium text-foreground">
          Address 2
        </label>
        <input id="hs-pro-dacfad2l" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Apt or suite number" value="">
      </div>
      <div>
        <label for="hs-pro-dacfctl" class="hidden mb-2 text-sm font-medium text-foreground">
          City
        </label>
        <input id="hs-pro-dacfctl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="City" value="">
      </div>
      <div class="grid grid-cols-2 gap-x-2">
        <div>
          <label for="hs-pro-dacfstl" class="hidden mb-2 text-sm font-medium text-foreground">
            State
          </label>
          <input id="hs-pro-dacfstl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="State" value="">
        </div>
        <div>
          <label for="hs-pro-dacfzpl" class="hidden mb-2 text-sm font-medium text-foreground">
            Zip
          </label>
          <input id="hs-pro-dacfzpl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="ZIP code" value="">
        </div>
      </div>

<div class="relative">
        <select  data-hs-select='{
            "placeholder": "Country",
            "hasSearch": true,
            "searchPlaceholder": "Country",
            "searchClasses": "block w-full sm:text-sm bg-transparent border-layer-line text-layer-foreground placeholder:text-muted-foreground-1 rounded-lg focus:border-primary-focus focus:ring-primary-focus py-1.5 sm:py-2 px-3",
            "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span data-icon></span><span class=\"text-foreground\" data-title></span></button>",
            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 sm:py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer text-foreground bg-transparent border border-layer-line ring-1 ring-transparent rounded-lg text-start sm:text-sm focus:outline-hidden focus:border-primary-focus focus:ring-primary",
            "dropdownClasses": "max-h-64 p-1 pt-0 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
            "dropdownPlacement": "top",
            "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
            "optionTemplate": "<div class=\"flex items-center w-full\"><div class=\"me-2\" data-icon></div><span data-title></span><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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\"/></svg></span></div>",
            "preventSearchFocus": false,
            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 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=\"m6 9 6 6 6-6\"/></svg></div>",
            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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=\"m6 9 6 6 6-6\"/></svg></div>",
            "dropdownScope": "window",
            "viewport": "#null.id"
          }' class="hidden">
          <option value="">Choose</option>
          <option value="AF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/af.png\" alt=\"Afghanistan\" />"}'>
            Afghanistan
          </option>
          <option value="AX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ax.png\" alt=\"Aland Islands\" />"}'>
            Aland Islands
          </option>
          <option value="AL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/al.png\" alt=\"Albania\" />"}'>
            Albania
          </option>
          <option value="DZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dz.png\" alt=\"Algeria\" />"}'>
            Algeria
          </option>
          <option value="AS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/as.png\" alt=\"American Samoa\" />"}'>
            American Samoa
          </option>
          <option value="AD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ad.png\" alt=\"Andorra\" />"}'>
            Andorra
          </option>
          <option value="AO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ao.png\" alt=\"Angola\" />"}'>
            Angola
          </option>
          <option value="AI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ai.png\" alt=\"Anguilla\" />"}'>
            Anguilla
          </option>
          <option value="AG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ag.png\" alt=\"Antigua and Barbuda\" />"}'>
            Antigua and Barbuda
          </option>
          <option value="AR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ar.png\" alt=\"Argentina\" />"}'>
            Argentina
          </option>
          <option value="AM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/am.png\" alt=\"Armenia\" />"}'>
            Armenia
          </option>
          <option value="AW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/aw.png\" alt=\"Aruba\" />"}'>
            Aruba
          </option>
          <option value="AU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/au.png\" alt=\"Australia\" />"}'>
            Australia
          </option>
          <option value="AT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/at.png\" alt=\"Austria\" />"}'>
            Austria
          </option>
          <option value="AZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/az.png\" alt=\"Azerbaijan\" />"}'>
            Azerbaijan
          </option>
          <option value="BS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bs.png\" alt=\"Bahamas\" />"}'>
            Bahamas
          </option>
          <option value="BH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bh.png\" alt=\"Bahrain\" />"}'>
            Bahrain
          </option>
          <option value="BD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bd.png\" alt=\"Bangladesh\" />"}'>
            Bangladesh
          </option>
          <option value="BB" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bb.png\" alt=\"Barbados\" />"}'>
            Barbados
          </option>
          <option value="BY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/by.png\" alt=\"Belarus\" />"}'>
            Belarus
          </option>
          <option value="BE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/be.png\" alt=\"Belgium\" />"}'>
            Belgium
          </option>
          <option value="BZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bz.png\" alt=\"Belize\" />"}'>
            Belize
          </option>
          <option value="BJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bj.png\" alt=\"Benin\" />"}'>
            Benin
          </option>
          <option value="BM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bm.png\" alt=\"Bermuda\" />"}'>
            Bermuda
          </option>
          <option value="BT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bt.png\" alt=\"Bhutan\" />"}'>
            Bhutan
          </option>
          <option value="BO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bo.png\" alt=\"Bolivia (Plurinational State of)\" />"}'>
            Bolivia (Plurinational State of)
          </option>
          <option value="BQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bq.png\" alt=\"Bonaire, Sint Eustatius and Saba\" />"}'>
            Bonaire, Sint Eustatius and Saba
          </option>
          <option value="BA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ba.png\" alt=\"Bosnia and Herzegovina\" />"}'>
            Bosnia and Herzegovina
          </option>
          <option value="BW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bw.png\" alt=\"Botswana\" />"}'>
            Botswana
          </option>
          <option value="BR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/br.png\" alt=\"Brazil\" />"}'>
            Brazil
          </option>
          <option value="IO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/io.png\" alt=\"British Indian Ocean Territory\" />"}'>
            British Indian Ocean Territory
          </option>
          <option value="BN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bn.png\" alt=\"Brunei Darussalam\" />"}'>
            Brunei Darussalam
          </option>
          <option value="BG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bg.png\" alt=\"Bulgaria\" />"}'>
            Bulgaria
          </option>
          <option value="BF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bf.png\" alt=\"Burkina Faso\" />"}'>
            Burkina Faso
          </option>
          <option value="BI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bi.png\" alt=\"Burundi\" />"}'>
            Burundi
          </option>
          <option value="CV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cv.png\" alt=\"Cabo Verde\" />"}'>
            Cabo Verde
          </option>
          <option value="KH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kh.png\" alt=\"Cambodia\" />"}'>
            Cambodia
          </option>
          <option value="CM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cm.png\" alt=\"Cameroon\" />"}'>
            Cameroon
          </option>
          <option value="CA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ca.png\" alt=\"Canada\" />"}'>
            Canada
          </option>
          <option value="KY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ky.png\" alt=\"Cayman Islands\" />"}'>
            Cayman Islands
          </option>
          <option value="CF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cf.png\" alt=\"Central African Republic\" />"}'>
            Central African Republic
          </option>
          <option value="TD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/td.png\" alt=\"Chad\" />"}'>
            Chad
          </option>
          <option value="CL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cl.png\" alt=\"Chile\" />"}'>
            Chile
          </option>
          <option value="CN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cn.png\" alt=\"China\" />"}'>
            China
          </option>
          <option value="CX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cx.png\" alt=\"Christmas Island\" />"}'>
            Christmas Island
          </option>
          <option value="CC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cc.png\" alt=\"Cocos (Keeling) Islands\" />"}'>
            Cocos (Keeling) Islands
          </option>
          <option value="CO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/co.png\" alt=\"Colombia\" />"}'>
            Colombia
          </option>
          <option value="KM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/km.png\" alt=\"Comoros\" />"}'>
            Comoros
          </option>
          <option value="CK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ck.png\" alt=\"Cook Islands\" />"}'>
            Cook Islands
          </option>
          <option value="CR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cr.png\" alt=\"Costa Rica\" />"}'>
            Costa Rica
          </option>
          <option value="HR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hr.png\" alt=\"Croatia\" />"}'>
            Croatia
          </option>
          <option value="CU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cu.png\" alt=\"Cuba\" />"}'>
            Cuba
          </option>
          <option value="CW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cw.png\" alt=\"Curaçao\" />"}'>
            Curaçao
          </option>
          <option value="CY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cy.png\" alt=\"Cyprus\" />"}'>
            Cyprus
          </option>
          <option value="CZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cz.png\" alt=\"Czech Republic\" />"}'>
            Czech Republic
          </option>
          <option value="CI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ci.png\" alt=Côte dIvoire\" />"}'>
            Côte dIvoire
          </option>
          <option value="CD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cd.png\" alt=\"Democratic Republic of the Congo\" />"}'>
            Democratic Republic of the Congo
          </option>
          <option value="DK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dk.png\" alt=\"Denmark\" />"}'>
            Denmark
          </option>
          <option value="DJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dj.png\" alt=\"Djibouti\" />"}'>
            Djibouti
          </option>
          <option value="DM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dm.png\" alt=\"Dominica\" />"}'>
            Dominica
          </option>
          <option value="DO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/do.png\" alt=\"Dominican Republic\" />"}'>
            Dominican Republic
          </option>
          <option value="EC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ec.png\" alt=\"Ecuador\" />"}'>
            Ecuador
          </option>
          <option value="EG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eg.png\" alt=\"Egypt\" />"}'>
            Egypt
          </option>
          <option value="SV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sv.png\" alt=\"El Salvador\" />"}'>
            El Salvador
          </option>
          <option value="GB-ENG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"England\" />"}'>
            England
          </option>
          <option value="GQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gq.png\" alt=\"Equatorial Guinea\" />"}'>
            Equatorial Guinea
          </option>
          <option value="ER" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/er.png\" alt=\"Eritrea\" />"}'>
            Eritrea
          </option>
          <option value="EE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ee.png\" alt=\"Estonia\" />"}'>
            Estonia
          </option>
          <option value="ET" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/et.png\" alt=\"Ethiopia\" />"}'>
            Ethiopia
          </option>
          <option value="FK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fk.png\" alt=\"Falkland Islands\" />"}'>
            Falkland Islands
          </option>
          <option value="FO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fo.png\" alt=\"Faroe Islands\" />"}'>
            Faroe Islands
          </option>
          <option value="FM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fm.png\" alt=\"Federated States of Micronesia\" />"}'>
            Federated States of Micronesia
          </option>
          <option value="FJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fj.png\" alt=\"Fiji\" />"}'>
            Fiji
          </option>
          <option value="FI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fi.png\" alt=\"Finland\" />"}'>
            Finland
          </option>
          <option value="FR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fr.png\" alt=\"France\" />"}'>
            France
          </option>
          <option value="GF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gf.png\" alt=\"French Guiana\" />"}'>
            French Guiana
          </option>
          <option value="PF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pf.png\" alt=\"French Polynesia\" />"}'>
            French Polynesia
          </option>
          <option value="TF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tf.png\" alt=\"French Southern Territories\" />"}'>
            French Southern Territories
          </option>
          <option value="GA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ga.png\" alt=\"Gabon\" />"}'>
            Gabon
          </option>
          <option value="GM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gm.png\" alt=\"Gambia\" />"}'>
            Gambia
          </option>
          <option value="GE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ge.png\" alt=\"Georgia\" />"}'>
            Georgia
          </option>
          <option value="DE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/de.png\" alt=\"Germany\" />"}'>
            Germany
          </option>
          <option value="GH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gh.png\" alt=\"Ghana\" />"}'>
            Ghana
          </option>
          <option value="GI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gi.png\" alt=\"Gibraltar\" />"}'>
            Gibraltar
          </option>
          <option value="GR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gr.png\" alt=\"Greece\" />"}'>
            Greece
          </option>
          <option value="GL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gl.png\" alt=\"Greenland\" />"}'>
            Greenland
          </option>
          <option value="GD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gd.png\" alt=\"Grenada\" />"}'>
            Grenada
          </option>
          <option value="GP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gp.png\" alt=\"Guadeloupe\" />"}'>
            Guadeloupe
          </option>
          <option value="GU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gu.png\" alt=\"Guam\" />"}'>
            Guam
          </option>
          <option value="GT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gt.png\" alt=\"Guatemala\" />"}'>
            Guatemala
          </option>
          <option value="GG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gg.png\" alt=\"Guernsey\" />"}'>
            Guernsey
          </option>
          <option value="GN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gn.png\" alt=\"Guinea\" />"}'>
            Guinea
          </option>
          <option value="GW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gw.png\" alt=\"Guinea-Bissau\" />"}'>
            Guinea-Bissau
          </option>
          <option value="GY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gy.png\" alt=\"Guyana\" />"}'>
            Guyana
          </option>
          <option value="HT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ht.png\" alt=\"Haiti\" />"}'>
            Haiti
          </option>
          <option value="VA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/va.png\" alt=\"Holy See\" />"}'>
            Holy See
          </option>
          <option value="HN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hn.png\" alt=\"Honduras\" />"}'>
            Honduras
          </option>
          <option value="HK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hk.png\" alt=\"Hong Kong\" />"}'>
            Hong Kong
          </option>
          <option value="HU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hu.png\" alt=\"Hungary\" />"}'>
            Hungary
          </option>
          <option value="IS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/is.png\" alt=\"Iceland\" />"}'>
            Iceland
          </option>
          <option value="IN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/in.png\" alt=\"India\" />"}'>
            India
          </option>
          <option value="ID" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/id.png\" alt=\"Indonesia\" />"}'>
            Indonesia
          </option>
          <option value="IR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ir.png\" alt=\"Iran (Islamic Republic of)\" />"}'>
            Iran (Islamic Republic of)
          </option>
          <option value="IQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/iq.png\" alt=\"Iraq\" />"}'>
            Iraq
          </option>
          <option value="IE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ie.png\" alt=\"Ireland\" />"}'>
            Ireland
          </option>
          <option value="IM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/im.png\" alt=\"Isle of Man\" />"}'>
            Isle of Man
          </option>
          <option value="IL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/il.png\" alt=\"Israel\" />"}'>
            Israel
          </option>
          <option value="IT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/it.png\" alt=\"Italy\" />"}'>
            Italy
          </option>
          <option value="JM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jm.png\" alt=\"Jamaica\" />"}'>
            Jamaica
          </option>
          <option value="JP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jp.png\" alt=\"Japan\" />"}'>
            Japan
          </option>
          <option value="JE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/je.png\" alt=\"Jersey\" />"}'>
            Jersey
          </option>
          <option value="JO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jo.png\" alt=\"Jordan\" />"}'>
            Jordan
          </option>
          <option value="KZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kz.png\" alt=\"Kazakhstan\" />"}'>
            Kazakhstan
          </option>
          <option value="KE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ke.png\" alt=\"Kenya\" />"}'>
            Kenya
          </option>
          <option value="KI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ki.png\" alt=\"Kiribati\" />"}'>
            Kiribati
          </option>
          <option value="KW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kw.png\" alt=\"Kuwait\" />"}'>
            Kuwait
          </option>
          <option value="KG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kg.png\" alt=\"Kyrgyzstan\" />"}'>
            Kyrgyzstan
          </option>
          <option value="LA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/la.png\" alt=\"Laos\" />"}'>
            Laos
          </option>
          <option value="LV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lv.png\" alt=\"Latvia\" />"}'>
            Latvia
          </option>
          <option value="LB" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lb.png\" alt=\"Lebanon\" />"}'>
            Lebanon
          </option>
          <option value="LS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ls.png\" alt=\"Lesotho\" />"}'>
            Lesotho
          </option>
          <option value="LR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lr.png\" alt=\"Liberia\" />"}'>
            Liberia
          </option>
          <option value="LY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ly.png\" alt=\"Libya\" />"}'>
            Libya
          </option>
          <option value="LI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/li.png\" alt=\"Liechtenstein\" />"}'>
            Liechtenstein
          </option>
          <option value="LT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lt.png\" alt=\"Lithuania\" />"}'>
            Lithuania
          </option>
          <option value="LU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lu.png\" alt=\"Luxembourg\" />"}'>
            Luxembourg
          </option>
          <option value="MO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mo.png\" alt=\"Macau\" />"}'>
            Macau
          </option>
          <option value="MG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mg.png\" alt=\"Madagascar\" />"}'>
            Madagascar
          </option>
          <option value="MW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mw.png\" alt=\"Malawi\" />"}'>
            Malawi
          </option>
          <option value="MY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/my.png\" alt=\"Malaysia\" />"}'>
            Malaysia
          </option>
          <option value="MV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mv.png\" alt=\"Maldives\" />"}'>
            Maldives
          </option>
          <option value="ML" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ml.png\" alt=\"Mali\" />"}'>
            Mali
          </option>
          <option value="MT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mt.png\" alt=\"Malta\" />"}'>
            Malta
          </option>
          <option value="MH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mh.png\" alt=\"Marshall Islands\" />"}'>
            Marshall Islands
          </option>
          <option value="MQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mq.png\" alt=\"Martinique\" />"}'>
            Martinique
          </option>
          <option value="MR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mr.png\" alt=\"Mauritania\" />"}'>
            Mauritania
          </option>
          <option value="MU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mu.png\" alt=\"Mauritius\" />"}'>
            Mauritius
          </option>
          <option value="YT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/yt.png\" alt=\"Mayotte\" />"}'>
            Mayotte
          </option>
          <option value="MX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mx.png\" alt=\"Mexico\" />"}'>
            Mexico
          </option>
          <option value="MD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/md.png\" alt=\"Moldova\" />"}'>
            Moldova
          </option>
          <option value="MC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mc.png\" alt=\"Monaco\" />"}'>
            Monaco
          </option>
          <option value="MN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mn.png\" alt=\"Mongolia\" />"}'>
            Mongolia
          </option>
          <option value="ME" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/me.png\" alt=\"Montenegro\" />"}'>
            Montenegro
          </option>
          <option value="MS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ms.png\" alt=\"Montserrat\" />"}'>
            Montserrat
          </option>
          <option value="MA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ma.png\" alt=\"Morocco\" />"}'>
            Morocco
          </option>
          <option value="MZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mz.png\" alt=\"Mozambique\" />"}'>
            Mozambique
          </option>
          <option value="MM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mm.png\" alt=\"Myanmar\" />"}'>
            Myanmar
          </option>
          <option value="NA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/na.png\" alt=\"Namibia\" />"}'>
            Namibia
          </option>
          <option value="NR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nr.png\" alt=\"Nauru\" />"}'>
            Nauru
          </option>
          <option value="NP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/np.png\" alt=\"Nepal\" />"}'>
            Nepal
          </option>
          <option value="NL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nl.png\" alt=\"Netherlands\" />"}'>
            Netherlands
          </option>
          <option value="NC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nc.png\" alt=\"New Caledonia\" />"}'>
            New Caledonia
          </option>
          <option value="NZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nz.png\" alt=\"New Zealand\" />"}'>
            New Zealand
          </option>
          <option value="NI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ni.png\" alt=\"Nicaragua\" />"}'>
            Nicaragua
          </option>
          <option value="NE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ne.png\" alt=\"Niger\" />"}'>
            Niger
          </option>
          <option value="NG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ng.png\" alt=\"Nigeria\" />"}'>
            Nigeria
          </option>
          <option value="NU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nu.png\" alt=\"Niue\" />"}'>
            Niue
          </option>
          <option value="NF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nf.png\" alt=\"Norfolk Island\" />"}'>
            Norfolk Island
          </option>
          <option value="KP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kp.png\" alt=\"North Korea\" />"}'>
            North Korea
          </option>
          <option value="MK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mk.png\" alt=\"North Macedonia\" />"}'>
            North Macedonia
          </option>
          <option value="GB-NIR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Northern Ireland\" />"}'>
            Northern Ireland
          </option>
          <option value="MP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mp.png\" alt=\"Northern Mariana Islands\" />"}'>
            Northern Mariana Islands
          </option>
          <option value="NO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/no.png\" alt=\"Norway\" />"}'>
            Norway
          </option>
          <option value="OM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/om.png\" alt=\"Oman\" />"}'>
            Oman
          </option>
          <option value="PK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pk.png\" alt=\"Pakistan\" />"}'>
            Pakistan
          </option>
          <option value="PW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pw.png\" alt=\"Palau\" />"}'>
            Palau
          </option>
          <option value="PA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pa.png\" alt=\"Panama\" />"}'>
            Panama
          </option>
          <option value="PG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pg.png\" alt=\"Papua New Guinea\" />"}'>
            Papua New Guinea
          </option>
          <option value="PY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/py.png\" alt=\"Paraguay\" />"}'>
            Paraguay
          </option>
          <option value="PE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pe.png\" alt=\"Peru\" />"}'>
            Peru
          </option>
          <option value="PH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ph.png\" alt=\"Philippines\" />"}'>
            Philippines
          </option>
          <option value="PN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pn.png\" alt=\"Pitcairn\" />"}'>
            Pitcairn
          </option>
          <option value="PL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pl.png\" alt=\"Poland\" />"}'>
            Poland
          </option>
          <option value="PT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pt.png\" alt=\"Portugal\" />"}'>
            Portugal
          </option>
          <option value="PR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pr.png\" alt=\"Puerto Rico\" />"}'>
            Puerto Rico
          </option>
          <option value="QA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/qa.png\" alt=\"Qatar\" />"}'>
            Qatar
          </option>
          <option value="CG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cg.png\" alt=\"Republic of the Congo\" />"}'>
            Republic of the Congo
          </option>
          <option value="RO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ro.png\" alt=\"Romania\" />"}'>
            Romania
          </option>
          <option value="RU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ru.png\" alt=\"Russia\" />"}'>
            Russia
          </option>
          <option value="RW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rw.png\" alt=\"Rwanda\" />"}'>
            Rwanda
          </option>
          <option value="RE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/re.png\" alt=\"Réunion\" />"}'>
            Réunion
          </option>
          <option value="BL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bl.png\" alt=\"Saint Barthélemy\" />"}'>
            Saint Barthélemy
          </option>
          <option value="SH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sh.png\" alt=\"Saint Helena, Ascension and Tristan da Cunha\" />"}'>
            Saint Helena, Ascension and Tristan da Cunha
          </option>
          <option value="KN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kn.png\" alt=\"Saint Kitts and Nevis\" />"}'>
            Saint Kitts and Nevis
          </option>
          <option value="LC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lc.png\" alt=\"Saint Lucia\" />"}'>
            Saint Lucia
          </option>
          <option value="MF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mf.png\" alt=\"Saint Martin\" />"}'>
            Saint Martin
          </option>
          <option value="PM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pm.png\" alt=\"Saint Pierre and Miquelon\" />"}'>
            Saint Pierre and Miquelon
          </option>
          <option value="VC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vc.png\" alt=\"Saint Vincent and the Grenadines\" />"}'>
            Saint Vincent and the Grenadines
          </option>
          <option value="WS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ws.png\" alt=\"Samoa\" />"}'>
            Samoa
          </option>
          <option value="SM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sm.png\" alt=\"San Marino\" />"}'>
            San Marino
          </option>
          <option value="ST" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/st.png\" alt=\"Sao Tome and Principe\" />"}'>
            Sao Tome and Principe
          </option>
          <option value="SA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sa.png\" alt=\"Saudi Arabia\" />"}'>
            Saudi Arabia
          </option>
          <option value="GB-SCT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Scotland\" />"}'>
            Scotland
          </option>
          <option value="SN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sn.png\" alt=\"Senegal\" />"}'>
            Senegal
          </option>
          <option value="RS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rs.png\" alt=\"Serbia\" />"}'>
            Serbia
          </option>
          <option value="SC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sc.png\" alt=\"Seychelles\" />"}'>
            Seychelles
          </option>
          <option value="SL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sl.png\" alt=\"Sierra Leone\" />"}'>
            Sierra Leone
          </option>
          <option value="SG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sg.png\" alt=\"Singapore\" />"}'>
            Singapore
          </option>
          <option value="SX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sx.png\" alt=\"Sint Maarten\" />"}'>
            Sint Maarten
          </option>
          <option value="SK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sk.png\" alt=\"Slovakia\" />"}'>
            Slovakia
          </option>
          <option value="SI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/si.png\" alt=\"Slovenia\" />"}'>
            Slovenia
          </option>
          <option value="SB" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sb.png\" alt=\"Solomon Islands\" />"}'>
            Solomon Islands
          </option>
          <option value="SO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/so.png\" alt=\"Somalia\" />"}'>
            Somalia
          </option>
          <option value="ZA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/za.png\" alt=\"South Africa\" />"}'>
            South Africa
          </option>
          <option value="GS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gs.png\" alt=\"South Georgia and the South Sandwich Islands\" />"}'>
            South Georgia and the South Sandwich Islands
          </option>
          <option value="KR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kr.png\" alt=\"South Korea\" />"}'>
            South Korea
          </option>
          <option value="SS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ss.png\" alt=\"South Sudan\" />"}'>
            South Sudan
          </option>
          <option value="ES" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/es.png\" alt=\"Spain\" />"}'>
            Spain
          </option>
          <option value="LK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lk.png\" alt=\"Sri Lanka\" />"}'>
            Sri Lanka
          </option>
          <option value="PS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ps.png\" alt=\"State of Palestine\" />"}'>
            State of Palestine
          </option>
          <option value="SD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sd.png\" alt=\"Sudan\" />"}'>
            Sudan
          </option>
          <option value="SR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sr.png\" alt=\"Suriname\" />"}'>
            Suriname
          </option>
          <option value="SJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sj.png\" alt=\"Svalbard and Jan Mayen\" />"}'>
            Svalbard and Jan Mayen
          </option>
          <option value="SZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sz.png\" alt=\"Swaziland\" />"}'>
            Swaziland
          </option>
          <option value="SE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/se.png\" alt=\"Sweden\" />"}'>
            Sweden
          </option>
          <option value="CH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ch.png\" alt=\"Switzerland\" />"}'>
            Switzerland
          </option>
          <option value="SY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sy.png\" alt=\"Syrian Arab Republic\" />"}'>
            Syrian Arab Republic
          </option>
          <option value="TW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tw.png\" alt=\"Taiwan\" />"}'>
            Taiwan
          </option>
          <option value="TJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tj.png\" alt=\"Tajikistan\" />"}'>
            Tajikistan
          </option>
          <option value="TZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tz.png\" alt=\"Tanzania\" />"}'>
            Tanzania
          </option>
          <option value="TH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/th.png\" alt=\"Thailand\" />"}'>
            Thailand
          </option>
          <option value="TL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tl.png\" alt=\"Timor-Leste\" />"}'>
            Timor-Leste
          </option>
          <option value="TG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tg.png\" alt=\"Togo\" />"}'>
            Togo
          </option>
          <option value="TK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tk.png\" alt=\"Tokelau\" />"}'>
            Tokelau
          </option>
          <option value="TO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/to.png\" alt=\"Tonga\" />"}'>
            Tonga
          </option>
          <option value="TT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tt.png\" alt=\"Trinidad and Tobago\" />"}'>
            Trinidad and Tobago
          </option>
          <option value="TN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tn.png\" alt=\"Tunisia\" />"}'>
            Tunisia
          </option>
          <option value="TR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tr.png\" alt=\"Turkey\" />"}'>
            Turkey
          </option>
          <option value="TM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tm.png\" alt=\"Turkmenistan\" />"}'>
            Turkmenistan
          </option>
          <option value="TC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tc.png\" alt=\"Turks and Caicos Islands\" />"}'>
            Turks and Caicos Islands
          </option>
          <option value="TV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tv.png\" alt=\"Tuvalu\" />"}'>
            Tuvalu
          </option>
          <option value="UG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ug.png\" alt=\"Uganda\" />"}'>
            Uganda
          </option>
          <option value="UA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ua.png\" alt=\"Ukraine\" />"}'>
            Ukraine
          </option>
          <option value="AE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ae.png\" alt=\"United Arab Emirates\" />"}'>
            United Arab Emirates
          </option>
          <option value="GB"  data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"United Kingdom\" />"}'>
            United Kingdom
          </option>
          <option value="UM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/um.png\" alt=\"United States Minor Outlying Islands\" />"}'>
            United States Minor Outlying Islands
          </option>
          <option value="US"  data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States of America\" />"}'>
            United States of America
          </option>
          <option value="UY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uy.png\" alt=\"Uruguay\" />"}'>
            Uruguay
          </option>
          <option value="UZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uz.png\" alt=\"Uzbekistan\" />"}'>
            Uzbekistan
          </option>
          <option value="VU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vu.png\" alt=\"Vanuatu\" />"}'>
            Vanuatu
          </option>
          <option value="VE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ve.png\" alt=\"Venezuela (Bolivarian Republic of)\" />"}'>
            Venezuela (Bolivarian Republic of)
          </option>
          <option value="VN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vn.png\" alt=\"Vietnam\" />"}'>
            Vietnam
          </option>
          <option value="VG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vg.png\" alt=\"Virgin Islands (British)\" />"}'>
            Virgin Islands (British)
          </option>
          <option value="VI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vi.png\" alt=\"Virgin Islands (U.S.)\" />"}'>
            Virgin Islands (U.S.)
          </option>
          <option value="GB-WLS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Wales\" />"}'>
            Wales
          </option>
          <option value="WF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/wf.png\" alt=\"Wallis and Futuna\" />"}'>
            Wallis and Futuna
          </option>
          <option value="EH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eh.png\" alt=\"Western Sahara\" />"}'>
            Western Sahara
          </option>
          <option value="YE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ye.png\" alt=\"Yemen\" />"}'>
            Yemen
          </option>
          <option value="ZM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zm.png\" alt=\"Zambia\" />"}'>
            Zambia
          </option>
          <option value="ZW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
            Zimbabwe
          </option>
        </select>
      </div>
      
    </div>
  
    <div class="flex items-center">
      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dacfsadch" checked>
      <label for="hs-pro-dacfsadch" class="ms-2 text-sm text-foreground">
        Set as default payment method
      </label>
    </div>
  </div>
  
</div>

Bank Account Form Pro

Payout form combines method radios, bank account inputs, and an optional primary-account checkbox.

<div class="p-5 space-y-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div>
    <div class="flex flex-wrap justify-between items-center gap-x-3 mb-2">
      <label for="hs-pro-epati" class="block text-sm font-medium text-foreground">
        Account type
      </label>

<p>
        <a class="text-xs text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
          What type of account should I choose?
        </a>
      </p>
    </div>
    
    
    <div class="grid lg:grid-cols-2 gap-3 lg:gap-5">
      
      <label for="hs-pro-epati" class="py-3 px-4 flex text-sm bg-layer text-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-focus">
        <input type="radio" id="hs-pro-epati" class="hidden" value="Individual" name="hs-pro-epat" checked>
        <svg class="shrink-0 size-4 mt-0.5 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"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
        <span class="grow ps-3">
          <span class="block font-medium">
            Individual
          </span>
          <span class="block text-muted-foreground-1">
            When you are selling as yourself.
          </span>
        </span>
      </label>

<label for="hs-pro-epatb" class="py-3 px-4 flex text-sm bg-layer text-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-focus">
        <input type="radio" id="hs-pro-epatb" class="hidden" value="Business" name="hs-pro-epat" >
        <svg class="shrink-0 size-4 mt-0.5 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"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
        <span class="grow ps-3">
          <span class="block font-medium">
            Business
          </span>
          <span class="block text-muted-foreground-1">
            When you are selling as a business
          </span>
        </span>
      </label>
      
    </div>
    
  </div>

<div>
    <label for="hs-pro-epyahn" class="block mb-2 text-sm font-medium text-foreground">
      Account holder name
    </label>
    <input id="hs-pro-epyahn" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
    <p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
      Enter the account holder's name exactly as it appears on bank statements.
    </p>
  </div>

<div>
    <label for="hs-pro-epyrn" class="block mb-2 text-sm font-medium text-foreground">
      Routing name
    </label>
    <input id="hs-pro-epyrn" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
    <p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
      Enter the routing number.
    </p>
  </div>

<div>
    <label for="hs-pro-epyan" class="block mb-2 text-sm font-medium text-foreground">
      Account number
    </label>
    <input id="hs-pro-epyan" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
    <p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
      Enter the account number. This can usually be found within the account details.
    </p>
  </div>
  
</div>

Open related payouts template

Payment Method Settings Form Pro

Settings card pairs payment-type tabs with card inputs and two stacked preference checkboxes.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-3 px-5 border-b border-card-header">
    <h2 class="inline-block font-semibold text-foreground">
      Payment method
    </h2>
  </div>

<div class="p-5 space-y-5 flex flex-col justify-between h-full">
    
      <div id="payment-options" class="p-0.5 w-full inline-flex bg-surface rounded-lg">
        <label for="payment-options-by-card" class="relative w-full inline-flex justify-center py-2 px-4">
          <input id="payment-options-by-card" name="payment-options" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-md cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-md focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent focus:before:bg-muted" checked>
          <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default">
            Pay by Card
          </span>
        </label>
        <label for="payment-options-with-paypal" class="relative w-full inline-flex justify-center py-2 px-4">
          <input id="payment-options-with-paypal" name="payment-options" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-md cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-md focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent focus:before:bg-muted" disabled>
          <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default peer-disabled:opacity-50 peer-disabled:pointer-events-none">
            <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6424 30.9152L11.197 27.3925L9.96162 27.3639H4.06256L8.16211 1.37005C8.17431 1.29063 8.21465 1.21823 8.27577 1.16607C8.33689 1.1139 8.41472 1.08543 8.49508 1.08586H18.4417C21.7438 1.08586 24.0227 1.773 25.2124 3.12927C25.7702 3.76551 26.1255 4.43039 26.2972 5.16208C26.4775 5.92981 26.4807 6.84707 26.3047 7.9658L26.2919 8.04745V8.76429L26.8497 9.08029C27.2755 9.29602 27.6583 9.58784 27.979 9.94134C28.4562 10.4853 28.7648 11.1767 28.8952 11.9964C29.0299 12.8394 28.9854 13.8426 28.7648 14.9783C28.5103 16.2847 28.0989 17.4225 27.5432 18.3536C27.053 19.1876 26.3938 19.91 25.608 20.4744C24.8699 20.9982 23.993 21.3959 23.0015 21.6504C22.0408 21.9007 20.9454 22.0268 19.7439 22.0268H18.9698C18.4163 22.0268 17.8786 22.2262 17.4566 22.5836C17.0352 22.9447 16.7556 23.4438 16.6677 23.9918L16.6093 24.3088L15.6295 30.5175L15.585 30.7455C15.5733 30.8176 15.5532 30.8537 15.5235 30.8781C15.4947 30.9016 15.4588 30.9147 15.4217 30.9152H10.6424Z" fill="#253B80"/>
              <path d="M27.3778 8.13017C27.3481 8.31998 27.3142 8.51403 27.276 8.71339C25.9643 15.4481 21.4766 17.7746 15.7451 17.7746H12.8268C12.1259 17.7746 11.5352 18.2836 11.426 18.975L9.93191 28.4508L9.5088 31.1368C9.49195 31.2434 9.49838 31.3523 9.52767 31.4561C9.55695 31.5599 9.60838 31.6562 9.67842 31.7382C9.74846 31.8202 9.83545 31.8861 9.9334 31.9313C10.0313 31.9765 10.1379 31.9999 10.2458 32H15.4217C16.0346 32 16.5552 31.5546 16.6517 30.9502L16.7026 30.6872L17.6771 24.5029L17.7397 24.1636C17.8351 23.557 18.3569 23.1116 18.9698 23.1116H19.7439C24.7586 23.1116 28.6842 21.0757 29.8316 15.184C30.3109 12.7228 30.0627 10.6677 28.7945 9.22239C28.3925 8.77528 27.9124 8.40516 27.3778 8.13017Z" fill="#179BD7"/>
              <path d="M26.0056 7.58299C25.5868 7.46183 25.1607 7.36727 24.7299 7.29986C23.8788 7.16905 23.0185 7.10629 22.1574 7.11217H14.3612C14.0645 7.11194 13.7776 7.21787 13.5521 7.41079C13.3267 7.60372 13.1778 7.87092 13.1322 8.1641L11.4737 18.6685L11.426 18.975C11.4777 18.6406 11.6473 18.3357 11.9043 18.1155C12.1612 17.8954 12.4885 17.7744 12.8268 17.7746H15.7451C21.4766 17.7746 25.9642 15.447 27.276 8.71339C27.3152 8.51403 27.3481 8.31998 27.3778 8.13017C27.0316 7.94865 26.6709 7.79648 26.2993 7.67525C26.2019 7.64293 26.104 7.61217 26.0056 7.58299Z" fill="#222D65"/>
              <path d="M13.1321 8.1641C13.1773 7.87084 13.3262 7.60351 13.5517 7.41068C13.7772 7.21785 14.0644 7.11231 14.3611 7.11323H22.1573C23.0809 7.11323 23.943 7.17368 24.7298 7.30092C25.2623 7.3846 25.7874 7.50976 26.3003 7.67525C26.6874 7.80356 27.0468 7.9552 27.3787 8.13017C27.769 5.64138 27.3756 3.94685 26.0299 2.41243C24.5464 0.7232 21.8688 0 18.4427 0H8.49601C7.79614 0 7.19913 0.508997 7.09097 1.20144L2.94795 27.4625C2.92865 27.5844 2.93599 27.7091 2.96947 27.8279C3.00294 27.9467 3.06176 28.0569 3.14187 28.1508C3.22198 28.2447 3.32149 28.3202 3.43354 28.3719C3.54559 28.4237 3.66753 28.4506 3.79097 28.4508H9.93181L11.4736 18.6685L13.1321 8.1641Z" fill="#253B80"/>
            </svg>
            Pay with PayPal
          </span>
        </label>
      </div>

<div class="space-y-2">
      
      <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
        
        <div>
          <label for="hs-pro-echpmcn" class="block mb-2 text-sm font-medium text-foreground">
            Card number
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 inset-s-0 flex items-center z-20 ps-3 cursor-pointer">
              <svg class="shrink-0 size-4 text-muted-foreground-1" 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="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
            </div>
            <input id="hs-pro-echpmcn" type="text" class="py-1.5 sm:py-2 px-3 ps-9 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
          </div>
        </div>

<div class="grid grid-cols-2 gap-3 lg:gap-5">
          
          <div>
            <label for="hs-pro-echpmex" class="block mb-2 text-sm font-medium text-foreground">
              Expiration
            </label>
            <input id="hs-pro-echpmex" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
          </div>

<div>
            <label for="hs-pro-echpmcvv" class="block mb-2 text-sm font-medium text-foreground">
              CVV
            </label>
            <input id="hs-pro-echpmcvv" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
          </div>
          
        </div>
      </div>

<div class="space-y-2">
      
      <div class="flex items-center gap-x-1">
        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-echpmpc">
        <label for="hs-pro-echpmpc" class="ms-1.5 text-sm text-muted-foreground-1">
          Make this primary card
        </label>
      </div>

<div class="flex items-center gap-x-1">
        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-echpmsc">
        <label for="hs-pro-echpmsc" class="ms-1.5 text-sm text-muted-foreground-1">
          Save my payment details for future purchases
        </label>
      </div>
      
    </div>
  </div>
  
</div>