Skip to content

Commit

Permalink
docs: address reported issues
Browse files Browse the repository at this point in the history
  • Loading branch information
softbeehive committed Feb 19, 2024
1 parent fa74340 commit a9e4ecc
Show file tree
Hide file tree
Showing 3 changed files with 587 additions and 590 deletions.
45 changes: 21 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,26 @@

Flexible and powerful Vue 3 components for Stripe. It's a glue between [Stripe.js](https://stripe.com/docs/js) and Vue component lifecycle.

- Vue 3: stable ✅
- Vue 2: use [vue-stripe-elements](https://github.com/ectoflow/vue-stripe-elements)

# Quickstart

### 1. Install package:
### 1. Install

**npm**
```bash
# npm
npm i vue-stripe-js --save-dev
npm i vue-stripe-js @stripe/stripe-js --save-dev
```

# yarn
yarn add vue-stripe-js --dev
**yarn**
```bash
yarn add vue-stripe-js @stripe/stripe-js --dev
```

### 2. Load Stripe.js library:
**pnpm**
```bash
pnpm add vue-stripe-js @stripe/stripe-js --save-dev
```

### 2. Load Stripe.js

```ts
import { loadStripe } from '@stripe/stripe-js'
Expand Down Expand Up @@ -115,7 +119,7 @@ export default defineComponent({
// Handle result.error or result.token
console.log(result)
})
},
}
return {
stripeKey,
Expand All @@ -127,13 +131,12 @@ export default defineComponent({
elms,
pay
}
},
}
})
</script>
```

### 4. Get advanced
### 4. Use multiple components

Create multiple elements

Expand All @@ -157,9 +160,9 @@ Create multiple elements
</StripeElements>
```

### 5. Get wild flexible
### 5. Be super flexible

You can even create multiple groups, don't ask me why. It's possible.
You can even create multiple groups.

```vue
<StripeElements
Expand Down Expand Up @@ -301,17 +304,11 @@ setup() {
postalCode: '12345'
}
})
return {
elementOptions,

const changePostalCode = (postalCode) => {
elementOptions.value.postalCode = postalCode
}
},

methods: {
changePostalCode() {
// will update stripe element automatically
this.elementOptions.value.postalCode = '54321'
}
}
```

### events
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-stripe-js",
"version": "1.0.1",
"version": "1.0.2",
"description": "Vue 3 components for Stripe.js: Elements & Checkout",
"main": "./dist/vue-stripe.umd.js",
"module": "./dist/vue-stripe.es.js",
Expand Down
Loading

0 comments on commit a9e4ecc

Please sign in to comment.