Only this pageAll pages
Powered by GitBook
1 of 17

Vue 2 Version

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Others

Loading...

Welcome!

Stripe Checkout & Elements for Vue.js

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.

Stripe Checkout

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

💳Stripe Checkout
💸Stripe Elements
Screenshot of the actual Stripe Checkout demo page.

Stripe Elements

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

Actual screenshot of Stripe Elements demo.

One-time Payment

Vue Stripe Checkout also supports one-time card payments.

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 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. More details.

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Pay now!</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 one-time 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>

Sessions Generator

Interactive session generator to demo checkout using sessions.

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

Demo

Session Generator Demo

1. Prepare checkout data [frontend]

Prerequisite: Enable Checkout, and Create Products

{
  "success_url": "https://vuestripe.com/stripe-checkout/sessions-generator?state=success",
  "cancel_url": "https://vuestripe.com/stripe-checkout/sessions-generator?state=cancel",
  "payment_method_types": [
    "card"
  ],
  "line_items": [
    {
      "price": "price_1I1xv3EfCmJMLhhrJ5vdGxy6",
      "quantity": 1
    }
  ],
  "mode": "payment"
}

2. Create a Session [backend]

Create a session using the data from Step 1. Note that the "mode"="payment" means that you are creating a one-time payment session. Node.js sample here.

3. Checkout using Session id [frontend]

Follow this sample code below:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      :pk="publishableKey"
      :session-id="sessionId"
    />
    <button @click="submit">Checkout!</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,
      sessionId: 'session-id', // session id from backend
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

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>

Google & Apple Pay

Google Pay & Apple Pay are automatically supported by Stripe Checkout.

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.

Google Chrome running on Arch Linux

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.

Community

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 Twitter Community. 🐦

Subscriptions

Vue Stripe Checkout also supports subscription or recurring payments.

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>

Partners

Vue Stripe is possible because of the following partners and supporters.

Stripe

Payments infrastructure for the internet https://stripe.com https://stripe.com/partners/vue-stripe

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. https://ossph.org

Mighty Minds

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

MYCURE Inc.

The most complete clinic management system in the Philippines. https://mycure.md

GitBook

GitBook helps you publish beautiful docs for your users and centralize your teams' knowledge for advanced collaboration. https://gitbook.com

Separate Card Fields

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

Demo

Live Demo

Step 1 - Import Stripe JavaScript SDK

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>

Vue Stripe Plugin

Vue.js plugin for Stripe JS Object.

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

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.

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

Getting Started

Vue Stripe Checkout starting guide.

Installation

Terminal
yarn add @vue-stripe/vue-stripe
Terminal
npm install @vue-stripe/vue-stripe

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.

<template>
  <!-- stripe-checkout -->
</template>

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

Props

Name
Type
Default
Required
Description

pk

string

none

Yes

Stripe's publishable key, you can retrieve this from your Stripe dashboard.

string

none

No

The ID of the Checkout Session that is used in Checkout's client and server integration.

array[object]

none

No

An array of objects representing the items that your customer would like to purchase. These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout. Used with the client-only integration.

boolean

false

No

Disables the advanced fraud detection feature.

string

none

No

The mode of the Checkout Session, one of payment or subscription. Required if using lineItems with the client-only integration.

string

none

No

The URL to which Stripe should send customers when payment is complete. If you’d like access to the Checkout Session for the successful payment, read more about it in the guide on fulfilling orders. Required if using the client-only integration.

string

none

No

The URL to which Stripe should send customers when payment is canceled. Required if using the client-only integration.

string

none

No

A unique string to reference the Checkout session. This can be a customer ID, a cart ID, or similar. It is included in the checkout.session.completed webhook and can be used to fulfill the purchase.

string

none

No

The email address used to create the customer object. If you already know your customer's email address, use this attribute to prefill it on Checkout.

string

none

No

Specify whether Checkout should collect the customer’s billing address. If set to required, Checkout will attempt to collect the customer’s billing address. If not set or set to auto Checkout will only attempt to collect the billing address when necessary.

object

none

No

When set, provides configuration for Checkout to collect a shipping address from a customer.

string

none

No

For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.

string

none

No

Override your account's API version.

string

none

No

Describes the type of transaction being performed by Checkout in order to customize relevant text on the page, such as the Submit button. submitType can only be specified when using using line items or SKUs, and not subscriptions. The default is auto. Supported values are: auto, book, donate, pay.

string

auto

No

Describes the type of transaction being performed by Checkout in order to customize relevant text on the page, such as the Submit button. submitType can only be specified when using using line items or SKUs, and not subscriptions. The default is auto. Supported values are: auto, book, donate, pay.

array[object]

none

No

An array of objects representing the items that your customer would like to purchase. These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout. Using lineItems is preferred.

Events

Name
Type
Description

loading

boolean

Emits the current loading state of the component.

error

object

Emits whatever error the component might encounter, especially the ones from Stripe.

Payment

Easy to implement custom payment elements by Stripe.

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 .

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

2. Render Payment UI [frontend]

Import the component like so:

Full code example:

For a more comprehensive tutorial, go here

Props

Name
Type
Default
Required
Description

Methods

Name
Return Type
Description

Events

Name
Return Type
Description
sessionId
lineItems
disableAdvancedFraudDetection
mode
successUrl
cancelUrl
clientReferenceId
customerEmail
billingAddressCollection
shippingAddressCollection
stripeAccount
apiVersion
locale
submitType
items
<template>
  <!-- stripe-element-payment -->
</template>

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

pk

string

none

Stripe's publishable key, you can retrieve this from your Stripe dashboard.

testMode

boolean

false

Add this if you want to bypass the insecure host warning when testing to a non-localhost or non-https links.

elementsOptions

Object

none

A set of options to create this Elements instance with.

confirmParams

Object

none

A set of options to confirm a PaymentIntent.

stripeAccount

string

none

For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.

apiVersion

string

none

Override your account's API version.

locale

string

none

A locale used to globally configure localization in Stripe. Setting the locale here will localize error strings for all Stripe.js methods. It will also configure the locale for Elements and Checkout. Default is auto (Stripe detects the locale of the browser).

Note that Checkout supports a slightly different set of locales than Stripe.js.

disableAdvancedFraudDetection

boolean

false

Disables the advanced fraud detection feature.

submit()

void

Submits the payment

clear()

void

Clears the value(s) of the Element.

destroy()

void

Removes the Element from the DOM and destroys it. A destroyed Element can not be re-activated or re-mounted to the DOM.

focus()

void

Focuses the Element.

unmount()

void

Unmounts the Element from the DOM. Call element.mount to re-attach it to the DOM.

collapse()

void

Collapses the Payment Element into a row of payment method tabs

getElement()

Object

Retrieves a previously created element

update()

void

Updates the element. See official docs for more detail: https://site-admin.stripe.com/docs/js/elements_object/update_payment_element

token

object

Emits the card source or the tokenized version of the user's card

loading

boolean

Emits the current loading state of the component.

error

object

Emits whatever error the component might encounter, especially the ones from Stripe.

element-change

void

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

element-ready

void

Triggered when the Element is fully rendered and can accept element.focus calls.

element-focus

void

Triggered when the Element gains focus.

element-blur

void

Triggered when the Element loses focus.

element-escape

void

Triggered when the escape key is pressed within an Element.

element-click

void

Triggered when the Element is clicked. This event is only emmited from a paymentRequestButton Element.

Live Demo
here
https://stripe.com/docs/payments/quickstart

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

Usage

Import and register the StripeElementCard component.

Example

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

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
<template>
  <div>
    <stripe-element-card/>
  </div>
</template>

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

pk

string

none

Yes

Stripe's publishable key, you can retrieve this from your Stripe dashboard.

testMode

boolean

false

No

Add this if you want to bypass the insecure host warning when testing to a non-localhost or non-https links.

elementsOptions

object

none

No

A set of options to create this Elements instance with.

tokenData

object

none

No

An object containing additional payment information you might have collected. Although these fields are optional, we highly recommend collecting name and address.

disableAdvancedFraudDetection

boolean

false

No

Disables the advanced fraud detection feature.

classes

object

none

No

Set custom class names on the container DOM element when the Stripe element is in a particular state.

elementStyle

object

none

No

Customize the appearance of this element using CSS properties passed in a Style object.

value

string

none

No

A pre-filled set of values to include in the input (e.g., {postalCode: '94110'}). Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.

hidePostalCode

boolean

false

No

Hide the postal code field. Default is false. If you are already collecting a full billing address or postal code elsewhere, set this to true.

iconStyle

string

default

No

Appearance of the icon in the Element. Either solid or default.

hideIcon

boolean

none

No

Hides the icon in the Element. Default is false.

disabled

boolean

none

No

Applies a disabled state to the Element such that user input is not accepted. Default is false.

stripeAccount

string

none

No

For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.

apiVersion

string

none

No

Override your account's API version.

locale

string

auto

No

A locale used to globally configure localization in Stripe. Setting the locale here will localize error strings for all Stripe.js methods. It will also configure the locale for Elements and Checkout. Default is auto (Stripe detects the locale of the browser).

Note that Checkout supports a slightly different set of locales than Stripe.js.

blur()

void

Blurs the Element.

clear()

void

Clears the value(s) of the Element.

destroy()

void

Removes the Element from the DOM and destroys it. A destroyed Element can not be re-activated or re-mounted to the DOM.

focus()

void

Focuses the Element.

unmount()

void

Unmounts the Element from the DOM. Call element.mount to re-attach it to the DOM.

update()

void

Updates the options the Element was initialized with. Updates are merged into the existing configuration.

token

object

Emits the card source or the tokenized version of the user's card

loading

boolean

Emits the current loading state of the component.

error

object

Emits whatever error the component might encounter, especially the ones from Stripe.

element-change

void

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

element-ready

void

Triggered when the Element is fully rendered and can accept element.focus calls.

element-focus

void

Triggered when the Element gains focus.

element-blur

void

Triggered when the Element loses focus.

element-escape

void

Triggered when the escape key is pressed within an Element.

element-click

void

Triggered when the Element is clicked. This event is only emmited from a paymentRequestButton Element.

Live Demo

Sessions

Vue Stripe Checkout also supports checkout using Session Id.

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

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.

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      :pk="publishableKey"
      :session-id="sessionId"
    />
    <button @click="submit">Checkout!</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,
      sessionId: 'session-id', // session id from backend
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>