# vue-stripe-elements-plus

> Stripe Elements components for Vue

Latest version **1.0.4** (published 2024-02-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-stripe-elements-plus
pnpm add vue-stripe-elements-plus
yarn add vue-stripe-elements-plus
bun add vue-stripe-elements-plus
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-02-19 |
| First published | 2017-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 523 |
| Author | Oleksandr Bystrikov |
| Maintainers | softbeehive |
| Keywords | vue, stripe, elements, payment |

## Links

- npm: https://www.npmjs.com/package/vue-stripe-elements-plus
- Repository: https://github.com/ectoflow/vue-stripe-elements
- Homepage: https://github.com/ectoflow/vue-stripe-elements#readme
- Issues: https://github.com/ectoflow/vue-stripe-elements/issues
- npm.io page: https://npm.io/package/vue-stripe-elements-plus

## Recent versions

- 1.0.4 (latest) — 2024-02-19
- 1.0.3 — 2021-11-12
- 1.0.2 — 2021-07-27
- 1.0.1 — 2021-05-27
- 1.0.0 — 2021-03-27
- 0.3.2 — 2019-10-04
- 0.3.1 — 2019-10-04
- 0.3.0 — 2019-08-22
- 0.2.10 — 2019-05-17
- 0.2.9 — 2018-09-12
- 0.2.8 — 2018-01-29
- 0.2.7 — 2018-01-03
- 0.2.6 — 2017-10-23
- 0.2.5 — 2017-10-13
- 0.2.4 — 2017-10-13

## README

# ⚠️ Deprecated ⚠️
This package is no longer maintained. Vue 2 [reached its end-of-life](https://blog.vuejs.org/posts/vue-2-eol) on December 31st, 2023.

# Vue Stripe Elements
- Vue 2: deprecated ❗️
- Vue 3: use [vue-stripe-js](https://github.com/ectoflow/vue-stripe-js) ✅

# Quickstart

### 1. Install package:

```bash
# npm
npm i vue-stripe-elements-plus --save-dev

# yarn
yarn add vue-stripe-elements-plus --dev
```

### 2. Add Stripe.js library to the page:
```
<script src="https://js.stripe.com/v3/"></script>
```
> Alternatively, you can load Stripe library dynamically. Just make sure it's ready before your components mount.

### 3. Use built-in components
Create card

```html
<template>
  <div class="payment-simple">
    <StripeElements
      :stripe-key="stripeKey"
      :instance-options="instanceOptions"
      :elements-options="elementsOptions"
      #default="{ elements }" // attention: important part!
      ref="elms"
    >
      <StripeElement
        type="card"
        :elements="elements"
        :options="cardOptions"
        ref="card"
      />
    </StripeElements>
    <button @click="pay" type="button">Pay</button>
  </div>
</template>

<script>
import { StripeElements, StripeElement } from 'vue-stripe-elements-plus'

export default {
  name: 'PaymentSimple',

  components: {
    StripeElements,
    StripeElement
  },

  data () {
    return {
      stripeKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', // test key, don't hardcode
      instanceOptions: {
        // https://stripe.com/docs/js/initializing#init_stripe_js-options
      },
      elementsOptions: {
        // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
      },
      cardOptions: {
        // reactive
        // remember about Vue 2 reactivity limitations when dealing with options
        value: {
          postalCode: ''
        }
        // https://stripe.com/docs/stripe.js#element-options
      }
    }
  },

  methods: {
    pay () {
      // ref in template
      const groupComponent = this.$refs.elms
      const cardComponent = this.$refs.card
      // Get stripe element
      const cardElement = cardComponent.stripeElement

      // Access instance methods, e.g. createToken()
      groupComponent.instance.createToken(cardElement).then(result => {
        // Handle result.error or result.token
      })
    }
  }
}
</script>
```

### 4. Get advanced
Create multiple elements

```html
<StripeElements
  :stripe-key="stripeKey"
  :instance-options="instanceOptions"
  :elements-options="elementsOptions"
  #default="{ elements }" // attention: important part!
>
  <StripeElement
    type="cardNumber"
    :elements="elements"
    :options="cardNumberOptions"
  />
  <StripeElement
    type="postalCode"
    :elements="elements"
    :options="postalCodeOptions"
  />
</StripeElements>
```

### 5. Go wild
You can even create multiple groups, don't ask me why. It's possible.

```html
<StripeElements
  :stripe-key="stripeKey1"
  :instance-options="instanceOptions1"
  :elements-options="elementsOptions1"
  #default="{ elements }" // attention: important part!
>
  <StripeElement
    :elements="elements"
    :options="cardOptions"
  />
</StripeElements>
<StripeElements
  :stripe-key="stripeKey2"
  :instance-options="instanceOptions2"
  :elements-options="elementsOptions2"
  #default="{ elements }" // attention: important part!
>
  <StripeElement
    type="iban"
    :elements="elements"
    :options="ibanOptions"
  />
</StripeElements>
```

# Styles
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).

# API Reference

## StripeElements.vue
Think of it as of individual group of elements. It creates stripe instance and elements object.

```js
import { StripeElements } from 'vue-stripe-elements-plus'
```

### props
```js
// https://stripe.com/docs/js/initializing#init_stripe_js-options
stripeKey: {
  type: String,
  required: true,
},
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
instanceOptions: {
  type: Object,
  default: () => ({}),
},
// https://stripe.com/docs/stripe.js#element-options
elementsOptions: {
  type: Object,
  default: () => ({}),
},
```

### data
You can access `instance` and `elements` by adding ref to StripeElements component.
```js
// data of StripeElements.vue
instance: {},
elements: {},
```

### default scoped slot
Elegant solution for props. Really handy because you can make `instance` and `elements` available to all children without adding extra code.

```html
<!-- Isn't it cool? I really like it! -->
<StripeElements #default="{elements, instance}">
  <StripeElement :elements="elements" />
  <CustomComponent :instance="instance" />
</StripeElements>
```

## StripeElement.vue
Universal and type agnostic component. Create any element supported by Stripe.

### props
```js
// elements object
// https://stripe.com/docs/js/elements_object/create
elements: {
  type: Object,
  required: true,
},
// type of the element
// https://stripe.com/docs/js/elements_object/create_element?type=card
type: {
  type: String,
  default: () => 'card',
},
// element options
// https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
options: {
  type: [Object, undefined],
},
```

### data
```js
stripeElement
domElement
```

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

```js
data() {
  return {
    elementOptions: {
      value: {
        postalCode: ''
      }
    }
  }
},

methods: {
  changePostalCode() {
    // will update stripe element automatically
    this.elementOptions.value.postalCode = '12345'
  }
}
```

### events
Following events are emitted on StripeElement
- change
- ready
- focus
- blur
- escape

```html
<StripeElement
  :elements="elements"
  @blur="doSomething"
/>
```

## Helpers
In case you like the manual gearbox. Check [stripeElements.js](src/stripeElements.js) for details.

```js
import { initStripe, createElements, createElement } from 'vue-stripe-elements-plus'
```

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