This is a thin Vue 3 wrapper (0.7 KB gzipped) for Stripe.js written in TypeScript. It simply provides a function (Vue hook) to create Stripe elements and a component that conveniently emits events.
Support for Vue 2 was added in 0.1.0 via vue-demi.
Add Stripe.js to index.html as recommended by Stripe:
<scriptasyncsrc="https://js.stripe.com/v3/"></script>Alternatively, install @stripe/stripe-js and import it in your project to automatically add the previous script tag as a side effect:
// main.jsimport'@stripe/stripe-js'Install this wrapper:
yarn add vue-use-stripeIf you are using TypeScript, make sure you also install the mentioned @stripe/stripe-js library as well to get proper types for Stripe. Note that, if you are adding the script tag direclty to index.html, then @stripe/stripe-js can be installed as a dev dependency (it will only be used for types, not bundled in your app).
import{defineComponent,ref}from'vue'import{useStripe,StripeElement}from'vue-use-stripe'exportdefaultdefineComponent({components: { StripeElement },setup(){constevent=ref(null)const{ stripe,elements: [cardElement],}=useStripe({key: process.env.VUE_APP_STRIPE_PUBLIC_KEY||'',elements: [{type: 'card',options: {}}],})constregisterCard=()=>{if(event.value?.complete){// Refer to the official docs to see all the Stripe instance properties.// E.g. https://stripe.com/docs/js/setup_intents/confirm_card_setupreturnstripe.value?.confirmCardSetup('<client-secret>',{payment_method: {card: cardElement.value,},})}}return{ event, cardElement, registerCard,}},})<template><StripeElement:element="cardElement" @change="event = $event" /><button@click="registerCard">Add</button><divv-if="event && event.error">{{event.error.message }}</div></template>Install @vue/composition-api as a dependency. Everything else should be similar to the example above for Vue 3.
Make sure vue-demi is included before vue-use-stripe:
<scriptsrc="https://unpkg.com/vue@3"></script><!-- if using Vue 2 --><!-- <script src="https://unpkg.com/@vue/[email protected]"></script> --><scriptsrc="https://unpkg.com/vue-demi"></script><scriptsrc="https://unpkg.com/vue-use-stripe"></script><script>const{ useStripe, StripeElement }=window.VueUseStripe// Same as Vue 3 example above</script>useStripe(options: StripeOptions): {// Reactive reference to the Stripe instance (created using `window.Stripe`) with proper typings stripe: Ref<Stripe|null>;// Reactive reference to the internal elements instance (Stripe.elements(...)).// This allows creating Stripe elements manually (optional):// stripeElements.create('card',{<options>}) stripeElements: Ref<StripeElements|null>;// Array of elements created out of `StripeOptions.elements` array elements: Ref<any>[];}typeStripeOptions={// Stripe API keykey: string;// Array of elements to be created// See the following link for possible types and options:// https://stripe.com/docs/js/elements_object/create_element?type=card// E.g. `[{type: 'card', options:{hidePostalCode: true }},{type: 'fpxBank' }, ...]elements?: {type: string;options: object}[];// Stripe constructor options: https://stripe.com/docs/js/initializingconstructorOptions?: object;// Elements constructor options: https://stripe.com/docs/js/elements_object/createelementsOptions?: object;}Note: StripeOptions.elements array is optional. Alternatively, create elements manually using the returned stripeElements.
The <StripeElement /> component will emit any event created by the internal element: change, ready, click, focus, blur.