Skip to content

Instantly share code, notes, and snippets.

@cvega93
Created February 13, 2018 21:02
Show Gist options
  • Save cvega93/137444f99ea826ef17e397ecfb077c95 to your computer and use it in GitHub Desktop.
Save cvega93/137444f99ea826ef17e397ecfb077c95 to your computer and use it in GitHub Desktop.
Clase para obtener un evento asíncrono de Culqi
<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: 'richard@piedpiper.co'
}
}
},
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)
}
)
}
}
@emmanuelbarturen
Copy link

it's works like a charm!

@LiamKlyneker
Copy link

Hi, how you call the library: <script src="https://checkout.culqi.com/v2"></script> ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment