Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Stripe Checkout & Elements for Vue.js
Vue Stripe is an official Stripe partner.
Use Stripe's prebuilt Checkout to implement one-time payments or subscriptions with your Vue applications.
Integrate Stripe's collection of high-quality UI components to create payment forms in your Vue applications.
Use Stripe's prebuilt Checkout to implement one-time payments or subscriptions with your Vue.js applications.
Integrate Stripe's collection of high-quality UI components to create payment forms in your Vue.js applications.
Vue Stripe is an easy to implement, and well maintained Vue.js plugin for Stripe Checkout, and Elements.
yarn add @vue-stripe/vue-stripenpm install @vue-stripe/vue-stripeYou 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>Vue Stripe Checkout also supports one-time card payments.
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. .
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. .
Follow the Vue Stripe Checkout example below:
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.
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.
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>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. 🐦
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.
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.
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.
Prerequisite:
Create a session using the data from Step 1. Note that the "mode"="payment" means that you are creating a one-time payment session. .
Follow this sample code below:
Vue Stripe Checkout also supports subscription or recurring payments.
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. .
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 .
Follow the Vue Stripe Checkout example below:
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 .
You need to create the session in your backend. This session will return an id, use that id to checkout the payment.
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><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><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>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);
<script src="https://js.stripe.com/v3"></script>export default {
...
head: {
script: [
{ src: 'https://js.stripe.com/v3' },
],
},
...
};Vue Stripe is possible because of the following partners and supporters.
Payments infrastructure for the internet https://stripe.com https://stripe.com/partners/vue-stripe
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
Might Minds is a non-profit organization in the Philippines that focuses on helping students in need through its platform. https://mightyminds.org
The most complete clinic management system in the Philippines. https://mycure.md
GitBook helps you publish beautiful docs for your users and centralize your teams' knowledge for advanced collaboration. https://gitbook.com
This is just one use-case of Vue Stripe Plugin.
<script src="https://js.stripe.com/v3"></script>export default {
...
head: {
script: [
{ src: 'https://js.stripe.com/v3' },
],
},
...
};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.
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 Checkout starting guide.
yarn add @vue-stripe/vue-stripenpm install @vue-stripe/vue-stripeYou 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>pk
string
none
Stripe's publishable key, you can retrieve this from your Stripe dashboard.
string
none
The ID of the Checkout Session that is used in Checkout's client and server integration.
array[object]
none
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
Disables the advanced fraud detection feature.
string
none
The mode of the Checkout Session, one of payment or subscription. Required if using lineItems with the client-only integration.
string
none
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
The URL to which Stripe should send customers when payment is canceled. Required if using the client-only integration.
string
none
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
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
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
When set, provides configuration for Checkout to collect a shipping address from a customer.
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
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
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
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.
loading
boolean
Emits the current loading state of the component.
error
object
Emits whatever error the component might encounter, especially the ones from Stripe.
Easy to implement custom payment elements by Stripe.
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
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
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.
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.
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.
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>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>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
An object containing additional payment information you might have collected. Although these fields are optional, we highly recommend collecting name and address.
boolean
false
Disables the advanced fraud detection feature.
object
none
Set custom class names on the container DOM element when the Stripe element is in a particular state.
object
none
Customize the appearance of this element using CSS properties passed in a Style object.
string
none
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
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
Appearance of the icon in the Element. Either solid or default.
boolean
none
Hides the icon in the Element. Default is false.
boolean
none
Applies a disabled state to the Element such that user input is not accepted. Default is false.
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
auto
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.
You can access these methods via $refs, like so this.$refs.elementRef.destroy().
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.
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.