You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://vshymanskyy.github.io/StandWithUkraine)
8
8
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.
@@ -150,12 +156,13 @@ async function handleSubmit() {
150
156
}
151
157
}
152
158
</script>
153
-
154
159
```
155
160
156
161
## Examples 🌿
157
162
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.
159
166
160
167
These examples use Vue Composition API and TypeScript.
161
168
@@ -170,7 +177,9 @@ These examples use Vue Composition API and TypeScript.
170
177
171
178
## Advanced integration 🏗️
172
179
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.
174
183
175
184
🥇 **Most important property is type** 🥇
176
185
@@ -181,33 +190,34 @@ All features of Stripe.js are available in two components. The benefits of Vue s
181
190
```
182
191
183
192
Available types
193
+
184
194
```ts
185
195
typeStripeElementType=
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";
211
221
212
222
// Check actual element types in @stripe/stripe-js
213
223
```
@@ -217,6 +227,7 @@ type StripeElementType =
217
227
```html
218
228
<StripeElement@blur="doSomething" />
219
229
```
230
+
220
231
Following events are emitted on StripeElement
221
232
222
233
- change
@@ -228,7 +239,6 @@ Following events are emitted on StripeElement
228
239
- loaderror
229
240
- loaderstart
230
241
231
-
232
242
## Styling
233
243
234
244
Add classes to components
@@ -239,7 +249,8 @@ Add classes to components
239
249
</StripeElements>
240
250
```
241
251
242
-
Style element via options - [read documentation](https://stripe.com/docs/js/appendix/style)
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.
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!
26
31
27
-
[**Become a sponsor** 💜](https://github.com/sponsors/softbeehive)
32
+
**[Donate via PayPal](https://paypal.me/softbeehive)**
0 commit comments