vue-stripe-elements

by fromAtoB

A Vue 2 component collection for StripeElements

476 Stars 115 Forks Last release: about 1 year ago (v0.3.0) MIT License 44 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Vue Stripe Elements

A Vue 2 component collection for stripe elements.

Usage example

Install package:

$ npm i vue-stripe-elements-plus --save

Add Stripe.js library to index.html:


Build a Vue component using the Card element:



Multiple elements

Even if it is recommended to use the unified Card element, single elements for each field are supported. The following example shows a possible use in a credit card component:



Supported Stripe Elements Functions

|Function|Reference| |---|---| | createToken() | https://stripe.com/docs/stripe-js/reference#stripe-create-token | | createSource() | https://stripe.com/docs/stripe-js/reference#stripe-create-source | | retrieveSource() | https://stripe.com/docs/stripe-js/reference#stripe-retrieve-source | | paymentRequest() | https://stripe.com/docs/stripe-js/reference#stripe-payment-request | | redirectToCheckout() | https://stripe.com/docs/stripe-js/reference#stripe-redirect-to-checkout | | retrievePaymentIntent() | https://stripe.com/docs/stripe-js/reference#stripe-retrieve-payment-intent | | handleCardPayment() | https://stripe.com/docs/stripe-js/reference#stripe-handle-card-payment | | handleCardSetup() | https://stripe.com/docs/stripe-js/reference#stripe-handle-card-setup | | handleCardAction() | https://stripe.com/docs/stripe-js/reference#stripe-handle-card-action | | confirmPaymentIntent() | https://stripe.com/docs/stripe-js/reference#stripe-confirm-payment-intent | | createPaymentMethod() | https://stripe.com/docs/stripe-js/reference#stripe-create-payment-method |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.