Vue Stripe Plugin

Maybe you don't need the checkout or the elements. Maybe you just need to access the other methods provided by the Stripe JS SDK. This plugin will help you do that.
Step 1 - Import Stripe JavaScript SDK
HTML
Nuxt
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 The 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,
  testMode: true, // Boolean. To override the insecure host warning
  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, Where this.$stripe = window.Stripe(PUBLISHABLE_KEY, options).
With this, you can now access the Stripe methods like, .confirmCardPayment, .confirmAlipayPayment, and more. See here.

Payment

Community

Last modified 8mo ago

Export as PDF

Copy link

Edit on GitHub

On this page

Step 1 - Import Stripe JavaScript SDK

Step 2 - Install The Plugin