Created
February 13, 2018 21:02
-
-
Save cvega93/137444f99ea826ef17e397ecfb077c95 to your computer and use it in GitHub Desktop.
Clase para obtener un evento asíncrono de Culqi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="card"> | |
<form action="#" class="form-monkey form-buy-membreship" id="culqi-card-form"> | |
<div class="row"> | |
<div class="block-form"> | |
<div class="col-sm-6"> | |
<div class="form-group"> | |
<label for="card[email]">Email</label> | |
<input type="text" class="form-control" placeholder="Correo electrónico" | |
v-model="user.email" | |
data-culqi="card[email]" id="card[email]"> | |
</div> | |
<div class="form-group"> | |
<label for="card[number]">Número de Tarjeta</label> | |
<input type="text" class="form-control" v-model="card.card_number" | |
placeholder="xxxx xxxx xxxx xxxx" | |
data-culqi="card[number]" id="card[number]"> | |
</div> | |
<div class="form-group"> | |
<label for="card[exp_month]">Fecha expedición</label> | |
<div class="row grid-padding-8"> | |
<div class="col-xs-4"> | |
<div class="select-arrow-mini"> | |
<input type="number" class="form-control" | |
v-model="card.expiration_month" placeholder="mes" | |
data-culqi="card[exp_month]" id="card[exp_month]"> | |
</div> | |
</div> | |
<div class="col-xs-4"> | |
<div class="select-arrow-mini"> | |
<input type="number" v-model="card.expiration_year" class="form-control" | |
name="credit_card_year" maxlength="4" | |
data-culqi="card[exp_year]" id="card[exp_year]" | |
placeholder="año"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="form-group"> | |
<label for="card[cvv]">Code CVV</label> | |
<input type="text" | |
v-model="card.cvv" class="form-control" placeholder="xxxx" | |
data-culqi="card[cvv]" id="card[cvv]"> | |
</div> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox"> Acepto los <a href="#" class="check-legal">Términos | |
y condiciones</a> | |
</label> | |
</div> | |
<button value="Comprar" @click.prevent="createToken" | |
class="btn btn-turquesa btn-lg hidden-xs hidden-sms"> | |
<span></span> | |
<span>Pagar</span> | |
</button> | |
</div> | |
</div> | |
<div class="block-form"> | |
<div class="col-sm-6"> | |
<div class="form-group"> | |
<label for="name">Código promo</label> | |
<div class="row grid-padding-8"> | |
<div class="col-xs-6"> | |
<input type="text" class="form-control" placeholder="xxxx"> | |
</div> | |
<div class="col-xs-6"> | |
<input type="text" class="form-control" placeholder="xxxx"> | |
</div> | |
</div> | |
</div> | |
<div class="form-group visible-xs visible-sms"> | |
<input type="submit" class="btn btn-block btn-turquesa btn-lg" | |
value="Completar" @click.prevent="createToken"> | |
<br/> | |
</div> | |
</div> | |
</div> | |
</div> | |
</form> | |
</div> | |
</template> | |
<script> | |
import Culqi from './Culqi' | |
export default { | |
name: 'Checkout', | |
props: ['config', 'user'], | |
data () { | |
return { | |
msg: 'Welcome to Your Vue.js App', | |
loadingButton: false, | |
card: { | |
card_number: '4444333322221111', | |
cvv: '123', | |
expiration_month: '09', | |
expiration_year: '2020', | |
email: '[email protected]' | |
} | |
} | |
}, | |
mounted () { | |
/* SE INSTANCIA LA CLASE DE CULQI Y ENVIAS LA LLAVE PÚBLICA */ | |
this.culqi = new Culqi('pk_test_6fHVu257xmONLDas') | |
}, | |
methods: { | |
/* SE CREA EL TOKEN */ | |
createToken: function () { | |
this.culqi.createToken().then( | |
token => { | |
console.log('resultado ' + token) | |
} | |
) | |
} | |
} | |
} | |
</script> | |
/* ---------------------------------------------------------------- */ | |
/* culqiClass.JS */ | |
import store from '../../Store/Store' | |
/* RECIBE LA RESPUESTA DE CULQI Y LA GUARDA EN EL STORE DE VUEX */ | |
window.culqi = function (token) { | |
store.commit('setCulqiToken', token) /* CREA ESTE COMMIT EN TU STORE QUE GUARDE EL TOKEN EN EL STATE */ | |
} | |
export default class Culqi { | |
constructor (codigoComercio) { | |
window.Culqi.publicKey = codigoComercio | |
window.Culqi.init() | |
} | |
createToken () { | |
return new Promise( | |
resolve => { | |
window.Culqi.createToken() | |
/* REVISA QUE ESTÁ DISPONIBLE EL TOKEN Y RESUELVE LA PROMESA */ | |
let checkToken = setInterval(() => { | |
if (store.state.culqiToken.token) { /* ACA REVISA QUE EXISTA EL TOKEN EN EL STORE */ | |
clearInterval(checkToken) | |
resolve(store.state.culqiToken.token.id) | |
} | |
}, 1000) | |
} | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, how you call the library: <script src="https://checkout.culqi.com/v2"></script> ??