Skip to content

Commit a9e4ecc

Browse files
committed
docs: address reported issues
1 parent fa74340 commit a9e4ecc

File tree

3 files changed

+587
-590
lines changed

3 files changed

+587
-590
lines changed

README.md

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,26 @@
44

55
Flexible 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
2529
import { 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

138141
Create 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

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-stripe-js",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "Vue 3 components for Stripe.js: Elements & Checkout",
55
"main": "./dist/vue-stripe.umd.js",
66
"module": "./dist/vue-stripe.es.js",

0 commit comments

Comments
 (0)