WAOPay Plugins | Catalogo publico de modulos

📂

catalog-m embed.js

Usalo cuando un sitio necesita mostrar catalogo, categorias y detalle de producto sin desarrollar una integracion propia contra la API del comercio.

Catalogo Producto SEO

Pasos de integracion

Crea en la pagina del sitio un contenedor vacio donde se montara el catalogo.
Solicita una credencial wco1... emitida con module: catalog.
Confirma que el origen del sitio y la configuracion del modulo esten activos en el panel.
Define window.WAOMEmbedConfig antes de cargar el script solo con credencial, target y funciones locales necesarias.
Carga https://plugins.waopay.app/catalog-m/public/embed.js.
Prueba busqueda, filtros, paginacion, detalle de producto y botones de accion.

Opciones comunes

Opcion	Uso
`credential`	Credencial publica `wco1...` del modulo `catalog`; no reemplaza al Bearer Token.
`target`	Selector del contenedor donde se renderiza el catalogo.

Configuracion desde panel

Al iniciar, catalog-m valida la credencial y pide su configuracion remota por module-get-config.
El panel administra la configuracion base, incluyendo tema, textos, paginacion, vista inicial, botones y SEO publico.
El snippet local debe conservar credential, target, callbacks y funciones JavaScript propias del sitio.
No coloques en el snippet opciones de tema, textos, botones, paginacion, SEO publico o carrito flotante; esas opciones vienen del panel por API.

Snippet base

catalog-m · embed

<div id="waom-catalog"></div>

<script>
window.WAOMEmbedConfig = {
  target: '#waom-catalog',
  credential: 'wco1.k2026...'
};
</script>
<script async
  src="https://plugins.waopay.app/catalog-m/public/embed.js">
</script>

Acciones, eventos y SEO

Si defines actions.add, el sitio puede conectar el boton de agregar con su propio carrito o cotizador.
Si no hay accion personalizada, el modulo intenta usar window.DipropolCart.addToCart(product) y despues emite eventos como waom:add, waom:cart, waom:share y waom:details.
Compatibilidad temporal: tambien acepta window.YSVEmbedConfig, window.YSVEmbeds, #ysv-catalog, [data-ysv-embed] y eventos ysv:*.
El detalle de producto se abre dentro del mismo contenedor y actualiza titulo, canonical, Open Graph, Twitter tags y JSON-LD cuando el navegador lo permite.
Para previews sociales especificos por producto en el dominio del cliente, carga catalog-m/public/seo-header.php desde el <head> del sitio cuando exista ?product=....
Ejemplo: https://plugins.waopay.app/catalog-m/public/seo-header.php?product=4l-botella-1&target=https%3A%2F%2Fdominio.com%2Fcatalogo&siteName=Mi%20tienda.
Si el sitio no renderiza metadata propia, seo.productBaseUrl puede apuntar a catalog-m/public/product.php como fallback de compartido.

Checklist de prueba

La credencial pertenece a module: catalog.
El origen del sitio esta permitido desde la configuracion del panel.
El catalogo carga categorias y productos.
La busqueda, filtros y paginacion responden en escritorio y movil.
El detalle de producto conserva navegacion e historial.
Los botones de cotizacion, carrito o compartir ejecutan la accion esperada del sitio.

🛒

checkout-m embed.js

Usalo cuando un sitio necesita agregar productos, abrir carrito y completar checkout con un flujo embebido en JavaScript.

Carrito Checkout

Pasos de integracion

Confirma que la pagina final se sirve por HTTPS.
Solicita una credencial wco1... emitida con module: checkout.
Confirma que el origen del sitio y la configuracion del checkout esten activos en el panel.
Agrega botones de producto con data-product-id de un producto existente en el catalogo WAOPay y cantidad inicial opcional.
Define window.WAOCheckoutConfig antes del script solo con credencial, selectores, retorno y callbacks locales necesarios.
Carga https://plugins.waopay.app/checkout-m/public/embed.js?v=20260922-1 también en la página indicada por returnUrl; Aplazo vuelve a esa página y el script completa el retorno al checkout.
Prueba agregar, editar cantidad, abrir carrito, checkout y retorno al sitio.

Opciones comunes

Opcion	Uso
`credential`	Credencial publica `wco1...` del modulo `checkout`; no reemplaza al Bearer Token.
`addTrigger`	Selector de botones que agregan producto al carrito.
`openTrigger`	Selector de botones que abren el carrito.
`returnUrl`	URL del mismo origen a la que vuelve el cliente; para Aplazo debe cargar el script de checkout-m para reenviar el retorno firmado.
`messageTargetOrigin`	Origen que recibira el `postMessage` de checkout completado.
`onAdd`, `onComplete`, `onError`	Callbacks para analitica, mensajes del sitio o seguimiento de resultado.

Configuracion desde panel

Al iniciar, checkout-m valida la credencial y pide su configuracion remota por module-get-config.
El panel administra la configuracion base, incluyendo tema, carrito flotante y comportamiento publico del checkout.
requestTimeoutMs lo fija el backend de checkout-m en 45000 ms; no se configura en el panel ni en el snippet.
El snippet local debe conservar credential, selectores, callbacks y funciones JavaScript propias del sitio.
No coloques en el snippet opciones de tema, textos, botones, paginacion, SEO publico o carrito flotante; esas opciones vienen del panel por API.

Snippet base

checkout-m · embed

<button class="js-add-product"
  data-product-id="55350"
  data-product-qty="1">
  Agregar producto
</button>
<button class="js-open-cart">
  Abrir carrito
</button>

<script>
window.WAOCheckoutConfig = {
  credential: 'wco1.k2026...',
  addTrigger: '.js-add-product',
  openTrigger: '.js-open-cart',
  origin: window.location.origin,
  returnUrl: window.location.href,
  messageTargetOrigin: window.location.origin,
  onAdd: function (context) {
    console.log('Producto agregado', context);
  },
  onComplete: function (context) {
    console.log('Checkout completado', context);
  },
  onError: function (context) {
    console.error(context.error);
  }
};
window.addEventListener('wao:checkout:complete', function (event) {
  console.log('Evento checkout completo', event.detail);
});
</script>
<script async
  src="https://plugins.waopay.app/checkout-m/public/embed.js?v=20260922-1">
</script>

Boton de producto

Cada boton que sube un producto al carrito debe apuntar a un producto que ya exista en el catalogo cargado en WAOPay. El modulo consulta ese producto en WAOPay antes de agregarlo; si el ID no existe o no pertenece al comercio de la credencial, no podra subirse al carrito.

Atributo	Requerido	Uso
`class`	Sí	Debe coincidir con `addTrigger`, por ejemplo `js-add-product`.
`data-product-id`	Sí	ID numerico del producto en el catalogo WAOPay.
`data-product-qty`	No	Cantidad inicial sugerida. Si se omite, el modulo usa `1`.

boton de producto

<button class="js-add-product"
  data-product-id="55350"
  data-product-qty="1">
  Agregar producto
</button>

Uso en el sitio

Los eventos de botones son delegados, asi que tambien funcionan con productos renderizados despues de cargar el script.
checkout-m no crea catalogos ni productos; solo agrega al carrito productos que ya esten cargados en WAOPay.
Tambien puedes usar WAOCheckout.add(productId, quantity), WAOCheckout.open(), WAOCheckout.checkout() y WAOCheckout.loadAndCheckout(items) desde scripts propios del sitio.
Antes de agregar, el modulo consulta los datos actuales del producto y muestra confirmacion con imagen, titulo, precio, disponibilidad y selector de cantidad.
Para iniciar solo el checkout sin mostrar ni usar el carrito del sitio, llama WAOCheckout.loadAndCheckout(items) desde una funcion JavaScript local.
catalog-m puede cotizar productos con precio 0, pero checkout-m solo permite carrito y pago cuando WAOPay devuelve un precio mayor a 0.
Los productos deben existir en WAOPay y tener inventario suficiente; si la disponibilidad no alcanza, el carrito o checkout rechaza la operacion.
El carrito flotante, la precarga, el tema visual y otros comportamientos publicos se administran desde el panel de configuracion.

Checkout directo sin carrito

Este flujo permite enviar directamente las lineas que el cliente eligio desde un carrito propio, un cotizador o una pagina de producto. checkout-m valida cada producto contra el catalogo WAOPay, reemplaza el carrito activo y abre el checkout.

checkout directo · JSON

<button id="wao-fast-checkout">Pagar ahora</button>
<script>
document.getElementById('wao-fast-checkout').addEventListener('click', function () {
  WAOCheckout.loadAndCheckout([
    {
      id: 55350,
      qty: 2,
      attributes: {
        talla: 'M',
        color: 'Negro'
      },
      extras: [
        { name: 'Grabado', value: 'Omar' }
      ],
      options: {
        empaque: 'Regalo'
      },
      instructions: 'Sin etiqueta'
    }
  ]);
});
</script>

Cada linea debe incluir el ID del producto (id o product_id) y la cantidad (qty o quantity).
Los modificadores pueden enviarse en attributes, extras u options; las instrucciones opcionales se envian en instructions.
No envies price, item_title ni cart: checkout-m obtiene esos datos desde WAOPay y valida precio e inventario antes de iniciar el pago.
loadAndCheckout(items) reemplaza el carrito activo para evitar duplicados. El script embed.js y la credencial deben estar cargados antes de llamar la funcion.

Checklist de prueba

La credencial pertenece a module: checkout.
El origen del sitio esta permitido desde la configuracion del panel.
Los botones agregan el producto correcto y respetan cantidad inicial.
El carrito flotante muestra el total de unidades y abre correctamente.
El flujo de entrega, totales y confirmacion se completa sin errores visibles.
El encabezado del checkout muestra el monto estimado y se actualiza al cambiar la entrega.
Los callbacks onComplete, el evento wao:checkout:complete y onError se ejecutan cuando corresponde.

Integra catalogo y checkout WAOPay en tu sitio web

catalog-m embed.js

Checklist de prueba

checkout-m embed.js

Checklist de prueba