Skip to content

Commit

Permalink
feat: Manual gateway for free/zero amount orders
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnnynotsolucky
johnnynotsolucky committed Sep 11, 2024
1 parent 2c4cac0 commit 17d149f
Showing 1 changed file with 83 additions and 67 deletions.
150 changes: 83 additions & 67 deletions src/templates/checkout/payment.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% set addresses = currentUser ? (currentUser.addresses.all() ?? null) : null %}

<div class="mt-10 pb-28 lg:mt-20 lg:pb-32"
v-scope="{ gatewayId: {{ cart.gatewayId ? cart.gatewayId : 1 }}, billingSameAsShipping: {{ cart.hasMatchingAddresses() ? 1 : 0 }}, addressBookBillingAddress: 0, newBillingAddress: {{ cart.hasMatchingAddresses() ? 0 : 1 }}, billingAddressId: {{ cart.billingAddressId ? cart.billingAddressId : cart.shippingAddressId }} }">
v-scope="{ gatewayId: {{ cart.gatewayId ? cart.gatewayId : 1 }}, billingSameAsShipping: {{ cart.hasMatchingAddresses() ? 1 : 0 }}, addressBookBillingAddress: 0, newBillingAddress: {{ cart.hasMatchingAddresses() ? 0 : 1 }}, billingAddressId: {{ cart.billingAddressId ?? cart.shippingAddressId ?? 'null'}} }">


<h1 class="mb-12 font-medium text-3xl">{{ 'Checkout'|t('foster-checkout') }}</h1>
Expand Down Expand Up @@ -35,7 +35,7 @@
<div class="xl:border xl:border-gray-250 xl:rounded-lg xl:overflow-hidden">

<input type="hidden" name="billingAddressSameAsShipping" value="1"
:disabled="parseInt(billingSameAsShipping) === 0"/>
:disabled="parseInt(billingSameAsShipping) === 0"/>

<div class="p-4" :class="{ 'bg-gray-100': parseInt(billingSameAsShipping) === 1 }">
<div class="radio">
Expand Down Expand Up @@ -171,63 +171,79 @@
<div
class="xl:border xl:border-b-0 xl:border-gray-250 xl:mt-8 xl:rounded-lg xl:overflow-hidden">
{% for gateway in gateways %}
<div class="p-4 border-b border-gray-250"
:class="{ 'bg-gray-100': parseInt(gatewayId) === {{ gateway.id }} }">
<div class="flex justify-between items-center gap-4 radio">
<input id="gateway_{{ gateway.id }}" name="gatewayId" type="radio"
class="sr-only" value="{{ gateway.id }}" checked
@change="gatewayId = {{ gateway.id }}"/>
<label for="gateway_{{ gateway.id }}"
class="inline-flex justify-start items-center gap-4 cursor-pointer">
<span class="block">{{ gateway.name }}</span>
</label>
</div>
<div class="pt-8">
<form method="POST" id="paymentForm">
{{ 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) }}

<input type="hidden" v-model="gatewayId"/>

{% set params = {} %}

{# Special params for Paypal checkout #}
{% if className(gateway) == 'craft\\commerce\\paypalcheckout\\gateways\\Gateway' %}
{% set params = { currency: cart.paymentCurrency } %}
{% endif %}
{% set gatewayClass = className(gateway) %}
{%
set shouldRender = cart.total == 0 and gatewayClass == 'craft\\commerce\\gateways\\Manual'
or cart.total > 0 and gatewayClass != 'craft\\commerce\\gateways\\Manual'
%}
{% if shouldRender %}
<div class="p-4 border-b border-gray-250"
:class="{ 'bg-gray-100': parseInt(gatewayId) === {{ gateway.id }} }">
<div class="flex justify-between items-center gap-4 radio">
<input id="gateway_{{ gateway.id }}" name="gatewayId" type="radio"
class="sr-only" value="{{ gateway.id }}" checked
@change="gatewayId = {{ gateway.id }}"/>
<label for="gateway_{{ gateway.id }}"
class="inline-flex justify-start items-center gap-4 cursor-pointer">
<span class="block">{{ gateway.name }}</span>
</label>
</div>
<div class="pt-8">
<form method="POST" id="paymentForm">
{{ 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) }}

<input type="hidden" v-model="gatewayId"/>

{% set params = {} %}

{# Special params for Paypal checkout #}
{% if gatewayClass == '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 = {
order: cart,
paymentFormType: 'elements',
appearance: {
theme: 'stripe',
labels: 'floating',
variables: {
colorPrimary: 'var(--brandColor)'
}
},
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 %}

</form>
{% if gatewayClass == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
{% set params = {
order: cart,
paymentFormType: 'elements',
appearance: {
theme: 'stripe',
labels: 'floating',
variables: {
colorPrimary: 'var(--brandColor)'
}
},
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 %}

{% if gatewayClass == 'craft\\commerce\\gateways\\Manual' %}
<button
type="submit"
class="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"
>
{{ buttonText }}
</button>
{% endif %}

</form>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
Expand Down Expand Up @@ -315,17 +331,17 @@
{% 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;
});
});
$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 %}

Expand Down

0 comments on commit 17d149f

Please sign in to comment.