4
4
5
5
Flexible and powerful Vue 3 components for Stripe. It's a glue between [ Stripe.js] ( https://stripe.com/docs/js ) and Vue component lifecycle.
6
6
7
- - Vue 3: stable ✅
8
- - Vue 2: use [ vue-stripe-elements] ( https://github.com/ectoflow/vue-stripe-elements )
9
-
10
7
# Quickstart
11
8
12
- ### 1. Install package:
9
+ ### 1. Install
13
10
11
+ ** npm**
14
12
``` bash
15
- # npm
16
- npm i vue-stripe-js --save-dev
13
+ npm i vue-stripe-js @stripe/stripe-js --save-dev
14
+ ```
17
15
18
- # yarn
19
- yarn add vue-stripe-js --dev
16
+ ** yarn**
17
+ ``` bash
18
+ yarn add vue-stripe-js @stripe/stripe-js --dev
20
19
```
21
20
22
- ### 2. Load Stripe.js library:
21
+ ** pnpm**
22
+ ``` bash
23
+ pnpm add vue-stripe-js @stripe/stripe-js --save-dev
24
+ ```
25
+
26
+ ### 2. Load Stripe.js
23
27
24
28
``` ts
25
29
import { loadStripe } from ' @stripe/stripe-js'
@@ -115,7 +119,7 @@ export default defineComponent({
115
119
// Handle result.error or result.token
116
120
console.log(result)
117
121
})
118
- },
122
+ }
119
123
120
124
return {
121
125
stripeKey,
@@ -127,13 +131,12 @@ export default defineComponent({
127
131
elms,
128
132
pay
129
133
}
130
- },
134
+ }
131
135
})
132
136
</script>
133
-
134
137
```
135
138
136
- ### 4. Get advanced
139
+ ### 4. Use multiple components
137
140
138
141
Create multiple elements
139
142
@@ -157,9 +160,9 @@ Create multiple elements
157
160
</StripeElements>
158
161
```
159
162
160
- ### 5. Get wild flexible
163
+ ### 5. Be super flexible
161
164
162
- You can even create multiple groups, don't ask me why. It's possible .
165
+ You can even create multiple groups.
163
166
164
167
``` vue
165
168
<StripeElements
@@ -301,17 +304,11 @@ setup() {
301
304
postalCode: ' 12345'
302
305
}
303
306
})
304
- return {
305
- elementOptions,
307
+
308
+ const changePostalCode = (postalCode ) => {
309
+ elementOptions .value .postalCode = postalCode
306
310
}
307
311
},
308
-
309
- methods: {
310
- changePostalCode () {
311
- // will update stripe element automatically
312
- this .elementOptions .value .postalCode = ' 54321'
313
- }
314
- }
315
312
```
316
313
317
314
### events
0 commit comments