.-.-.-.-.-

{# Offer payment options at 20%, 50%, 75%, and 100%. #}
{% set percentageOptions = [ 0.2, 0.5, 0.75, 1 ] %}

{% if craft.commerce.settings.allowPartialPaymentOnCheckout %}
  <div class="mt-3">
    <p>{{ 'Make partial payment'|t }}...</p>
    <div>
      {% tag 'select' with {
        name: 'paymentAmount',
        id: 'paymentAmount',
        class: 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded'
      } %}
        {% for percentageOption in percentageOptions %}
          {# Calculate the desired amount in the target currency #}
          {% set convertedAmount = craft.commerce.paymentCurrencies.convertCurrency(
            cart.outstandingBalance * percentageOption,
            cart.currency,
            cart.paymentCurrency
          ) %}
          {% set percent = percentageOption * 100 %}
          {{ tag('option', {
            value: convertedAmount|hash,
            text: percent ~ '% (' ~ convertedAmount|commerceCurrency(cart.paymentCurrency) ~ ') (' ~ cart.paymentCurrency ~ ')'
          }) }}
        {% endfor %}
      {% endtag %}
    </div>
  </div>
{% endif %}

/srv/users/craft4/apps/craft4-newsite-space/templates/shop/checkout/_includes/partial-payment.twig