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.

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

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.

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>

One-time Payment

Vue Stripe Checkout also supports one-time card payments.

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:

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 .

  • 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 .

  • 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.

<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>
Live Demo
More details
More details

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

Stripe Dashboard
Stripe Dashboard
Google Chrome running on Arch Linux

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

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.

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

1. Prepare checkout data [frontend]

Prerequisite:

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

3. Checkout using Session id [frontend]

Follow this sample code below:

Subscriptions

Vue Stripe Checkout also supports subscription or recurring payments.

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

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

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 .

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.

{
  "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"
}
<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>
Session Generator Demo
Enable Checkout, and Create Products
Node.js sample here
<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>
Live Demo
More details
More details
<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>
documentation
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);
index.html
<script src="https://js.stripe.com/v3"></script>
nuxt.config.js
export default {
  ...
  head: {
    script: [
      { src: 'https://js.stripe.com/v3' },
    ],
  },
  ...
};

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

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>

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.

sessionId
lineItems
disableAdvancedFraudDetection
mode
successUrl
cancelUrl
clientReferenceId
customerEmail
billingAddressCollection
shippingAddressCollection
stripeAccount
apiVersion
locale
submitType
items

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

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.

Object

none

A set of options to create this Elements instance with.

Object

none

A set of options to confirm a PaymentIntent.

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.

string

none

Override your account's API version.

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.

boolean

false

Disables the advanced fraud detection feature.

Methods

Name
Return Type
Description

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

Events

Name
Return Type
Description

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.

elementsOptions
confirmParams
stripeAccount
apiVersion
locale
disableAdvancedFraudDetection

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

Name
Type
Default
Required
Description

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.

object

none

No

A set of options to create this Elements instance with.

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.

boolean

false

No

Disables the advanced fraud detection feature.

object

none

No

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

object

none

No

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

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.

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.

string

default

No

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

boolean

none

No

Hides the icon in the Element. Default is false.

boolean

none

No

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

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

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.

Methods

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

Name
Return Type
Description

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.

void

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

Events

Name
Return Type
Description

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.

elementsOptions
tokenData
disableAdvancedFraudDetection
classes
elementStyle
value
hidePostalCode
iconStyle
hideIcon
disabled
stripeAccount
apiVersion
locale
update()