Widget plug and play

Un botón «Pagar con Pago Móvil» para cualquier web. Tu cliente ve los datos para pagar, hace el Pago Móvil desde su banco, escribe la referencia y Bolívar Connect lo verifica contra tu cuenta del Banco de Venezuela. Tu tienda recibe un evento con el pago confirmado.

Instalación en tres pasos

1. Carga el widget una vez, en cualquier página donde quieras cobrar.

   <script src="https://TU_ENTORNO/demo/widget.js" defer></script>

   Nota

   Durante la beta el widget se sirve desde /demo/widget.js del entorno de pruebas. La ruta definitiva se publicará al salir a producción, y la vieja seguirá respondiendo.

2. Pon un botón por pedido. Puede ser tu propio botón, con tus estilos: el widget sólo lee los atributos data-.

   <button data-pago-movil data-monto="2.00" data-pedido="A-102">
     Pagar con Pago Móvil
   </button>

3. Entérate del pago escuchando un evento del navegador.

   document.addEventListener('pagomovil:pagado', (e) => {
     const { pedido, monto, referencia, pagador } = e.detail;
     marcarPagado(pedido);
   });

Eso es todo. No hay que instalar paquetes, no hay que compilar nada y no cambia tu CSS.

Para ponerle tus colores, tu logo y tu letra, ve a Personalizar tu marca. No hay que cambiar este código.

Atributos del botón

Atributo	Obligatorio	Qué es
data-pago-movil	sí	Marca el elemento como botón de pago. Funciona en <button>, <a> o cualquier elemento, también si se añade después de cargar la página
data-monto	sí	Importe en bolívares con punto decimal: "2.00". Es el monto exacto que se verificará
data-pedido	recomendado	Tu identificador del pedido. Vuelve en el evento y queda registrado contra el pago. Sin él se genera uno

El evento pagomovil:pagado

Se emite en document cuando el banco confirma el pago, tanto por Pago Móvil como por clave de pago (C2P).

{
  "pedido": "A-102",
  "monto": "2.00",
  "referencia": "0303327931140",
  "pagador": { "nombre": "PEPITO PÉREZ", "documento": "V12345678" }
}

pagador viene vacío (null) en los cobros con clave (C2P), porque el banco no lo devuelve en esa operación.

Confirma en tu servidor antes de despachar

El evento ocurre en el navegador del cliente, y un usuario con conocimientos técnicos podría emitirlo a mano. Úsalo para actualizar la pantalla, pero despacha el pedido sólo cuando tu servidor lo confirme con Bolívar Connect. La confirmación de servidor a servidor (webhook payment.received) está en desarrollo y se anunciará en esta página.

Abrirlo desde JavaScript

Si tu tienda ya tiene su propio botón o flujo de checkout, abre el widget tú mismo:

window.PagoMovil.abrir({
  monto: '2.00',
  pedido: 'A-102',
  onPagado: (pago) => marcarPagado(pago.pedido),
});

onPagado recibe lo mismo que el evento. Puedes usar cualquiera de las dos formas, o las dos.

Paso a paso

1 · Tu cliente pulsa el botón. El botón es tuyo y lleva tus estilos.

2 · Ve a quién pagar. Banco, teléfono, RIF y monto del comercio, cada uno con su botón de copiar para pegarlo en la app de su banco.

3 · Escribe la referencia y verificamos. Bastan los últimos 4 dígitos del comprobante. En nuestras pruebas el banco responde en menos de un segundo.

Si algo no cuadra, se lo decimos con claridad. El mismo comprobante no puede pagar dos pedidos, y si el monto es otro le decimos cuál.

O paga con clave. En la pestaña «Clave de pago» el cliente cobra al instante con la clave C2P que le da su banco, sin referencia.

En móvil se abre como una hoja desde abajo, y respeta el modo oscuro del teléfono.

Ejemplos por framework

El widget es JavaScript plano, así que funciona igual en cualquier stack. Lo único que cambia es dónde pones el <script>.

HTML

<script src="https://TU_ENTORNO/demo/widget.js" defer></script>

<button data-pago-movil data-monto="2.00" data-pedido="A-102">Pagar</button>

<script>
  document.addEventListener('pagomovil:pagado', (e) => {
    location.href = '/gracias?pedido=' + encodeURIComponent(e.detail.pedido);
  });
</script>

React / Next.js

import { useEffect } from 'react';
import Script from 'next/script'; // en React sin Next: un <script> en index.html

export function BotonPagoMovil({ pedido, monto, onPagado }) {
  useEffect(() => {
    const oir = (e) => e.detail.pedido === pedido && onPagado(e.detail);
    document.addEventListener('pagomovil:pagado', oir);
    return () => document.removeEventListener('pagomovil:pagado', oir);
  }, [pedido, onPagado]);

  return (
    <>
      <Script src="https://TU_ENTORNO/demo/widget.js" strategy="lazyOnload" />
      <button data-pago-movil data-monto={monto} data-pedido={pedido}>
        Pagar con Pago Móvil
      </button>
    </>
  );
}

Vue

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
const props = defineProps({ pedido: String, monto: String });
const emit = defineEmits(['pagado']);
const oir = (e) => e.detail.pedido === props.pedido && emit('pagado', e.detail);
onMounted(() => document.addEventListener('pagomovil:pagado', oir));
onBeforeUnmount(() => document.removeEventListener('pagomovil:pagado', oir));
</script>

<template>
  <button data-pago-movil :data-monto="monto" :data-pedido="pedido">
    Pagar con Pago Móvil
  </button>
</template>

El <script src=".../widget.js"> va una vez en index.html.

WordPress / WooCommerce

1. Añade el script al pie del tema: en Apariencia → Editor de temas → footer.php, antes de </body>, o con un plugin de «insertar código en cabecera y pie».

   <script src="https://TU_ENTORNO/demo/widget.js" defer></script>

2. En la página del pedido, añade un bloque HTML personalizado:

   <button data-pago-movil data-monto="2.00" data-pedido="A-102">
     Pagar con Pago Móvil
   </button>

Todavía no hay un plugin de WooCommerce empaquetado como pasarela de pago: el pedido no se marca como pagado solo. Llegará con la confirmación de servidor a servidor.

Cómo está construido

Es un solo archivo de JavaScript, sin framework ni dependencias: 23 kB, unos 8 kB comprimido. Lo hicimos así a propósito, porque tiene que funcionar dentro de webs que no controlamos.

• JavaScript plano (ES5). Ni React, ni Vue, ni paso de compilación. Así no choca con el framework de tu web ni con su versión, y carga en cualquier navegador de los últimos años.
• Shadow DOM. El modal se pinta dentro de un Shadow DOM, así que tu CSS no le afecta y el suyo no se escapa a tu página. Tus botones conservan tus estilos.
• Variables CSS. Colores, esquinas y letra son variables CSS dentro del Shadow DOM. Tu marca llega del servidor ya calculada y se aplica sin volver a cargar el widget.
• Delegación de eventos. Escucha los clics en document y reacciona a cualquier elemento con data-pago-movil, también a los que se añaden después de cargar la página (listas, SPA, carritos).
• Eventos estándar del navegador. Avisa con un CustomEvent (pagomovil:pagado) y, si lo pasas, con un callback. No hay SDK que inicializar.
• Tipografías de la marca (Instrument Sans, Schibsted Grotesk, Geist Mono), servidas desde nuestro dominio. Si tu web no las permite, usa las del sistema sin romperse.
• Accesible. Es un dialog modal: se cierra con Esc, el foco vuelve a tu botón al cerrarse, y los resultados se anuncian a los lectores de pantalla (aria-live).

Si tu web tiene Content Security Policy

Si tu sitio envía una cabecera Content-Security-Policy, añade el dominio del entorno a estas tres directivas:

script-src  https://TU_ENTORNO
connect-src https://TU_ENTORNO
font-src    https://TU_ENTORNO

font-src es opcional: sin ella el widget usa las tipografías del sistema.

Entorno de pruebas

En Calidad el banco sólo conoce dos pagos. Úsalos para probar:

Referencia (últimos dígitos)	Monto	Pagador
3958	1,00 Bs	FULANITO DETAL
1140	2,00 Bs	PEPITO PÉREZ

Para el cobro con clave (C2P) el banco de prueba sólo acepta 1,00 Bs con cédula V19999999, teléfono 04129999999, banco 0102 y clave 99999999.

Cada pago se puede usar una sola vez. Para volver a empezar, usa «reiniciar demo» en la caja.