Conectado pasarela de pagos de El Salvador wompi con wix

Hola estimados lectores, con este artículo lo que queremos es motivarlos y apoyarlos para realizar sus comercios en línea. Nosotros en empatiaLab creemos mucho en la co-creación y es por esa razón que les dejamos este script y esperamos que les pueda ayudar.

Primero deben crear su sitio en wix y habilitar la plataforma para desarrolladores y esta se habilita desde la opción de menú de la parte de arriba y Avanzado y listo ahi les saldrá la opción para habilitar el modo desarrollador.

Luego en el menú de la izquierda siempre en modo desarrollador les aparecerá el menú de las páginas que tiene su sitio web y en la opción que dice "Backend" debes agregar un nuevo módulo con el nombre "PagoWompi.jsw" y copia y pega este código:

import { fetch } from 'wix-fetch';

export async function chargeWompi(tdc, cvc, mes, anio, monto, email, nombre) {

let requestWompi = {

"grant_type": "client_credentials",

"client_id": "Tu id de wompi debe ir aquí",

"client_secret": "Tu client secret de wompi debe ir aquí",

"audience": "wompi_api"

}

let encoded = "";

for (let [k, v] of Object.entries(requestWompi)) {

encoded = encoded.concat(k, "=", encodeURI(v), "&");

}

const token = await fetch("https://id.wompi.sv/connect/token", {

method: 'POST',

headers: {

"Content-Type": "application/x-www-form-urlencoded"

},

body: encoded

});

if (token.status >= 200 && token.status < 300) {

const ret = await token.json();

let accesstoken = ret.access_token;

const response = await fetch("https://api.wompi.sv/TransaccionCompra", {

method: 'post',

headers: {

"Authorization": "Bearer " + accesstoken,

"Content-Type": "application/json"

},

body: '{"tarjetaCreditoDebido": {' + '"numeroTarjeta": "'+ tdc +'",' + ' "cvv": "'+ cvc +'", ' + ' "mesVencimiento":'+ mes +' ,' + ' "anioVencimiento":'+ anio +' },' + '"monto":'+ monto +',' + '"emailCliente": "'+ email +'",' + '"nombreCliente": "'+ nombre +'",' + '"formaPago": "PagoNormal",' + '"cantidadCuotas": ""}'

});

if (response.status >= 200 && response.status < 300) {

const retWompi = await response.json();

return { "chargeId": retWompi.idTransaccion };

}

}

let res = await token.json();

let err = res.error.type;

return { "error": err };

}

export function encodeBody(token, cart) {

let encoded = "";

for (let [k, v] of Object.entries(cart)) {

encoded = encoded.concat(k, "=", encodeURI(v), "&");

}

encoded = encoded.concat("source=", encodeURI(token));

return encoded;

}

---

Ahora que ya tienes tu código del backend debes dirigirte a tu página en donde ya tengas un formulario de pago y copiar y pegar este código:

import {local} from 'wix-storage';

import wixLocation from 'wix-location';

import {chargeWompi} from "backend/PagoWompi"

$w.onReady(function () {

// TODO: write your page related code here...

$w("#txtMonto").text = local.getItem('Compra');

});

export function btnPagar_click(event) {

// Add your code for this event here:

var tdc, cvc, mes, anio, monto, email, nombre;

anio = $w("#iptAnio").value;

mes = $w("#iptMes").value;

tdc = $w("#iptNumero").value;

cvc = $w("#iptCVC").value;

monto = local.getItem('Compra');

email = $w("#iptCorreo").value;

nombre = $w("#iptNombre").value;

chargeWompi(tdc, cvc, mes, anio, monto, email, nombre)

.then((response)=>{

if(response.chargeId){

//pago exitoso

let codigo = response.chargeId;

wixLocation.to("/gracias");

} else{

// pago fallido

$w("#txtEstatusPago").text = "Fallamos al procesar el pago";

$w("#txtEstatusPago").show();

$w("#txtEstatusPago").expand();

}

});

}

---

Aclaro que si ya tienes un formulario de pago listo con sus propios ID, debes cambiarlos en el código y cambiar también el nombre de la página adonde se dirigirá el cliente cuando el pago se realice con éxito.

Listo ya con esto debería de funcionar el pago en línea con wompi. Solamente debes tener cuidado de que el aplicativo en wompi este en modo desarrollador porque de lo contrario te harán cargos a tu tarjeta. Ah y una cosa más, wompi aún no refleja en el módulo de transacciones las transacciones realizadas en el modo desarrollador, de la única forma que te puedes dar cuenta si la transacción fué realizada con éxito es esperando el correo de confirmación de la compra. Cuando coloques el aplicativo "en vivo" la transacción se reflejará en tu módulo de transacciones.

Éxito mis amigos en realizar estas configuraciones!!!. Por cualquier cosa nos puedes escribir a nuestro correo empatialab@gmail.com o escríbenos en el chat del sitio web o búscanos en facebook como empatiaLab y mandanos un mensaje que con gusto atenderemos tu solicitud.