Skip to content

Commit e44dcca

Browse files
committed
docs: update funding info
1 parent 72d8811 commit e44dcca

File tree

3 files changed

+58
-43
lines changed

3 files changed

+58
-43
lines changed

.github/FUNDING.yml

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
# These are supported funding model platforms
2-
github: [softbeehive]
3-
custom: ['https://paypal.me/softbeehive']
2+
custom: ["https://paypal.me/softbeehive"]

README.md

+48-37
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,24 @@
66
[![npm](https://img.shields.io/npm/dm/vue-stripe-js)](https://www.npmjs.com/package/vue-stripe-js)
77
[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://vshymanskyy.github.io/StandWithUkraine)
88

9-
Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle. Works with Nuxt 3.
9+
Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy
10+
to start, friendly DX, minimal abstractions, and full control. It's a glue
11+
between Stripe.js and Vue component lifecycle. Works with Nuxt 3.
1012

1113
🟢 **[Live demo](https://vue-stripe-js.netlify.app/)**
1214

1315
## Health 💜
14-
Consider supporting efforts to make this project healthy and sustainable. Thank you!
1516

16-
- **[Become a sponsor](https://github.com/sponsors/softbeehive)**
17+
Consider supporting efforts to make this project healthy and sustainable. Thank
18+
you!
19+
1720
- **[Donate via PayPal](https://paypal.me/softbeehive)**
1821

1922
## Quickstart ⚡️
2023

2124
### Upgrade
22-
- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**
25+
26+
- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**
2327
- **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**
2428

2529
### 1. Install
@@ -44,15 +48,17 @@ onBeforeMount(async() => {
4448
</script>
4549
```
4650

47-
Alternatively, include a script tag. Make sure Stripe.js is loaded before you mount Vue components.
51+
Alternatively, include a script tag. Make sure Stripe.js is loaded before you
52+
mount Vue components.
4853

4954
```html
5055
<script src="https://js.stripe.com/v3/"></script>
5156
```
5257

5358
### 3. Payment Element
5459

55-
Based on – [deferred payment guide](https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment)
60+
Based on –
61+
[deferred payment guide](https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment)
5662

5763
```vue
5864
<template>
@@ -150,12 +156,13 @@ async function handleSubmit() {
150156
}
151157
}
152158
</script>
153-
154159
```
155160

156161
## Examples 🌿
157162

158-
Thanks to the Provider Pattern used in StripeElements, you get minimalist tools with full access to Stripe.js methods and properties. This results in better developer experience (DX), simpler code, and fewer bugs.
163+
Thanks to the Provider Pattern used in StripeElements, you get minimalist tools
164+
with full access to Stripe.js methods and properties. This results in better
165+
developer experience (DX), simpler code, and fewer bugs.
159166

160167
These examples use Vue Composition API and TypeScript.
161168

@@ -170,7 +177,9 @@ These examples use Vue Composition API and TypeScript.
170177

171178
## Advanced integration 🏗️
172179

173-
All features of Stripe.js are available in two components. The benefits of Vue solution: element is created and destroyed automatically, options are reactive, event listeners are attached to StripeElement. Simple and future-proof.
180+
All features of Stripe.js are available in two components. The benefits of Vue
181+
solution: element is created and destroyed automatically, options are reactive,
182+
event listeners are attached to StripeElement. Simple and future-proof.
174183

175184
🥇 **Most important property is type** 🥇
176185

@@ -181,33 +190,34 @@ All features of Stripe.js are available in two components. The benefits of Vue s
181190
```
182191

183192
Available types
193+
184194
```ts
185195
type StripeElementType =
186-
| 'address'
187-
| 'affirmMessage'
188-
| 'afterpayClearpayMessage'
189-
| 'auBankAccount'
190-
| 'card'
191-
| 'cardNumber'
192-
| 'cardExpiry'
193-
| 'cardCvc'
194-
| 'currencySelector'
195-
| 'epsBank'
196-
| 'expressCheckout'
197-
| 'fpxBank'
198-
| 'iban'
199-
| 'idealBank'
200-
| 'p24Bank'
201-
| 'payment'
202-
| 'paymentMethodMessaging'
203-
| 'paymentRequestButton'
204-
| 'linkAuthentication'
205-
| 'shippingAddress'
206-
| 'issuingCardNumberDisplay'
207-
| 'issuingCardCvcDisplay'
208-
| 'issuingCardExpiryDisplay'
209-
| 'issuingCardPinDisplay'
210-
| 'issuingCardCopyButton'
196+
| "address"
197+
| "affirmMessage"
198+
| "afterpayClearpayMessage"
199+
| "auBankAccount"
200+
| "card"
201+
| "cardNumber"
202+
| "cardExpiry"
203+
| "cardCvc"
204+
| "currencySelector"
205+
| "epsBank"
206+
| "expressCheckout"
207+
| "fpxBank"
208+
| "iban"
209+
| "idealBank"
210+
| "p24Bank"
211+
| "payment"
212+
| "paymentMethodMessaging"
213+
| "paymentRequestButton"
214+
| "linkAuthentication"
215+
| "shippingAddress"
216+
| "issuingCardNumberDisplay"
217+
| "issuingCardCvcDisplay"
218+
| "issuingCardExpiryDisplay"
219+
| "issuingCardPinDisplay"
220+
| "issuingCardCopyButton";
211221

212222
// Check actual element types in @stripe/stripe-js
213223
```
@@ -217,6 +227,7 @@ type StripeElementType =
217227
```html
218228
<StripeElement @blur="doSomething" />
219229
```
230+
220231
Following events are emitted on StripeElement
221232

222233
- change
@@ -228,7 +239,6 @@ Following events are emitted on StripeElement
228239
- loaderror
229240
- loaderstart
230241

231-
232242
## Styling
233243

234244
Add classes to components
@@ -239,7 +249,8 @@ Add classes to components
239249
</StripeElements>
240250
```
241251

242-
Style element via options - [read documentation](https://stripe.com/docs/js/appendix/style)
252+
Style element via options -
253+
[read documentation](https://stripe.com/docs/js/appendix/style)
243254

244255
```ts
245256
const cardOptions = ref<StripeCardElementOptions>({
@@ -251,5 +262,5 @@ const cardOptions = ref<StripeCardElementOptions>({
251262
iconColor: "red",
252263
},
253264
},
254-
})
265+
});
255266
```

examples/README.md

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
# Vue Stripe.js
22

3-
Full power of Stripe.js + beauty of Vue. Build advanced payment integrations quickly. Use examples for easy start with Payment, Card, and Express Checkout.
3+
Full power of Stripe.js + beauty of Vue. Build advanced payment integrations
4+
quickly. Use examples for easy start with Payment, Card, and Express Checkout.
45

5-
## Demo
6+
## Demo
67

78
**1. Clone**
9+
810
```bash
911
git clone [email protected]:ectoflow/vue-stripe-js.git --depth=1 && cd vue-stripe-js
1012
```
@@ -16,12 +18,15 @@ npm install
1618
```
1719

1820
**3. Run demo**
21+
1922
```bash
2023
npm run dev
2124
```
2225

2326
## Donate
2427

25-
It's an open-source project and completely free to use. Keeping it up-to-date with the Stripe.js API is hard work. Consider supporting my efforts to make vue-stripe-js healthy and sustainable. Thank you!
28+
It's an open-source project and completely free to use. Keeping it up-to-date
29+
with the Stripe.js API is hard work. Consider supporting my efforts to make
30+
vue-stripe-js healthy and sustainable. Thank you!
2631

27-
[**Become a sponsor** 💜](https://github.com/sponsors/softbeehive)
32+
**[Donate via PayPal](https://paypal.me/softbeehive)**

0 commit comments

Comments
 (0)