Demo

Live Demo

1. Enable Checkout

You must first enable the client-only integration settings in your Stripe dashboard, you also have the option to customize the look and feel of your checkout page. More details.

2. Create products and recurring prices

Product and Price are required to make this work. Whether it's a physical item or a service, it needs to be represented by a product. Each product can have one or more prices.

For example, you can create a software product with different subscription tiers. $10/month, $20/month, and $50/month More details.

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="subscription"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Subscribe!</button>
  </div>
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
  data () {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      loading: false,
      lineItems: [
        {
          price: 'some-price-id', // The id of the recurring price you created in your Stripe dashboard
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

Vue Stripe is an official Stripe partner.

Stripe Checkout

Use Stripe's prebuilt Checkout to implement one-time payments or subscriptions with your Vue applications.

Stripe Elements

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

Take note that Session ids are generated from the backend. To know more about sessions visit the documentation.

Demo

1. Prepare checkout data [frontend]

Prerequisite:

2. Create a Session [backend]

3. Checkout using Session id [frontend]

Follow this sample code below:

Demo

1. Enable Checkout

You must first enable the client-only integration settings in your Stripe dashboard, you also have the option to customize the look and feel of your checkout page. .

2. Create products and prices

Product and Price are required to make this work. Whether it's a physical item or a service, it needs to be represented by a product. Each product can have one or more prices.

For example, you can create a T-shirt product, with different prices for different currencies. $20 USD and €15 Euro. .

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

Take note that Session ids are generated from the backend. To know more about sessions visit the .

1. Create a session

You need to create the session in your backend. This session will return an id, use that id to checkout the payment.

2. Redirect to checkout

Follow the Vue Stripe Checkout example below:

You'll notice that when using sessions, you'll only need the session-id. This is because the session is the representation of all of the information (including success, and cancel URLs) about the payment to be done.

Demo

Live Demo

Step 1 - Import Stripe JavaScript SDK

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

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>

Installation

yarn add @vue-stripe/vue-stripe

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>

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

No configuration or integration changes are required to enable Apple Pay or Google Pay in Stripe Checkout. These payments are handled the same way as other card payments.

Google Pay

The Google Pay button is displayed in a given Checkout Session if all of the following apply:

• Google Pay is enabled for Checkout in your Stripe Dashboard.

• The customer is using Google Chrome or Safari.

• The customer has a valid card registered with Google Pay.

This ensures that Checkout only displays the Google Pay button to customers who are able to use it.

Here's an example screenshot from Google Chrome running on Arch Linux, see the Google Pay button.

Apple Pay

The Apple Pay button is displayed in a given Checkout Session if all of the following apply:

• Apple Pay is enabled for Checkout in your Stripe Dashboard.

• The customer’s device is running macOS 10.14.1+ or iOS 12.1+.

• The customer is using the Safari browser.

• The customer has a valid card registered with Apple Pay.

This ensures that Checkout only displays the Apple Pay button to customers who are able to use it.

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

Step 2 - Install The Plugin

Import and register the StripePlugin plugin.

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.

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

Usage

Import and register the StripeElementCard component.

Example

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

Props

Methods

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

Events

Stripe

Payments infrastructure for the internet

Open Source Software Philippines (OSSPH)

OSSPH is the leading OSS community in the Philippines paving the way to better OSS community experience for new and seasoned developers.

Mighty Minds

Might Minds is a non-profit organization in the Philippines that focuses on helping students in need through its platform.

MYCURE Inc.

The most complete clinic management system in the Philippines.

GitBook

GitBook helps you publish beautiful docs for your users and centralize your teams' knowledge for advanced collaboration.

While we are all busy and has our own stuff going on, we still need to say hi to each other, because we are a community.

If you ever have any concerns, wanna share cool things, or just wanna say , feel free to swing by our .

Installation

Usage

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

Props

Events