-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
96 lines (87 loc) · 2.94 KB
/
index.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
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Use Stripe Demo</title>
<!-- ** Toggle the following scripts to change in-browser Vue version ** -->
<script src="https://unpkg.com/vue@3"></script>
<!-- <script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/[email protected]"></script> -->
</head>
<body>
<div id="app"></div>
<!-- ** Toggle the following scripts use ESM+TS example or raw in-browser example ** -->
<!-- <script type="module" src="./example.ts"></script> -->
<script src="https://unpkg.com/[email protected]"></script>
<script type="module">
import './dist/index.umd.js'
import '@stripe/stripe-js'
const { createApp, h, ref, isVue2 } = window.VueDemi
const { useStripe, StripeElement } = window.VueUseStripe
createApp({
setup() {
const event = ref(null)
const {
stripe,
elements: [cardElement],
} = useStripe({
key: import.meta.env.VITE_STRIPE_PUBLIC_KEY,
elements: [{ type: 'card', options: {} }],
})
const registerCard = () => {
if (event.value?.complete) {
// Refer to the official docs to see all the Stripe instance properties.
// E.g. https://stripe.com/docs/js/setup_intents/confirm_card_setup
return stripe.value?.confirmCardSetup('<client-secret>', {
// eslint-disable-next-line @typescript-eslint/camelcase
payment_method: {
card: cardElement.value,
},
})
}
}
const onChange = (changeEvent) => {
event.value = changeEvent
}
return () =>
h(
'div',
{ style: { maxWidth: '400px', margin: '20px auto' } },
[
h('div', {}, [
`Using UMD and Vue ${isVue2 ? 2 : 3}`,
]),
// @ts-ignore
h(StripeElement, {
style: { margin: '20px 0', height: '20px' },
...(isVue2
? {
props: { element: cardElement.value },
on: { change: onChange },
}
: { element: cardElement.value, onChange }),
}),
h(
'button',
// @ts-ignore
isVue2
? { on: { click: registerCard } }
: { onClick: registerCard },
'Add'
),
event?.value?.error
? h(
'div',
{ style: { marginTop: '20px', color: 'red' } },
event.value.error.message
)
: null,
]
)
},
}).mount('#app')
</script>
</body>
</html>