Neutralize Pesky Miscreants


    2.0.0 • Public • Published

    NPM npm


    A Vue wrapper for stripe elements. This library was inspired in fromAtoB/vue-stripe-elements, but has the following improvements:

    • No need to previously setup stripe.js: is injected at runtime, currently v3. If it is already configured it works as well.
    • No custom api defined: you can access the stripe.js instance by calling getStripe (returns a Promise) and then usestripe.js api itself.


    npm install --save @kenkou/vue-stripe-elements


    yarn add @kenkou/vue-stripe-elements


    Stripe official javascript library stripe.js v3 will be automatically injected if window.Stripe global variable is not set.

    <Stripe spk="pk_test_xxxxxxxxxxxxxxxxx">
        <card-number ref="cardNumber" />
        <card-cvc />
        <card-expiry />

    To access the stripe element created in each component call the element() method. To access the stripe instance use getStripe to get a promise to it. For example, to tokenize a card do:

    import { getStripe } from '@kenkou/vue-stripe-elements'
    export default {
      methods: {
       async tokenize() {
        // get one of the stripe elements created
        const cardNumber = this.$refs.cardNumber.element()
        // see the api
        const stripe = await getStripe()
        const result = await stripe.createToken(cardNumber)
        console.log('tokenized element', result)

    See src/App.vue for a complete example.

    Live demo

    We got a free demo for you!

    Edit Vue Template

    Remember to set the spk value inside data() function.

    Building and running on localhost

    First install dependencies:

    yarn install

    To run App.vue example:

    yarn serve

    To create a production build:

    yarn build

    Built with love at KenKou.


    npm i @kenkou/vue-stripe-elements

    DownloadsWeekly Downloads






    Unpacked Size

    161 kB

    Total Files


    Last publish


    • rcarcasses