# @gourmetpro/vue-stripe-js

> Vue components for Stripe.js and Stripe Elements

Latest version **0.3.0** (published 2020-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gourmetpro/vue-stripe-js
pnpm add @gourmetpro/vue-stripe-js
yarn add @gourmetpro/vue-stripe-js
bun add @gourmetpro/vue-stripe-js
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-05-04 |
| First published | 2020-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 105.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | GourmetPro |
| Maintainers | knshiro |
| Keywords | Vue, Stripe, Elements |

## Links

- npm: https://www.npmjs.com/package/@gourmetpro/vue-stripe-js
- Repository: https://github.com/GourmetPro/vue-stripe-js
- Homepage: https://github.com/GourmetPro/vue-stripe-js#readme
- Issues: https://github.com/GourmetPro/vue-stripe-js/issues
- npm.io page: https://npm.io/package/@gourmetpro/vue-stripe-js

## Recent versions

- 0.3.0 (latest) — 2020-05-04
- 0.2.0 — 2020-05-03

## README

# Vue Stripe.js

Vue components for
[Stripe.js and Elements](https://stripe.com/docs/stripe-js).

## Getting started

First, install Vue Stripe.js and
[Stripe.js](https://github.com/stripe/stripe-js).

```sh
npm install @gourmetpro/vue-stripe-js @stripe/stripe-js
```

#### Using plugin

Install the plugin in your `src/main.js`
```js
import Vue from "vue";
import App from "./App.vue";
import { loadStripe } from "@stripe/stripe-js";
import VueStripe from "@gourmetpro/vue-stripe-js";

const stripePromise = loadStripe('pk_test_xxxxxxxxx');
Vue.use(VueStripe, { stripe: stripePromise });

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

Then in one of your components
```vue
<template>
  <div>
    <card-element
      v-if="$stripe.elements"
      @change="ccCompleted = $event.complete"
      @ready="card = $event"
    >
    <button @click="payByCard">Subscribe</button>
  </div>
</template>

<script>
import { CardElement } from "@gourmetpro/vue-stripe-js";

export default {
  components: { CardElement },
  data() {
    return {
      ccCompleted: false,
      card:  null;
    }
  },
  methods: {
    async submit() {
      if (!this.$stripe.stripe || !this.card) {
        return;
      }
      const {
        error,
        paymentMethod
      } = await this.$stripe.stripe.createPaymentMethod({
        type: "card",
        card: this.card
      });
    }
  }
}
</script>
```

#### Using slot props

In parent component (e.g. `src/App.vue`)

```vue
<template>
  <elements :stripe="stripePromise">
    <checkout-form />
  </elements>
</template>

<script>
import { Elements } from "@gourmetpro/vue-stripe-js";
import CheckoutForm from "@/components/CheckoutForm.vue";

export default {
  components: {
    Elements,
    CheckoutForm,
  },
  data() {
    return {
      stripePromise: loadStripe("pk_test_xxxxxxxxx");
    }
  }
}
</script>
```

In child component (e.g. `src/components/CheckoutForm.vue`)
```vue
<template>
  <elements-consumer>
    <template v-slot="{stripe, elements}">
      <card-element
        v-if="elements"
        @change="ccCompleted = $event.complete"
        @ready="card = $event" />
      <button @click.prevent="submit(stripe)" :disabled="!stripe || !ccCompleted">Pay</button>
    </template>
  </elements-consumer>
</template>

<script>
import { CardElement, ElementsConsumer } from "@gourmetpro/vue-stripe-js";

export default {
  components: { CardElement, ElementsConsumer },
  data() {
    return {
      ccCompleted: false,
      card:  null;
    }
  },
  methods: {
    async submit(stripe) {
      if (!this.card) {
        return;
      }

      const { error, paymentMethod } = await stripe.createPaymentMethod({
        type: "card",
        card: this.card
      });
    }
  }
}
</script>
```


### Minimum requirements

The minimum supported version of Vue is v2.6.

### TypeScript support

Vue Stripe.js is packaged with TypeScript declarations. Some types are pulled
from [`@stripe/stripe-js`](https://github.com/stripe/stripe-js)—be sure to add
`@stripe/stripe-js` as a dependency to your project for full TypeScript support.


## Contribute

Developer mode with entry point at `dev/serve.ts`
```
yarn serve
```

Build
```
yarn build
```

---
_Source: https://npm.io/package/@gourmetpro/vue-stripe-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._