-
Notifications
You must be signed in to change notification settings - Fork 8
/
payment.antlers.html
86 lines (73 loc) · 3.5 KB
/
payment.antlers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{{# If there's nothing in the cart, redirect the user to the Cart page. #}}
{{ if {sc:cart:count} === 0 }}
{{ redirect to="/cart" }}
{{ /if }}
<section class="fluid-container pt-12 text-center">
{{ partial:typography/prose as="article" class="contents" }}
<h1>Checkout</h1>
{{ /partial:typography/prose }}
</section>
<main>
<div class="max-w-4xl mx-auto my-12 px-4">
<div class="flex flex-col md:flex-row w-full">
<div class="w-full">
<div class="max-w-lg">
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Payment
</h2>
{{ partial:checkout/errors }}
{{ sc:checkout x-data="checkoutForm" id="checkout-form" redirect="/checkout/complete" @submit.prevent="submit" }}
<div>
{{ if {sc:gateways:count} > 1 }}
<div class="grid md:grid-cols-12 gap-6 mb-6">
{{ partial:components/forms/select_field width="100" handle="gateway" display="Payment Method" x-model="gateway" required="true" }}
{{ sc:gateways }}
<option value="{{ handle }}" {{ if first }} selected {{ /if }}>{{ display }}</option>
{{ /sc:gateways }}
{{ /partial:components/forms/select_field }}
</div>
{{ else }}
<input type="hidden" name="gateway" x-model="gateway">
{{ /if }}
{{ sc:gateways }}
<div class="pb-4 mb-4" x-show="gateway === '{{ handle }}'">
{{ partial src="checkout/gateways/{ handle }" }}
</div>
{{ /sc:gateways }}
</div>
<template x-if="isOnSiteGateway">
<div class="my-6 flex justify-center">
{{ partial:components/button label="Finish & Pay" type="submit" as="button" }}
</div>
</template>
{{ /sc:checkout }}
</div>
</div>
<div class="w-full md:w-2/5 mb-4 md:mb-0">
{{ partial:checkout/cart }}
</div>
</div>
</div>
</main>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('checkoutForm', () => ({
isSubmitting: false,
gateway: '{{ sc:gateways }}{{ if first }}{{ handle }}{{ /if }}{{ /sc:gateways }}',
// There's currently no way to detect if a gateway is on-site or off-site.
// For now, we've just hard coded Stripe & the Dummy Gateway as on-site.
get isOnSiteGateway() {
return this.gateway.includes('stripe') || this.gateway.includes('dummy');
},
get isStripe() {
return this.gateway.includes('stripe');
},
submit() {
this.isSubmitting = true;
this.$el.querySelector('button').disabled = true;
this.$el.querySelector('button').classList.add('opacity-50');
this.isStripe ? this.$dispatch('StripeConfirmPayment') : this.$el.submit();
},
}));
});
</script>