-
Notifications
You must be signed in to change notification settings - Fork 36
/
+page.svelte
150 lines (129 loc) · 3.29 KB
/
+page.svelte
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<script>
import { goto } from '$app/navigation'
import { onMount } from 'svelte'
import { loadStripe } from '@stripe/stripe-js'
import { PUBLIC_STRIPE_KEY } from '$env/static/public'
import Address from './Address.svelte'
let stripe = null
let error = null
let processing = false
let email = '[email protected]'
let name = 'John Smith'
let billingAddress = {
line1: '123 Main',
line2: 'Apt 100',
state: 'CA',
city: 'Los Angeles',
country: 'US',
postal_code: '1000'
}
let shippingAddress = {
line1: '123 Main',
line2: 'Apt 100',
state: 'CA',
city: 'Los Angeles',
country: 'US',
postal_code: '1000'
}
onMount(async () => {
stripe = await loadStripe(PUBLIC_STRIPE_KEY)
// check if ?error=true query string is set
const searchParams = new URLSearchParams(window.location.search)
error = searchParams.get('error')
})
async function createPaymentIntent() {
// create payment intent
const response = await fetch('/examples/afterpay-clearpay/payment-intent', {
method: 'POST',
headers: {
'content-type': 'application/json'
}
})
const { clientSecret } = await response.json()
return clientSecret
}
async function submit() {
// avoid processing duplicates
if (processing) return
processing = true
// create payment intent server side
const clientSecret = await createPaymentIntent()
// confirm payment with stripe
const result = await stripe.confirmAfterpayClearpayPayment(clientSecret, {
payment_method: {
billing_details: {
name,
email,
address: billingAddress
}
},
shipping: {
name,
address: shippingAddress
},
return_url: `${window.location.origin}/examples/afterpay-clearpay/return`
})
// log results, for debugging
console.log({ result })
if (result.error) {
// payment failed, notify user
error = result.error
processing = false
}
}
</script>
<h1>Afterpay/Clearpay Example</h1>
<nav>
<a
href="https://github.com/joshnuss/svelte-stripe/tree/main/src/routes/examples/afterpay-clearpay"
>View code</a
>
</nav>
{#if error}
<p class="error">Payment failed. Please try again.</p>
{/if}
<form on:submit|preventDefault={submit}>
<Address legend="Billing" bind:address={billingAddress}>
<label for="name"> Name </label>
<input id="name" bind:value={name} required />
<label for="email"> Email </label>
<input type="email" id="email" bind:value={email} required />
</Address>
<Address legend="Shipping" bind:address={shippingAddress} />
<button disabled={processing}>
{#if processing}
Processing...
{:else}
Pay with Afterpay/Clearpay
{/if}
</button>
</form>
<style>
.error {
color: tomato;
margin: 2rem 0 0;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
margin: 2rem 0;
}
form :global(input),
:global(.input),
form :global(select) {
border: solid 1px var(--gray-color);
padding: 1rem;
border-radius: 5px;
background: white;
}
button {
padding: 1rem;
border-radius: 5px;
border: solid 1px #ccc;
color: white;
background: var(--link-color);
font-size: 1.2rem;
margin: 1rem 0;
}
</style>