Separate Card Fields
This is just one use-case of Vue Stripe Plugin.
Demo
Step 1 - Import Stripe JavaScript SDK
HTML
Nuxt
index.html
1
<script src="https://js.stripe.com/v3"></script>
Copied!
nuxt.config.js
1
export default {
2
...
3
head: {
4
script: [
5
{ src: 'https://js.stripe.com/v3' },
6
],
7
},
8
...
9
};
Copied!
Step 2 - Install Vue Stripe Plugin
Import and register the
StripePlugin plugin.1
import Vue from 'vue';
2
import { StripePlugin } from '@vue-stripe/vue-stripe';
3
4
const options = {
5
pk: process.env.STRIPE_PUBLISHABLE_KEY,
6
stripeAccount: process.env.STRIPE_ACCOUNT,
7
apiVersion: process.env.API_VERSION,
8
locale: process.env.LOCALE,
9
};
10
11
Vue.use(StripePlugin, options);
Copied!
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.Step 3 - Use Case
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.
1
<template>
2
<div>
3
<label>Card Number</label>
4
<div id="card-number"></div>
5
<label>Card Expiry</label>
6
<div id="card-expiry"></div>
7
<label>Card CVC</label>
8
<div id="card-cvc"></div>
9
<div id="card-error"></div>
10
<button id="custom-button" @click="createToken">Generate Token</button>
11
</div>
12
</template>
13
14
<script>
15
export default {
16
data () {
17
return {
18
token: null,
19
cardNumber: null,
20
cardExpiry: null,
21
cardCvc: null,
22
};
23
},
24
computed: {
25
stripeElements () {
26
return this.$stripe.elements();
27
},
28
},
29
mounted () {
30
// Style Object documentation here: https://stripe.com/docs/js/appendix/style
31
const style = {
32
base: {
33
color: 'black',
34
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
35
fontSmoothing: 'antialiased',
36
fontSize: '14px',
37
'::placeholder': {
38
color: '#aab7c4',
39
},
40
},
41
invalid: {
42
color: '#fa755a',
43
iconColor: '#fa755a',
44
},
45
};
46
this.cardNumber = this.stripeElements.create('cardNumber', { style });
47
this.cardNumber.mount('#card-number');
48
this.cardExpiry = this.stripeElements.create('cardExpiry', { style });
49
this.cardExpiry.mount('#card-expiry');
50
this.cardCvc = this.stripeElements.create('cardCvc', { style });
51
this.cardCvc.mount('#card-cvc');
52
},
53
beforeDestroy () {
54
this.cardNumber.destroy();
55
this.cardExpiry.destroy();
56
this.cardCvc.destroy();
57
},
58
methods: {
59
async createToken () {
60
const { token, error } = await this.$stripe.createToken(this.cardNumber);
61
if (error) {
62
// handle error here
63
document.getElementById('card-error').innerHTML = error.message;
64
return;
65
}
66
console.log(token);
67
// handle the token
68
// send it to your server
69
},
70
}
71
};
72
</script>
73
74
<style scoped>
75
#custom-button {
76
height: 30px;
77
outline: 1px solid grey;
78
background-color: green;
79
padding: 5px;
80
color: white;
81
}
82
83
#card-error {
84
color: red;
85
}
86
</style>
Copied!
Last modified 4mo ago
Export as PDF
Copy link
Edit on GitHub