I’m starting to use vuetify along with a ‘payment gateway’ that I’m learning, but I’ve had a little problem.
If there is a form like this:
<form @submit.prevent=”continuar” id=”customer-form”>
<div class=”card-errors”></div>
<div class=”form-group”>
<label>Nombre del usuario de tarjeta</label>
<input type=”text” data-epayco=”card[name]“>
</div>
<div class=”form-group”>
<label>Email</label>
<input type=”text” data-epayco=”card[email]“>
</div>
…
<button type=”submit”>Pagar ahora!</button>
</form>
The “Token” parameter returns a value that is not undefined.
continuar(event){
ePayco.token.create(event.target, (error, token) => {
if(!error) {
console.log(“token: “ + token)
} else {
console.log(error)
}
})
},
But when I use vuetify the “Token” parameter returns “undefined” even when the “Epayco” library shows a message that everything has happened correctly.
<form id=”customer-form” @submit.prevent=”continuar”>
<div class=”card-errors”></div>
<v-layout row align-center>
<v-flex md3 offset-md1 class=”mr-3”>
<v-layout justify-end>
<span>Nombre en la tarjeta*</span>
</v-layout>
</v-flex>
<v-flex md4>
<v-text-field data-epayco=”card[name]“/>
</v-flex>
</v-layout>
<v-layout row align-center>
<v-flex md3 offset-md1 class=”mr-3”>
<v-layout justify-end>
<span>Email</span>
</v-layout>
</v-flex>
<v-flex md4>
<v-text-field data-epayco=”card[email]“/>
</v-flex>
</v-layout>
……
<v-layout class=”my-3” justify-center>
<v-btn type=”submit”>Pagar</v-btn>
</v-layout>
</form>
Does anyone know why the problem?
It should be noted that when an error occurs the parameter ‘error’ returns the error and not undefined
Solution :
According to the example here it appears you should be using the ePayco.token.create() function a bit differently.
epayco.token.create(paymentDetails)
.then(function(token) {
console.log(token);
})
.catch(function(err) {
console.log(“err: “ + err);
});