.-.-.-.-.-

{% extends 'shop/_private/layouts' %}

{# @var cart \craft\commerce\elements\Order #}

{% block main %}

{% if not cart.gateway %}
    {% redirect 'shop/checkout/payment-method' %}
  {% endif %}

<div class="md:flex md:-mx-8" >
    <div class="md:w-2/3 md:px-8">
      {% if craft.commerce.settings.allowCheckoutWithoutPayment %}

<div class="border-b border-gray-300 pb-10 mb-10">
          <h1 class="font-bold text-xl">
            {{- 'Pay Later'|t -}}
          </h1>
          <p>{{ 'Commit to buy now, and make payment later...'|t }}</p>
          <div class="mt-1">
            <form id="completeForm"
                  method="post"
                  action=""
            >
              {{ csrfInput() }}
              {{ actionInput('commerce/cart/complete') }}
              {{ redirectInput(siteUrl('/shop/customer/order', {
                number: cart.number,
                success: 'true'
              })) }}
              {{ successMessageInput('Thank you for your order. We’ve received it and are awaiting payment.'|t) }}
              {{ tag('button', {
                type: 'submit',
                class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
                text: 'Commit'|t
              }) }}
            </form>
          </div>
        </div>
      {% endif %}

<h1 class="font-bold text-xl">
        {{- 'Payment'|t -}}
      </h1>

{% if cart.gatewayId or cart.paymentSourceId %}
        {% if paymentForm is defined %}
          {% for key, errors in paymentForm.getErrors() %}
            {% for error in errors %}
              {% if loop.first %}<ul>{% endif %}
                <li class="text-red-600"><strong>{{ key }}</strong> {{ error }}</li>
              {% if loop.last %}</ul>{% endif %}
            {% endfor %}
          {% endfor %}
        {% endif %}

<div class="mt-3">
          <form id="paymentForm" method="post" action="">
            {{ csrfInput() }}
            {{ actionInput('commerce/payments/pay') }}
            {{ redirectInput(siteUrl('/shop/customer/order', {
              number: cart.number,
              success: 'true'
            })) }}
            {{ hiddenInput('cancelUrl', siteUrl('/shop/checkout/payment')|hash) }}
            {{ hiddenInput('orderEmail', cart.email) }}

{% if cart.gatewayId %}
              {{ hiddenInput('gatewayId', cart.gatewayId) }}
              {% set params = {} %}

{% if className(cart.gateway) == 'craft\\commerce\\paypalcheckout\\gateways\\Gateway' %}
                {% set params = { currency: cart.paymentCurrency } %}
              {% endif %}

<div class="gateway-payment-form max-w-3/4">
                {% namespace cart.gateway.handle|commercePaymentFormNamespace %}

{{ cart.gateway.getPaymentFormHtml(params)|raw }}
                {% endnamespace %}
              </div>

{# Force in some basic styling for the gateway-provided form markup (better to build your own form markup!) #}
              {% include 'shop/checkout/_includes/base-payment-form-styles' %}

{% if cart.gateway.supportsPaymentSources() and currentUser %}
                <div class="checkbox">
                  <label>
                    {{ input('checkbox', 'savePaymentSource', 1, {
                      class: ['inline-block', 'mr-1']
                    }) }}
                    {{ 'Save card for future purchases'|t }}
                  </label>
                </div>
              {% endif %}
            {% else %}
              {{ cart.gateway.getPaymentConfirmationFormHtml({})|raw }}
            {% endif %}

{% set user = cart.email ? craft.users.email(cart.email).one() : null %}
            {% if not user or not user.getIsCredentialed() %}
              <div class="mt-3">
                <label for="registerUserOnOrderComplete">
                  {{ hiddenInput('registerUserOnOrderComplete', false) }}
                  {{ input('checkbox', 'registerUserOnOrderComplete', 1, {
                    id: 'registerUserOnOrderComplete'
                  }) }}
                  {{ 'Create an account'|t }}
                </label>
              </div>
            {% endif %}

{% if className(cart.gateway) not in [
              'craft\\commerce\\paypalcheckout\\gateways\\Gateway',
            ] %}
              <div class="mt-3 text-right">
                {{ tag('button', {
                  type: 'submit',
                  class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
                  text: 'Pay'|t
                }) }}
              </div>
            {% endif %}
          </form>
        </div>
      {% endif %}
    </div>

<div class="mt-8 md:w-1/3 md:px-8 md:mt-0">
      {{ include('shop/checkout/_includes/order-summary', {
        showShippingAddress: true,
        showShippingMethod: true
      }) }}
    </div>
  </div>

{% js %}
    var $paymentForm = document.querySelector('#paymentForm');
    if ($paymentForm) {
      // Only allow the payment form submit to be triggered once.
      $paymentForm.addEventListener('submit', function(ev) {
        if ($paymentForm.dataset.processing) {
          ev.preventDefault();
          return false;
        }

$paymentForm.dataset.processing = true;
      });
    }
  {% endjs %}

{% endblock %}

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