<label>Card Number</label>
<div id="card-number"></div>
<label>Card Expiry</label>
<div id="card-expiry"></div>
<div id="card-cvc"></div>
<div id="card-error"></div>
<button id="custom-button" @click="createToken">Generate Token</button>
return this.$stripe.elements();
// Style Object documentation here: https://stripe.com/docs/js/appendix/style
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
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');
this.cardNumber.destroy();
this.cardExpiry.destroy();
const { token, error } = await this.$stripe.createToken(this.cardNumber);
document.getElementById('card-error').innerHTML = error.message;
// send it to your server