🧾 is-pasarela-component

💳 Un componente Vue 3 para integrar Niubiz, Culqi e Izipay en una sola interfaz

is-pasarela-component te permite seleccionar dinámicamente qué pasarela de pago usar en tu aplicación a través de una prop, manteniendo una interfaz unificada y fácil de integrar.

✅ Ahorra tiempo y evita duplicar formularios.
🧠 Centraliza la lógica de cada pasarela (Niubiz, Culqi, Izipay).
🎯 Ideal para aplicaciones Vue 3 que requieran múltiples opciones de pago.

---

✨ Características Principales

• 🔀 Switcher Interno: Un componente central (Switcher.vue) que, según la prop pasarela, decide si muestra el formulario de Niubiz, Culqi o Izipay.

• ⚙️ Props de Configuración: Cada pasarela tiene su propio objeto de configuración para que puedas pasar tus keys, valores personalizados y parámetros específicos.

• 🧩 Integración Simple: Solo necesitas importar el componente, registrarlo en tu main.js (o de forma local) y ¡listo para usar!

• 📡 Eventos Reactivos: Captura eventos clave como pago-exitoso, error-pago, loaders, etc. directamente desde el componente usando @eventos, sin necesidad de librerías externas.

---

📚 Tabla de Contenidos

1. 📦 Instalación
2. 🧩 Registro del Componente
3. 🧩 Props Disponibles
4. 📡 Eventos Emitidos
5. 🛠️ Ejemplo Completo de Implementación
6. 🖼️ Vista Previa de las Pasarelas
7. 🧠 A tener en cuenta

---

📦 Instalación

1npm  install  is-pasarela-component

---

⚠️ Requiere Vue 3
Asegúrate de tener un proyecto basado en Vue 3.
Por ejemplo, creado con Vite o Vue CLI.

🧩 Registro del Componente

Una vez instalado, debes registrar el componente en tu aplicación.
Puedes hacerlo de forma global en tu main.js o de manera local en el componente donde lo usarás.

🌐 Registro Global (ejemplo en main.js)

1import { createApp } from  "vue";
2
3import  App  from  "./App.vue";
4
5import  isPasarelaComponent  from  "is-pasarela-component"; // <-- Importa el paquete
6
7const  app = createApp(App);
8
9// Registras con el nombre que quieras (ej: "is-pasarela-compoment")
10
11app.component("is-pasarela-compoment", isPasarelaComponent);
12
13app.mount("#app");

En adelante, para invocarlo en tus templates, usarás la etiqueta <is-pasarela-compoment /> (o el nombre que hayas asignado).

---

📦 Registro Local (en un componente específico)

1import isPasarelaComponent from 'is-pasarela-component';
2
3export default {
4components: {
5  isPasarelaComponent
6}
7};

🧩 Props Disponibles

La siguiente tabla describe cada prop y sus valores por defecto. Puedes ajustarlos según tus necesidades:

---

🎯 Propiedades Principales

Prop	Tipo	Requerido	Valor por Defecto	Descripción
pasarela	String	✅ Sí	'NIUBIZ'	Determina qué pasarela se muestra. Debe ser uno de: NIUBIZ, CULQI, IZIPAY
cliente	Object	✅ Sí	—	Información del cliente que será usada por la pasarela. Incluye: nombre, apellido, correo, documento, telefono, direccion, ciudad, departamento, pais, codigoPostal, tipoDocumento.
verCheckAfiliacion	Boolean	✅ Sí	true	Muestra u oculta el checkbox de afiliación (para pagos recurrentes).
verTyC	Boolean	✅ Sí	true	Muestra u oculta la sección de Términos y Condiciones.
textoBoton	String	✅ Sí	'PAGAR'	Texto del botón de pago (ej: "PAGAR Y AFILIAR").
monedaBoton	String	✅ Sí	'S/'	Tipo de moneda mostrada en el botón (S/, $, USD, etc.).
montoBoton	String	✅ Sí	'650.1'	Monto que se muestra en el botón.
logoPasarela	String	—	''	URL o ruta local del logo que se mostrará en la parte inferior.

---

📜 Uso de la Prop scripts

La prop scripts es un objeto que permite especificar las URLs necesarias para cargar los scripts de cada pasarela (Niubiz, Culqi, Izipay). Este prop es fundamental para que las integraciones funcionen correctamente en ambos entornos: Test y Producción.

📌 ¿Cómo se define?

1scripts: {
2  niubiz: "URL del script de Niubiz",  
3  culqi: "URL del script de Culqi",  
4  izipay: "URL del script de Izipay"
5}

🌐 URLs Recomendadas por Pasarela

Pasarela	Versión	Entorno	URL
NIUBIZ	Formulario Desacoplado	Test	https://pocpaymentserve.s3.amazonaws.com/payform.min.js
NIUBIZ	Formulario Desacoplado	Producción	https://static-content.vnforapps.com/elements/v1/payform.min.js
CULQI	Culqi-Checkout-Custom	Test	https://js.culqi.com/checkout-js
CULQI	Culqi-Checkout-Custom	Producción	https://js.culqi.com/checkout-js
IZIPAY	Web SDK	Test	https://sandbox-checkout.izipay.pe/payments/v1/js/index.js
IZIPAY	Web SDK	Producción	https://checkout.izipay.pe/payments/v1/js/index.js

⚠️ Consideraciones

• Siempre asegúrate de que la URL corresponda al entorno que deseas (Test o Producción).

• Cambiar de URL cuando tu proyecto pase a producción.

• Mantener el prop scripts como un objeto para facilitar la configuración de múltiples pasarelas.

---

⚙️ Configuración por Pasarela

💳 configNiubiz

**Tipo: Object • Requerido: Depende del uso
Configuración específica para Niubiz.

Ejemplo de campos esperados:

1{
2  sessionkey: '367fcdf5e838bd9d4a6b9b6ade968a11c91b8c6eb89115796b15d154073e95fb',
3  merchantid: '602545705',
4  purchasenumber: '44927175573',
5  amount: '1',
6  callbackurl: '',
7  channel: 'paycard',
8  font: '',
9  recurrentmaxamount: '1',
10  buttonColor: '#ff4081'
11}

---

💳 configCulqi

Tipo: Object • Requerido: Depende del uso
Configuración específica para Culqi.

Ejemplo de campos esperados:

1{
2  publicKey: 'pk_test_TQLObbWAFesE46fz',
3  buttonColor: '#ff4081'
4}

---

💳 configIzipay

Tipo: Object • Requerido: Depende del uso
Configuración específica para Izipay.

Ejemplo de campos esperados:

1{
2  tokenSesion: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjaGFudENvZGUiOiI0MDA0MzUzIiwiZmFjaWxpdGF0b3JDb2RlIjoiMCIsInRyYW5zYWN0aW9uSWQiOiIxNzQyNDI1OTcwNDM0IiwiT3JkZXJOdW1iZXIiOiIxNzQyNDI1OTcwIiwiQW1vdW50IjoiNjUwLjEwIiwiVG9rZW5JZCI6ImQ0NDdiNWFjLTk0YzAtNDEzMC04MWZiLTc0MDY1ZmNhZmJmMyIsIm5iZiI6MTc0MjQyNTk3MSwiZXhwIjoxNzQyNDI2ODcxLCJpYXQiOjE3NDI0MjU5NzF9.y-m5zGHafd9MLddrZS7Vy_IdE-QyEQPiBEGoKyVgTlI',
3  transaccionId: '1742425970434',
4  codigoComercio: '4004345',
5  nroOrden: '1742425970',
6  merchantBuyerId: '1740679328',
7  buttonColor: '#ff4081',
8  amount: '1',
9  currency: 'PEN'
10}

---

📡 Eventos Emitidos

El componente emite eventos clave durante el flujo de pago. Puedes escucharlos directamente desde el componente usando la sintaxis de Vue: @nombre-del-evento="tuMetodo".

---

🌀 mostrar-loader

Solicita mostrar un loader (por ejemplo, un spinner o modal de carga).

Payload:
N/A

---

✅ ocultar-loader

Indica que la carga finalizó y se puede ocultar el loader.

Payload:
N/A

---

📜 abrir-tyc

Solicita abrir la ventana o sección de Términos y Condiciones.

Payload:
N/A

---

📝 ckeck-afiliar

Emite si el usuario marca o desmarca el checkbox de afiliación.

Payload:

1{ checked: Boolean }

---

❌ error-libreria

Ocurre un error al cargar una librería externa (como el script de Culqi).

Payload: Error o String con detalles

---

🛑 error-formulario

Se emite cuando hay un error de validación o integración en el formulario (antes de enviar el pago).

Payload: Error o Object con detalles

---

⚠️ error-pago

Indica un error durante el procesamiento del pago a nivel de la pasarela.

Payload:
String u Object con detalle del error

---

🎉 pago-exitoso

📌 Evento principal: notifica que el pago se completó exitosamente o no.

Payload:
Objeto con datos de la transacción (token, orden, monto, etc.)

---

🦻Cómo escuchar los eventos

1<template>
2<is-pasarela-component
3  ...
4  @pago-exitoso="onPagoExitoso"
5  @error-pago="onErrorPago"
6  @mostrar-loader="onMostrarLoader"
7  @ocultar-loader="onOcultarLoader"
8  @abrir-tyc="onAbrirTyC"
9  @ckeck-afiliar="onCheckAfiliar"
10  @error-libreria="onErrorLibreria"
11  @error-formulario="onErrorFormulario"
12/>
13</template>
14<script>
15...
16methods: {
17  onPagoExitoso(data) {
18    console.log("Pago exitoso:", data);
19  },
20  onErrorPago(error) {
21    console.error("Error en el pago:", error);
22  },
23  // ...otros handlers
24}
25...
26</script>

---

🛠️ Ejemplo Completo de Implementación

A continuación se muestra una implementación real y funcional del componente is-pasarela-component, incluyendo:

• Creación dinámica de sesiones
• Configuración de las tres pasarelas (Niubiz, Culqi, Izipay)
• Escucha de eventos clave
• Uso directo en el template

1<template>
2  <div v-if="render">
3    <is-pasarela-component
4      :pasarela="pasarela"
5      :scripts="scripts"
6      :configNiubiz="niubizConfig"
7      :configCulqi="configurationCulqi"
8      :configIzipay="configurationIzi"
9      :cliente="cliente"
10      :verCheckAfiliacion="verCheckAfiliacion"
11      :verTyC="verTyC"
12      :textoBoton="textoBoton"
13      :monedaBoton="monedaBoton"
14      :montoBoton="montoBoton"
15      :logoPasarela="logoPasarela"
16
17      @mostrar-loader="onMostrarLoader"
18      @ocultar-loader="onOcultarLoader"
19      @ckeck-afiliar="onCheckAfiliar"
20      @abrir-tyc="onAbrirTyC"
21      @error-libreria="onErrorLibreria"
22      @error-formulario="onErrorFormulario"
23      @pago-exitoso="onPagoExitoso"
24      @error-pago="onErrorPago"
25    />
26  </div>
27</template>
28
29<script>
30import isPasarelaComponent from "is-pasarela-component";
31import axios from "axios";
32
33//Los logotipos son opcionales
34import culqiLogo from "@/assets/culqi_logo.png";
35import niubizLogo from "@/assets/niubiz_logo.png";
36import izipayLogo from "@/assets/izipay_logo.png";
37
38export default {
39  components: { isPasarelaComponent },
40  data() {
41    return {
42      render: false,
43      scripts: {
44		niubiz: 'https://pocpaymentserve.s3.amazonaws.com/payform.min.js',
45		culqi: 'https://js.culqi.com/checkout-js',
46		izipay: 'https://sandbox-checkout.izipay.pe/payments/v1/js/index.js',
47	  },
48      pasarela: 'NIUBIZ', // Puedes cambiarlo dinámicamente a 'CULQI' o 'IZIPAY'
49      niubizConfig: {
50        sessionkey: '',
51        channel: 'paycard',
52        merchantid: '602545705',
53        purchasenumber: this.generarPurchaseNumber(),
54        amount: '650.1',
55        callbackurl: '',
56        font: 'https://fonts.googleapis.com/css?family=Montserrat:400&display=swap',
57        recurrentmaxamount: '1000.0',
58        buttonColor: '#ff4081'
59      },
60      configurationCulqi: {
61        publicKey: '',
62        buttonColor: '#ff4081'
63      },
64      configurationIzi: {
65        tokenSesion: '',
66        transaccionId: '',
67        codigoComercio: '4004353',
68        nroOrden: '',
69        merchantBuyerId: this.generarMerchantBuyerId(),
70        buttonColor: '#ff4081',
71        amount: '650.1',
72        currency: 'PEN'
73      },
74      cliente: {
75        nombre: 'MIGUEL ANGEL',
76        apellido: 'QUISPE',
77        correo: 'miguel.quispe@interseguro.com.pe',
78        documento: '71755734',
79        alias: 'MIGUEL ANGEL',
80        telefono: '930248757',
81        direccion: 'Av. Lima 123',
82        ciudad: 'Lima',
83        departamento: 'Lima',
84        pais: 'PE',
85        codigoPostal: '00001',
86        tipoDocumento: 'DNI'
87      },
88      verCheckAfiliacion: true,
89      verTyC: true,
90      textoBoton: 'PAGAR',
91      monedaBoton: 'S/',
92      montoBoton: '650.1',
93      logoPasarela: null
94    };
95  },
96  async mounted() {
97    const transaccionId = this.generarTransaccionId();
98    const ordenNumber = this.generarOrdenNumber();
99
100    const crearSesionRequest = {
101      amount: 650.1,
102      currency: 'PEN',
103      email: 'prueba@prueba.com.pe',
104      identityNumber: '71755734',
105      saleNumber: '502293362',
106      recurrenceMaxAmount: 0,
107      product: "VIDAFREE",
108      provider: this.pasarela,
109      clientIP: "181.66.137.232",
110      application: "TI_ADN",
111      transactionId: transaccionId,
112      orderNumber: ordenNumber,
113      requestSource: "ECOMMERCE"
114    };
115
116    const sesion = await this.crearSesionPasarela(crearSesionRequest);
117
118    if (this.pasarela === "NIUBIZ") {
119      this.niubizConfig.sessionkey = sesion.data.data.sesionKey;
120      this.logoPasarela = niubizLogo;
121    } else if (this.pasarela === "CULQI") {
122      this.configurationCulqi.publicKey = sesion.data.data.publicKey;
123      this.logoPasarela = culqiLogo;
124    } else if (this.pasarela === "IZIPAY") {
125      this.configurationIzi.tokenSesion = sesion.data.data.sesionKey;
126      this.configurationIzi.transaccionId = transaccionId;
127      this.configurationIzi.nroOrden = ordenNumber;
128      this.logoPasarela = izipayLogo;
129    }
130
131    this.render = true;
132  },
133  methods: {
134    generarMerchantBuyerId() {
135      const now = new Date();
136      return now.toLocaleString("sv-SE").replace(/\D/g, '').slice(0, 14);
137    },
138    generarPurchaseNumber() {
139      return `${Math.floor(Math.random() * 8999 + 1000)}71755734`.substring(0, 11);
140    },
141    generarTransaccionId() {
142      return `${Date.now().toString().slice(0, 14)}`;
143    },
144    generarOrdenNumber() {
145      return `${Date.now().toString().slice(0, 10)}`;
146    },
147    async crearTokenAuth() {
148      const request = {
149        clientId: 'MIX_PASARELAS_FRONT',
150        clientSecret: 'mix-pasarela-front 2025'
151      };
152      const response = await axios.post(
153        "https://is-cr-pasarelas-auth-697487592519.us-central1.run.app/auth/token",
154        request
155      );
156      return response.data;
157    },
158    async crearSesionPasarela(request) {
159      const { token: bearerToken } = await this.crearTokenAuth();
160      const headers = {
161        Authorization: `Bearer ${bearerToken}`
162      };
163      const response = await axios.post(
164        "https://is-cr-pasarelas-web-gateway-697487592519.us-central1.run.app/crear-sesion-pasarela",
165        request,
166        { headers }
167      );
168      return response;
169    },
170    onMostrarLoader() {
171      console.log("mostrar-loader");
172    },
173    onOcultarLoader() {
174      console.log("ocultar-loader");
175    },
176    onCheckAfiliar(data) {
177      console.log("ckeck-afiliar", data);
178    },
179    onAbrirTyC() {
180      console.log("abrir-tyc");
181    },
182    onErrorLibreria(err) {
183      console.log("error-libreria", err);
184    },
185    onErrorFormulario(err) {
186      console.log("error-formulario", err);
187    },
188    onPagoExitoso(data) {
189      console.log("pago-exitoso", data);
190      alert(`¡Pago Exitoso! ID: ${data.id || data.transactionToken}`);
191    },
192    onErrorPago(err) {
193      console.log("error-pago", err);
194      alert("Ocurrió un error al procesar tu pago. Intenta nuevamente.");
195    }
196  }
197};
198</script>
199

🧩 Explicación del Ejemplo

Este ejemplo demuestra cómo integrar is-pasarela-component en una aplicación real, de forma clara y escalable.

1️⃣ Prop pasarela

Controla qué formulario de pasarela se mostrará:

• 'NIUBIZ'
• 'CULQI'
• 'IZIPAY'

Puedes cambiar este valor dinámicamente si necesitas ofrecer más de una opción al usuario.

2️⃣ Configuración por Pasarela

Cada pasarela requiere diferentes credenciales y estructura:

• niubizConfig: Incluye sessionkey, merchantid, purchasenumber, etc.
• configurationCulqi: Solo requiere la publicKey.
• configurationIzi: Necesita tokenSesion, transaccionId, nroOrden, entre otros.

Estas credenciales se obtienen haciendo una solicitud al backend mediante el servicio crear-sesion-pasarela.

3️⃣ Datos del Cliente

La prop cliente contiene información de la persona que está realizando el pago.
Ejemplo: nombre, correo, documento, dirección, etc.

Estas propiedades son utilizadas por las pasarelas como metadatos o para llenar automáticamente los formularios.

4️⃣ Eventos Emitidos

📡 Escucha los eventos del componente para reaccionar en tu lógica:

Evento	Qué hace
@mostrar-loader	Muestra un spinner o animación de carga
@ocultar-loader	Oculta el loader cuando termina el proceso
@ckeck-afiliar	Captura si el usuario marcó el checkbox de afiliación
@abrir-tyc	Abre los Términos y Condiciones
@error-libreria	Error al cargar una librería externa (ej: Culqi)
@error-formulario	Error de validación o configuración
@pago-exitoso	¡El pago fue exitoso! Ideal para redirigir o confirmar
@error-pago	Algo falló durante el pago, puedes mostrar un mensaje

---

5️⃣ Creación Dinámica de Sesión

Antes de renderizar el componente, se hace una llamada a un backend para:

• Autenticarse (crearTokenAuth)
• Obtener una sesión (crearSesionPasarela)
• Establecer las props requeridas por la pasarela correspondiente

Esto asegura que cada vez que se renderiza el formulario, lo hace con credenciales actualizadas y válidas.

🧠 Este flujo es ideal para aplicaciones en producción donde las sesiones deben durar poco y manejarse con seguridad desde el backend.

---

🖼️ Vista Previa de las Pasarelas

A continuación se muestran ejemplos visuales de cómo se renderiza cada pasarela integrada en el componente:

🔵 Formulario Niubiz

---

🟠 Formulario Culqi

---

🔴 Formulario Izipay

🧠 A Tener en Cuenta

⚠️ Consideraciones Generales

1️⃣ Culqi inicia con el checkbox de afiliación desactivado.
El check de afiliación empieza desmarcado por defecto cuando se usa Culqi. Si deseas cambiar este comportamiento, asegúrate de ajustarlo manualmente.

2️⃣ Cada renderización requiere nuevas credenciales.
Cada vez que quieras cambiar, recargar o reutilizar una pasarela, debes generar nuevas credenciales con el servicio crear-sesion-pasarela.
Esto evita errores relacionados con sesiones expiradas o inválidas.

3️⃣ Tiempo de sesión sugerido: 5 minutos.
⌛ Se recomienda limitar el tiempo de sesión a 5 minutos en la vista donde se muestra el formulario.
Esto se debe a que algunas pasarelas (como Niubiz o Izipay) cierran su formulario por inactividad.

4️⃣ Las URL's de los servicios (autenticación, sesión, etc) pueden variar.
Estas URL dependen del entorno en el que estés trabajando (desarrollo, staging, producción).
Asegúrate de mantenerlas como variables de entorno o configuraciones externas para facilitar su mantenimiento y evitar exponer datos sensibles en el código fuente.

5️⃣ Evita renderizar el componente sin credenciales válidas.
Antes de mostrar el componente, asegúrate de haber obtenido correctamente la sesión correspondiente (session key, public key, token, etc).
Mostrarlo sin esta información puede causar errores o formularios en blanco.

6️⃣ Los montos deben coincidir en frontend y backend.
Verifica que el monto y moneda que se muestra en el botón coincida con el que se envía en la creación de sesión.
Esto evita rechazos por inconsistencias entre cliente y servidor.

7️⃣ No reutilices claves o tokens entre usuarios o sesiones.
Cada pago debe iniciar con credenciales únicas. Reutilizar tokens puede llevar a errores inesperados o incluso rechazos por parte de las pasarelas.

---

🔐 Buenas Prácticas para Producción

✅ Configura correctamente tus llaves y credenciales en el backend.
🔒 Protege tokens y datos sensibles. No los expongas en el cliente.
🎨 Personaliza estilos y textos para mantener coherencia con tu marca o aplicación.

---

🧾 ¡Disfruta de tu integración de pagos con is-pasarela-component!
Si tienes dudas o sugerencias, no dudes en contribuir o abrir un issue 🐛