diff --git a/src/templates/checkout/payment.twig b/src/templates/checkout/payment.twig index d125361..cabee94 100644 --- a/src/templates/checkout/payment.twig +++ b/src/templates/checkout/payment.twig @@ -1,231 +1,185 @@ {% extends 'foster-checkout/_layouts/default' %} {% block body %} -{% set gateways = craft.commerce.gateways.getAllCustomerEnabledGateways %} -{% set addresses = currentUser ? (currentUser.addresses.all() ?? null) : null %} + {% set gateways = craft.commerce.gateways.getAllCustomerEnabledGateways %} + {% set addresses = currentUser ? (currentUser.addresses.all() ?? null) : null %}
-

{{ 'Checkout'|t('foster-checkout') }}

+

{{ 'Checkout'|t('foster-checkout') }}

-
- {% include 'foster-checkout/_components/app/steps-completed' with { +
+ {% include 'foster-checkout/_components/app/steps-completed' with { step: 'payment' } %} -
- -

- {{ '3. Payment'|t('foster-checkout') }} -

- -
-
- -

- {{ 'Billing address'|t('foster-checkout') }} -

- - -
- - - -
-
- - -
-
- - - {# Address book #} - {# {% if currentUser and addresses|length %} -
-
- - -
-
-
- - {% for address in addresses %} - {% set newAddress = cart.sourceBillingAddressId == address.id %} -
-
- - - -
- -
- {% endfor %} - - -
-
-
- {% endif %} #} - {# end address book #} - - - {# New billing address #} -
-
- - -
-
-
- {{ csrfInput() }} - {{ actionInput('commerce/cart/update-cart') }} - - {% include 'foster-checkout/_components/app/address-fields' with { +
+ +

+ {{ '3. Payment'|t('foster-checkout') }} +

+ +
+
+ +

+ {{ 'Billing address'|t('foster-checkout') }} +

+ + +
+ + + +
+
+ + +
+
+ + + {# Address book #} + {# {% if currentUser and addresses|length %} +
+
+ + +
+
+
+ + {% for address in addresses %} + {% set newAddress = cart.sourceBillingAddressId == address.id %} +
+
+ + + +
+ +
+ {% endfor %} + + +
+
+
+ {% endif %} #} + {# end address book #} + + + {# New billing address #} +
+ + +
+
+ + {{ csrfInput() }} + {{ actionInput('commerce/cart/update-cart') }} + + {% include 'foster-checkout/_components/app/address-fields' with { context: 'billingAddress', address: cart.billingAddress ?? null, } %} -
- - -
- -
- - - - - -
-
- -
- -
- -
- {% for gateway in gateways %} -
-
- - -
-
-
- {{ csrfInput() }} - {{ actionInput('commerce/payments/pay') }} - {{ redirectInput(craft.fostercheckout.getPath('checkout') ~ '/order') }} - {{ redirectInput(siteUrl(craft.fostercheckout.getPath('checkout') ~ '/order', { +
+ + +
+ +
+ + + +
+
+
+
+ +
+ {% for gateway in gateways %} +
+
+ + +
+
+
+ {{ csrfInput() }} + {{ actionInput('commerce/payments/pay') }} + {{ redirectInput(craft.fostercheckout.getPath('checkout') ~ '/order') }} + {{ redirectInput(siteUrl(craft.fostercheckout.getPath('checkout') ~ '/order', { number: cart.uid, success: 'true' })) }} - {{ hiddenInput('cancelUrl', siteUrl(craft.fostercheckout.getPath('checkout') ~ '/payment')|hash) }} - {{ hiddenInput('orderEmail', cart.email) }} + {{ hiddenInput('cancelUrl', siteUrl(craft.fostercheckout.getPath('checkout') ~ '/payment')|hash) }} + {{ hiddenInput('orderEmail', cart.email) }} - + - {% set params = {} %} + {% set params = {} %} - {# Special params for Paypal checkout #} - {% if className(gateway) == 'craft\\commerce\\paypalcheckout\\gateways\\Gateway' %} - {% set params = { currency: cart.paymentCurrency } %} - {% endif %} + {# Special params for Paypal checkout #} + {% if className(gateway) == 'craft\\commerce\\paypalcheckout\\gateways\\Gateway' %} + {% set params = { currency: cart.paymentCurrency } %} + {% endif %} - {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %} - {% set buttonText = 'Pay'|t('foster-checkout') ~ ' ' ~ cart.totalAsCurrency %} - {% set params = { + {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %} + {% set buttonText = 'Pay'|t('foster-checkout') ~ ' ' ~ cart.totalAsCurrency %} + {% set params = { order: cart, paymentFormType: 'elements', appearance: { @@ -238,117 +192,112 @@ submitButtonText: buttonText, submitButtonClasses: 'mt-8 justify-between items-center gap-4 w-full px-4 py-3 font-medium text-white text-center bg-[var(--brandColor)] border border-[var(--brandColor)] rounded-xl lg:inline-block' } %} - {% endif %} - - - {% namespace gateway.handle|commercePaymentFormNamespace %} - {{ gateway.getPaymentFormHtml(params)|raw }} - {% endnamespace %} - -
-
-
- {% endfor %} - - - -
-
- -
- - {% set note = craft.checkout.note('payment') %} - {% if note %} -
- {{ note|raw }} -
- {% endif %} -
+ {% endif %} + + + {% namespace gateway.handle|commercePaymentFormNamespace %} + {{ gateway.getPaymentFormHtml(params)|raw }} + {% endnamespace %} + + +
+
+ {% endfor %} +
+
+ + {% set note = craft.checkout.note('payment') %} + {% if note %} +
+ {{ note|raw }} +
+ {% endif %} +
-
+ -
- - -
- - - -{% endblock %} - -{% block mobileFooter %} - - {# {% if cart.lineItems|length > 0 %} -
- -
- {% endif %} #} - - {% js %} - var $paymentForms = document.querySelectorAll('.paymentForm'); - if ($paymentForms.length) { - $paymentForms.forEach(($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 %} + + + {% endblock %} + + {% block mobileFooter %} + + {# {% if cart.lineItems|length > 0 %} +
+ +
+ {% endif %} #} + + {% js %} + var $paymentForms = document.querySelectorAll('.paymentForm'); + if ($paymentForms.length) { + $paymentForms.forEach(($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 %}