44
55Flexible and powerful Vue 3 components for Stripe. It's a glue between [ Stripe.js] ( https://stripe.com/docs/js ) and Vue component lifecycle.
66
7- - Vue 3: stable ✅
8- - Vue 2: use [ vue-stripe-elements] ( https://github.com/ectoflow/vue-stripe-elements )
9-
107# Quickstart
118
12- ### 1. Install package:
9+ ### 1. Install
1310
11+ ** npm**
1412``` bash
15- # npm
16- npm i vue-stripe-js --save-dev
13+ npm i vue-stripe-js @stripe/stripe-js --save-dev
14+ ```
1715
18- # yarn
19- yarn add vue-stripe-js --dev
16+ ** yarn**
17+ ``` bash
18+ yarn add vue-stripe-js @stripe/stripe-js --dev
2019```
2120
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
2327
2428``` ts
2529import { loadStripe } from ' @stripe/stripe-js'
@@ -115,7 +119,7 @@ export default defineComponent({
115119 // Handle result.error or result.token
116120 console.log(result)
117121 })
118- },
122+ }
119123
120124 return {
121125 stripeKey,
@@ -127,13 +131,12 @@ export default defineComponent({
127131 elms,
128132 pay
129133 }
130- },
134+ }
131135})
132136</script>
133-
134137```
135138
136- ### 4. Get advanced
139+ ### 4. Use multiple components
137140
138141Create multiple elements
139142
@@ -157,9 +160,9 @@ Create multiple elements
157160</StripeElements>
158161```
159162
160- ### 5. Get wild flexible
163+ ### 5. Be super flexible
161164
162- You can even create multiple groups, don't ask me why. It's possible .
165+ You can even create multiple groups.
163166
164167``` vue
165168<StripeElements
@@ -301,17 +304,11 @@ setup() {
301304 postalCode: ' 12345'
302305 }
303306 })
304- return {
305- elementOptions,
307+
308+ const changePostalCode = (postalCode ) => {
309+ elementOptions .value .postalCode = postalCode
306310 }
307311},
308-
309- methods: {
310- changePostalCode () {
311- // will update stripe element automatically
312- this .elementOptions .value .postalCode = ' 54321'
313- }
314- }
315312```
316313
317314### events
0 commit comments