<template> <div id='app'> <h1>Please give us your payment details:</h1> <card class='stripe-card' :class='{ complete }' stripe='pk_test_XXXXXXXXXXXXXXXXXXXXXXXX' :options='stripeOptions' @change='complete = $event.complete' /> <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card</button> </div> </template> <script> import { stripeKey, stripeOptions } from './stripeConfig.json' import { Card, createToken } from 'vue-stripe-elements-plus' export default { data () { return { complete: false, stripeOptions: { // see https://stripe.com/docs/stripe.js#element-options for details } } }, components: { Card }, methods: { pay () { // createToken returns a Promise which resolves in a result object with // either a token or an error key. // See https://stripe.com/docs/api#tokens for the token object. // See https://stripe.com/docs/api#errors for the error object. // More general https://stripe.com/docs/stripe.js#stripe-create-token. createToken().then(data => console.log(data.token)) } } } </script> <style> .stripe-card { width: 300px; border: 1px solid grey; } .stripe-card.complete { border-color: green; } </style>

<template> <div class='credit-card-inputs' :class='{ complete }'> <card-number class='stripe-element card-number' ref='cardNumber' :stripe='stripe' :options='options' @change='number = $event.complete' /> <card-expiry class='stripe-element card-expiry' ref='cardExpiry' :stripe='stripe' :options='options' @change='expiry = $event.complete' /> <card-cvc class='stripe-element card-cvc' ref='cardCvc' :stripe='stripe' :options='options' @change='cvc = $event.complete' /> </div> </template> <script> import { CardNumber, CardExpiry, CardCvc } from 'vue-stripe-elements-plus' export default { props: [ 'stripe', 'options' ], data () { return { complete: false, number: false, expiry: false, cvc: false } }, components: { CardNumber, CardExpiry, CardCvc }, methods: { update () { this.complete = this.number && this.expiry && this.cvc // field completed, find field to focus next if (this.number) { if (!this.expiry) { this.$refs.cardExpiry.focus() } else if (!this.cvc) { this.$refs.cardCvc.focus() } } else if (this.expiry) { if (!this.cvc) { this.$refs.cardCvc.focus() } else if (!this.number) { this.$refs.cardNumber.focus() } } // no focus magic for the CVC field as it gets complete with three // numbers, but can also have four } }, watch: { number () { this.update() }, expiry () { this.update() }, cvc () { this.update() } } } </script> <style> .credit-card-inputs.complete { border: 2px solid green; } </style>