1 of 5

Stripe Elements

Integrate Stripe's collection of high-quality UI components to create payment forms in your Vue.js applications.

Getting Started

Vue Stripe is an easy to implement, and well maintained Vue.js plugin for Stripe Checkout, and Elements.

Installation

Terminal

yarn add @vue-stripe/vue-stripe

Terminal

npm install @vue-stripe/vue-stripe

Usage

You just need to import your desired elements component wherever it is needed, and Stripe SDK will only be loaded by the time the component has been mounted.

<template>
  <!-- stripe-element-card -->
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
};
</script>

Separate Card Fields

This is just one use-case of Vue Stripe Plugin.

Demo

Live Demo

Step 1 - Import Stripe JavaScript SDK

index.html

<script src="https://js.stripe.com/v3"></script>

nuxt.config.js

export default {
  ...
  head: {
    script: [
      { src: 'https://js.stripe.com/v3' },
    ],
  },
  ...
};

Step 2 - Install Vue Stripe Plugin

Import and register the StripePlugin plugin.

import Vue from 'vue';
import { StripePlugin } from '@vue-stripe/vue-stripe';

const options = {
  pk: process.env.STRIPE_PUBLISHABLE_KEY,
  stripeAccount: process.env.STRIPE_ACCOUNT,
  apiVersion: process.env.API_VERSION,
  locale: process.env.LOCALE,
};

Vue.use(StripePlugin, options);

This will give you access to this.$stripe. Using this you can create now create an instance of Stripe Elements.

With this, you can now access the Elements methods like, .create, .getElement, and more. See here.

Step 3 - Use Case

Separate components for each card field.

Official components for these are still in development. So this is just a sample to help you implement them on your own.

<template>
  <div>
    <label>Card Number</label>
    <div id="card-number"></div>
    <label>Card Expiry</label>
    <div id="card-expiry"></div>
    <label>Card CVC</label>
    <div id="card-cvc"></div>
    <div id="card-error"></div>
    <button id="custom-button" @click="createToken">Generate Token</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      token: null,
      cardNumber: null,
      cardExpiry: null,
      cardCvc: null,
    };
  },
  computed: {
    stripeElements () {
      return this.$stripe.elements();
    },
  },
  mounted () {
    // Style Object documentation here: https://stripe.com/docs/js/appendix/style
    const style = {
      base: {
        color: 'black',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '14px',
        '::placeholder': {
          color: '#aab7c4',
        },
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a',
      },
    };
    this.cardNumber = this.stripeElements.create('cardNumber', { style });
    this.cardNumber.mount('#card-number');
    this.cardExpiry = this.stripeElements.create('cardExpiry', { style });
    this.cardExpiry.mount('#card-expiry');
    this.cardCvc = this.stripeElements.create('cardCvc', { style });
    this.cardCvc.mount('#card-cvc');
  },
  beforeDestroy () {
    this.cardNumber.destroy();
    this.cardExpiry.destroy();
    this.cardCvc.destroy();
  },
  methods: {
    async createToken () {
      const { token, error } = await this.$stripe.createToken(this.cardNumber);
      if (error) {
        // handle error here
        document.getElementById('card-error').innerHTML = error.message;
        return;
      }
      console.log(token);
      // handle the token
      // send it to your server
    },
  }
};
</script>

<style scoped>
#custom-button {
  height: 30px;
  outline: 1px solid grey;
  background-color: green;
  padding: 5px;
  color: white;
}

#card-error {
  color: red;
}
</style>

Card

The Card Element lets you collect card information all within one Element.

The Card Element lets you collect card information all within one Element. It includes a dynamically-updating card brand icon as well as inputs for number, expiry, CVC, and postal code. Get started with accepting payment.

Demo

Live Demo

Usage

Import and register the StripeElementCard component.

<template>
  <div>
    <stripe-element-card/>
  </div>
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
};
</script>

Example

Below is an example of how to use StripeElementCard to generate a token.

<template>
  <div>
    <stripe-element-card
      ref="elementRef"
      :pk="publishableKey"
      @token="tokenCreated"
    />
    <button @click="submit">Generate token</button>
  </div>
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
  data () {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      token: null,
    };
  },
  methods: {
    submit () {
      // this will trigger the process
      this.$refs.elementRef.submit();
    },
    tokenCreated (token) {
      console.log(token);
      // handle the token
      // send it to your server
    },
  }
};
</script>

Props

Methods

You can access these methods via $refs, like so this.$refs.elementRef.destroy().

Events

Payment

Easy to implement custom payment elements by Stripe.

Demo

Live Demo

1. Generate ClientSecret [backend]

ClientSecret is required to render the Payment UI. You first have to generate one by creating a PaymentIntent. See how here.

The ClientSecret looks like this pi_3KIBJd...MLhhr1DIBc5qg_secret_skk...3HIXCXtGjDA

2. Render Payment UI [frontend]

Import the component like so:

<template>
  <!-- stripe-element-payment -->
</template>

<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementPayment,
  },
};
</script>

Full code example:

<template>
  <div>
    <stripe-element-payment
      ref="paymentRef"
      :pk="pk"
      :elements-options="elementsOptions"
      :confirm-params="confirmParams"
    />
    <button @click="pay">Pay Now</button>
  </div>
</template>

<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementPayment,
  },
  data () {
    return {
      pk: 'your-publishable-key',
      elementsOptions: {
        appearance: {}, // appearance options
      },
      confirmParams: {
        return_url: 'http://localhost:8080/success', // success url
      },
    };
  },
  mounted () {
    this.generatePaymentIntent();
  },
  methods: {
    async generatePaymentIntent () {
      const paymentIntent = await apiCallToGeneratePaymentIntent(); // this is just a dummy, create your own API call
      this.elementsOptions.clientSecret = paymentIntent.client_secret;
    },
    pay () {
      this.$refs.paymentRef.submit();
    },
  },
};
</script>

For a more comprehensive tutorial, go here https://stripe.com/docs/payments/quickstart

Props

Methods

Events

Separate Card Fields

This is just one use-case of Vue Stripe Plugin.

Demo

Live Demo

Step 1 - Import Stripe JavaScript SDK

index.html

<script src="https://js.stripe.com/v3"></script>

nuxt.config.js

export default {
  ...
  head: {
    script: [
      { src: 'https://js.stripe.com/v3' },
    ],
  },
  ...
};

Step 2 - Install Vue Stripe Plugin

Import and register the StripePlugin plugin.

import Vue from 'vue';
import { StripePlugin } from '@vue-stripe/vue-stripe';

const options = {
  pk: process.env.STRIPE_PUBLISHABLE_KEY,
  stripeAccount: process.env.STRIPE_ACCOUNT,
  apiVersion: process.env.API_VERSION,
  locale: process.env.LOCALE,
};

Vue.use(StripePlugin, options);

This will give you access to this.$stripe. Using this you can create now create an instance of Stripe Elements.

With this, you can now access the Elements methods like, .create, .getElement, and more. See here.

Step 3 - Use Case

Separate components for each card field.

Official components for these are still in development. So this is just a sample to help you implement them on your own.

<template>
  <div>
    <label>Card Number</label>
    <div id="card-number"></div>
    <label>Card Expiry</label>
    <div id="card-expiry"></div>
    <label>Card CVC</label>
    <div id="card-cvc"></div>
    <div id="card-error"></div>
    <button id="custom-button" @click="createToken">Generate Token</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      token: null,
      cardNumber: null,
      cardExpiry: null,
      cardCvc: null,
    };
  },
  computed: {
    stripeElements () {
      return this.$stripe.elements();
    },
  },
  mounted () {
    // Style Object documentation here: https://stripe.com/docs/js/appendix/style
    const style = {
      base: {
        color: 'black',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '14px',
        '::placeholder': {
          color: '#aab7c4',
        },
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a',
      },
    };
    this.cardNumber = this.stripeElements.create('cardNumber', { style });
    this.cardNumber.mount('#card-number');
    this.cardExpiry = this.stripeElements.create('cardExpiry', { style });
    this.cardExpiry.mount('#card-expiry');
    this.cardCvc = this.stripeElements.create('cardCvc', { style });
    this.cardCvc.mount('#card-cvc');
  },
  beforeDestroy () {
    this.cardNumber.destroy();
    this.cardExpiry.destroy();
    this.cardCvc.destroy();
  },
  methods: {
    async createToken () {
      const { token, error } = await this.$stripe.createToken(this.cardNumber);
      if (error) {
        // handle error here
        document.getElementById('card-error').innerHTML = error.message;
        return;
      }
      console.log(token);
      // handle the token
      // send it to your server
    },
  }
};
</script>

<style scoped>
#custom-button {
  height: 30px;
  outline: 1px solid grey;
  background-color: green;
  padding: 5px;
  color: white;
}

#card-error {
  color: red;
}
</style>

Payment

Easy to implement custom payment elements by Stripe.

Demo

Live Demo

1. Generate ClientSecret [backend]

ClientSecret is required to render the Payment UI. You first have to generate one by creating a PaymentIntent. See how here.

The ClientSecret looks like this pi_3KIBJd...MLhhr1DIBc5qg_secret_skk...3HIXCXtGjDA

2. Render Payment UI [frontend]

Import the component like so:

<template>
  <!-- stripe-element-payment -->
</template>

<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementPayment,
  },
};
</script>

Full code example:

<template>
  <div>
    <stripe-element-payment
      ref="paymentRef"
      :pk="pk"
      :elements-options="elementsOptions"
      :confirm-params="confirmParams"
    />
    <button @click="pay">Pay Now</button>
  </div>
</template>

<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementPayment,
  },
  data () {
    return {
      pk: 'your-publishable-key',
      elementsOptions: {
        appearance: {}, // appearance options
      },
      confirmParams: {
        return_url: 'http://localhost:8080/success', // success url
      },
    };
  },
  mounted () {
    this.generatePaymentIntent();
  },
  methods: {
    async generatePaymentIntent () {
      const paymentIntent = await apiCallToGeneratePaymentIntent(); // this is just a dummy, create your own API call
      this.elementsOptions.clientSecret = paymentIntent.client_secret;
    },
    pay () {
      this.$refs.paymentRef.submit();
    },
  },
};
</script>

For a more comprehensive tutorial, go here https://stripe.com/docs/payments/quickstart

Props

Name

Type

Default

Required

Description

Methods

Name

Return Type

Description

Events

Name

Return Type

Description

Card

The Card Element lets you collect card information all within one Element.

Demo

Live Demo

Usage

Import and register the StripeElementCard component.

<template>
  <div>
    <stripe-element-card/>
  </div>
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
};
</script>

Example

Below is an example of how to use StripeElementCard to generate a token.

<template>
  <div>
    <stripe-element-card
      ref="elementRef"
      :pk="publishableKey"
      @token="tokenCreated"
    />
    <button @click="submit">Generate token</button>
  </div>
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
  data () {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      token: null,
    };
  },
  methods: {
    submit () {
      // this will trigger the process
      this.$refs.elementRef.submit();
    },
    tokenCreated (token) {
      console.log(token);
      // handle the token
      // send it to your server
    },
  }
};
</script>

Props

Name

Type

Default

Required

Description

Methods

You can access these methods via $refs, like so this.$refs.elementRef.destroy().

Name

Return Type

Description

Events

Name

Return Type

Description