You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-stripe-js

Package Overview
Dependencies
Maintainers
0
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-stripe-js - npm Package Compare versions

Comparing version

1.0.3
to
1.0.4

14

package.json
{
"name": "vue-stripe-js",
"version": "1.0.3",
"version": "1.0.4",
"description": "Vue 3 components for Stripe.js: Elements & Checkout",

@@ -15,6 +15,3 @@ "main": "./dist/vue-stripe.umd.js",

"types": "./types/vue-stripe.d.ts",
"files": [
"dist",
"types"
],
"files": ["dist", "types"],
"repository": {

@@ -50,4 +47,2 @@ "type": "git",

"@types/stripe": "^8.0.417",
"@typescript-eslint/eslint-plugin": "^5.3.1",
"@typescript-eslint/parser": "^5.3.1",
"@vitejs/plugin-vue": "^2.3.3",

@@ -57,8 +52,3 @@ "@vue/compiler-sfc": "^3.0.5",

"@vuedx/typescript-plugin-vue": "^0.7.4",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.3.1",
"prettier": "^2.3.0",
"typescript": "^4.1.3",

@@ -65,0 +55,0 @@ "vite": "^2.6.14",

101

README.md

@@ -5,3 +5,4 @@ [![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)

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

@@ -13,14 +14,17 @@ # Quickstart

**npm**
```bash
npm i vue-stripe-js @stripe/stripe-js --save-dev
npm i vue-stripe-js @stripe/stripe-js
```
**yarn**
```bash
yarn add vue-stripe-js @stripe/stripe-js --dev
yarn add vue-stripe-js @stripe/stripe-js
```
**pnpm**
```bash
pnpm add vue-stripe-js @stripe/stripe-js --save-dev
pnpm add vue-stripe-js @stripe/stripe-js
```

@@ -31,4 +35,4 @@

```ts
import { loadStripe } from '@stripe/stripe-js'
import { defineComponent, ref, onBeforeMount } from 'vue'
import { loadStripe } from "@stripe/stripe-js"
import { defineComponent, onBeforeMount, ref } from "vue"

@@ -40,3 +44,3 @@ export default defineComponent({

const stripeLoaded = ref(false)
const stripePromise = loadStripe('your_key')
const stripePromise = loadStripe("your_key")
stripePromise.then(() => {

@@ -50,3 +54,4 @@ stripeLoaded.value = true

> Alternatively, you can load Stripe library by including script tag. Just make sure it's ready before your stripe components mount.
> Alternatively, you can load Stripe library by including script tag. Just make
> sure it's ready before your stripe components mount.

@@ -57,6 +62,4 @@ ```

### 3. Use built-in components
### 3. Card payment (default)
Create card
```vue

@@ -145,7 +148,37 @@ <template>

### 4. Use multiple components
### 4. Payment element (requires backend)
Create multiple elements
1. Add server code by following
[stripe guide](https://docs.stripe.com/payments/quickstart?lang=node)
1. Grab `clientSecret` from the payment intent
1. Pass it to `elements-options`
```vue
<template>
<StripeElements
...
:elements-options="elementsOptions"
>
<StripeElement
type="payment"
...
/>
</StripeElements>
<template />
```
```ts
const elementsOptions = ref({
clientSecret: "grab_it_from_payment_intent",
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
})
```
#### It works!
<img width="840" alt="image" src="https://github.com/user-attachments/assets/0619f7b5-a70f-48a1-84c4-c75bf9fc6ded" />
### 5. Use elements like lego
```vue
<StripeElements

@@ -170,25 +203,2 @@ v-slot="{ elements }"

### 5. Be super flexible
You can even create multiple groups.
```vue
<StripeElements
v-slot="{ elements }"
:stripe-key="stripeKey1"
:instance-options="instanceOptions1"
:elements-options="elementsOptions1"
>
<StripeElement :elements="elements" :options="cardOptions" />
</StripeElements>
<StripeElements
v-slot="{ elements }"
:stripe-key="stripeKey2"
:instance-options="instanceOptions2"
:elements-options="elementsOptions2"
>
<StripeElement type="iban" :elements="elements" :options="ibanOptions" />
</StripeElements>
```
# Types

@@ -210,6 +220,7 @@

Think of it as of individual group of elements. It creates stripe instance and elements object.
Think of it as of individual group of elements. It creates stripe instance and
elements object.
```js
import { StripeElements } from 'vue-stripe-js'
import { StripeElements } from "vue-stripe-js"
```

@@ -239,3 +250,4 @@

You can access `instance` and `elements` by adding ref to StripeElements component.
You can access `instance` and `elements` by adding ref to StripeElements
component.

@@ -253,3 +265,4 @@ ```js

Elegant solution for props. Really handy because you can make stripe `instance` and `elements` objects available to all children without adding extra code.
Elegant solution for props. Really handy because you can make stripe `instance`
and `elements` objects available to all children without adding extra code.

@@ -269,3 +282,3 @@ ```vue

```js
import { StripeElement } from 'vue-stripe-js'
import { StripeElement } from "vue-stripe-js"
```

@@ -310,3 +323,4 @@

Element options are reactive. Recommendation: don't use v-model on `StripeElement`, instead pass value via options.
Element options are reactive. Recommendation: don't use v-model on
`StripeElement`, instead pass value via options.

@@ -344,2 +358,3 @@ ```js

No base style included. Main reason: overriding it isn't fun. Style as you wish via element options: [see details](https://stripe.com/docs/js/appendix/style).
No base style included. Main reason: overriding it isn't fun. Style as you wish
via element options: [see details](https://stripe.com/docs/js/appendix/style).