This package is no longer maintained. Vue 2 reached its end-of-life on December 31st, 2023.
- Vue 2: deprecated ❗️
- Vue 3: use vue-stripe-js âś…
# npm npm i vue-stripe-elements-plus --save-dev # yarn yarn add vue-stripe-elements-plus --dev<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.
Create card
<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>Create multiple elements
<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>You can even create multiple groups, don't ask me why. It's possible.
<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>No base style included. Main reason: overriding it isn't fun. Style as you wish via element options: see details.
Think of it as of individual group of elements. It creates stripe instance and elements object.
import { StripeElements } from 'vue-stripe-elements-plus'// 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: () => ({}), },You can access instance and elements by adding ref to StripeElements component.
// data of StripeElements.vue instance: {}, elements: {},Elegant solution for props. Really handy because you can make instance and elements available to all children without adding extra code.
<!-- Isn't it cool? I really like it! --> <StripeElements #default="{elements, instance}"> <StripeElement :elements="elements" /> <CustomComponent :instance="instance" /> </StripeElements>Universal and type agnostic component. Create any element supported by Stripe.
// 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], },stripeElement domElementElement options are reactive. Recommendation: don't use v-model on StripeElement, instead pass value via options.
data() { return { elementOptions: { value: { postalCode: '' } } } }, methods: { changePostalCode() { // will update stripe element automatically this.elementOptions.value.postalCode = '12345' } }Following events are emitted on StripeElement
- change
- ready
- focus
- blur
- escape
<StripeElement :elements="elements" @blur="doSomething" />In case you like the manual gearbox. Check stripeElements.js for details.
import { initStripe, createElements, createElement } from 'vue-stripe-elements-plus'