Vue Plugin For Stripe Checkout And Elements

Install & Download:

# Yarn
$ yarn add vue-stripe-checkout
# NPM
$ npm install vue-stripe-checkout --save

Description:

An official Vue Strip plugin for creating Stripe checkout, cards, and payments elements on your web application.

Get Started:

1. Import the components.

import Vue from 'vue';
// Stripe Plugin
import { StripePlugin } from '@vue-stripe/vue-stripe';
// Checkout Component
import { StripeCheckout } from '@vue-stripe/vue-stripe';
// Elements Component
import { StripeElementCard } from '@vue-stripe/vue-stripe';

2. Register.

// Stripe Plugin
Vue.use(StripePlugin, options);
// Checkout Component
export default {
  components: {
    StripeCheckout,
  },
};
// Elements Component
export default {
  components: {
    StripeElementCard,
  },
};

3. Add the components to the template.

<template>
  <!-- Component Here -->
</template>

Preview:

Changelog:

v4.5.0 (02/05/2023)

• Add new event confirmed to the Payment component.

v4.4.4 (07/12/2022)

• hotfix: temporarily remove insecure host check

v4.4.2 (03/06/2022)

• add ‘redirect’ prop to elements component

v4.4.1 (01/25/2022)

• refactor: add props for loadStripe params

v4.3.2 (01/15/2022)

• update