Skip to content

Update dev dependencies and funding #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
# These are supported funding model platforms
github: [softbeehive]
custom: ['https://paypal.me/softbeehive']
custom: ["https://paypal.me/softbeehive"]
85 changes: 48 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,24 @@
[![npm](https://img.shields.io/npm/dm/vue-stripe-js)](https://www.npmjs.com/package/vue-stripe-js)
[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://vshymanskyy.github.io/StandWithUkraine)

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.
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.

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

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

- **[Become a sponsor](https://github.com/sponsors/softbeehive)**
Consider supporting efforts to make this project healthy and sustainable. Thank
you!

- **[Donate via PayPal](https://paypal.me/softbeehive)**

## Quickstart ⚡️

### Upgrade
- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**

- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**
- **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**

### 1. Install
Expand All @@ -44,15 +48,17 @@ onBeforeMount(async() => {
</script>
```

Alternatively, include a script tag. Make sure Stripe.js is loaded before you mount Vue components.
Alternatively, include a script tag. Make sure Stripe.js is loaded before you
mount Vue components.

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

### 3. Payment Element

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

```vue
<template>
Expand Down Expand Up @@ -150,12 +156,13 @@ async function handleSubmit() {
}
}
</script>

```

## Examples 🌿

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.
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.

These examples use Vue Composition API and TypeScript.

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

## Advanced integration 🏗️

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.
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.

🥇 **Most important property is type** 🥇

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

Available types

```ts
type StripeElementType =
| 'address'
| 'affirmMessage'
| 'afterpayClearpayMessage'
| 'auBankAccount'
| 'card'
| 'cardNumber'
| 'cardExpiry'
| 'cardCvc'
| 'currencySelector'
| 'epsBank'
| 'expressCheckout'
| 'fpxBank'
| 'iban'
| 'idealBank'
| 'p24Bank'
| 'payment'
| 'paymentMethodMessaging'
| 'paymentRequestButton'
| 'linkAuthentication'
| 'shippingAddress'
| 'issuingCardNumberDisplay'
| 'issuingCardCvcDisplay'
| 'issuingCardExpiryDisplay'
| 'issuingCardPinDisplay'
| 'issuingCardCopyButton'
| "address"
| "affirmMessage"
| "afterpayClearpayMessage"
| "auBankAccount"
| "card"
| "cardNumber"
| "cardExpiry"
| "cardCvc"
| "currencySelector"
| "epsBank"
| "expressCheckout"
| "fpxBank"
| "iban"
| "idealBank"
| "p24Bank"
| "payment"
| "paymentMethodMessaging"
| "paymentRequestButton"
| "linkAuthentication"
| "shippingAddress"
| "issuingCardNumberDisplay"
| "issuingCardCvcDisplay"
| "issuingCardExpiryDisplay"
| "issuingCardPinDisplay"
| "issuingCardCopyButton";

// Check actual element types in @stripe/stripe-js
```
Expand All @@ -217,6 +227,7 @@ type StripeElementType =
```html
<StripeElement @blur="doSomething" />
```

Following events are emitted on StripeElement

- change
Expand All @@ -228,7 +239,6 @@ Following events are emitted on StripeElement
- loaderror
- loaderstart


## Styling

Add classes to components
Expand All @@ -239,7 +249,8 @@ Add classes to components
</StripeElements>
```

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

```ts
const cardOptions = ref<StripeCardElementOptions>({
Expand All @@ -251,5 +262,5 @@ const cardOptions = ref<StripeCardElementOptions>({
iconColor: "red",
},
},
})
});
```
4 changes: 2 additions & 2 deletions biome.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": false,
"enabled": true,
"clientKind": "git",
"useIgnoreFile": false
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
Expand Down
13 changes: 9 additions & 4 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# Vue Stripe.js

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

## Demo
## Demo

**1. Clone**

```bash
git clone [email protected]:ectoflow/vue-stripe-js.git --depth=1 && cd vue-stripe-js
```
Expand All @@ -16,12 +18,15 @@ npm install
```

**3. Run demo**

```bash
npm run dev
```

## Donate

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!
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!

[**Become a sponsor** 💜](https://github.com/sponsors/softbeehive)
**[Donate via PayPal](https://paypal.me/softbeehive)**
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,20 @@
"url": "https://github.com/ectoflow/vue-stripe-js/issues"
},
"dependencies": {
"@stripe/stripe-js": "^5.5.0"
"@stripe/stripe-js": "^5.6.0"
},
"devDependencies": {
"@arethetypeswrong/cli": "^0.17.3",
"@arethetypeswrong/cli": "^0.17.4",
"@biomejs/biome": "1.9.4",
"@tailwindcss/vite": "4.0.0",
"@tailwindcss/vite": "^4.0.8",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "0.7.0",
"publint": "^0.3.2",
"tailwindcss": "4.0.0",
"publint": "^0.3.6",
"tailwindcss": "^4.0.8",
"typescript": "^5.7.3",
"vite": "^6.0.11",
"vite": "^6.1.1",
"vite-plugin-dts": "^4.5.0",
"vue": "^3.5.13",
"vue-tsc": "^2.2.0"
"vue-tsc": "^2.2.4"
}
}
Loading
Loading