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.
Define window.YSVEmbedConfig antes de cargar el script.
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
`target`	Selector del contenedor donde se renderiza el catalogo.
`itemsPage` / `itemsPageMode`	Cantidad por pagina, paginacion normal o limite fijo de productos.
`productColumns`	Numero fijo de columnas del catalogo; use `0` para grid responsivo automatico.
`showSidebar` / `showToolbar`	Muestra u oculta categorias, busqueda, conteo y controles de vista.
`breadcrumbs`	Controla migas de pan en el detalle de producto.
`hideOnDetail`	Oculta selectores del sitio mientras se muestra el detalle del producto.
`seo.productBaseUrl`	Permite compartir URLs con metadata server-side del modulo cuando el sitio no renderiza metadata propia.
`theme`	Colores y radio visual aplicados solo al modulo.
`buttons`	Texto, clases, URLs y atributos para acciones de detalle, cotizacion, carrito y compartir.

Snippet base

catalog-m · embed

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

<script>
window.YSVEmbedConfig = {
  target: '#ysv-catalog',
  credential: 'wco1.k2026...',
  itemsPage: 12,
  itemsPageMode: 'paginate',
  productColumns: 0,
  showSidebar: true,
  showToolbar: true,
  showViewToggle: true,
  showPrices: true,
  defaultCatalogView: 'grid',
  defaultCurrency: 'MXN',
  priceLocale: 'es-MX',
  seo: {
    shareBaseUrl: window.location.href,
    productBaseUrl: 'https://plugins.waopay.app/catalog-m/public/product.php',
    siteName: document.title || 'Catalogo'
  },
  hideOnDetail: ['.page-hero'],
  breadcrumbs: {
    enabled: true,
    showCurrent: true,
    homeUrl: '/',
    catalogUrl: ''
  },
  theme: {
    primary: '#e8291c',
    buttonHover: '#c91f15',
    secondary: '#111111',
    accent: '#1565c0'
  },
  texts: {
    detailsButton: 'Ver detalles',
    addButton: 'Agregar a cotizacion',
    cartButton: 'Ver cotizacion',
    sidebarButton: 'Ver cotizacion'
  },
  buttons: {
    add: { mode: 'quote', className: 'js-add-to-quote' },
    cart: { url: '' },
    sidebar: { enabled: true, url: '' }
  }
};
</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 ysv:add, ysv:cart, ysv:share y ysv:details.
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 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 y origen permitido del sitio.
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.
Carga https://plugins.waopay.app/checkout-m/public/embed.js?v=20260621-3.
Prueba agregar, editar cantidad, abrir carrito, checkout rapido por JSON y retorno al sitio.

Opciones comunes

Opcion	Uso
`addTrigger`	Selector de botones que agregan producto al carrito.
`openTrigger`	Selector de botones que abren el carrito.
`floatingCart`	Controla el boton flotante del carrito y su posicion.
`returnUrl`	URL a la que vuelve el cliente despues de completar el flujo.
`messageTargetOrigin`	Origen que recibira el `postMessage` de checkout completado.
`theme`	Colores aplicados dentro del checkout sin modificar el sitio anfitrion.
`quickCheckoutTrigger`	Selector del boton que inicia checkout rapido usando JSON del carrito del sitio.
`cartJsonProvider`	Funcion que entrega las lineas del carrito cuando el cliente hace clic en el boton rapido.
`requestTimeoutMs`	Tiempo maximo de espera para preparar carritos grandes o conexiones lentas.
`prefetchCart`	Si es `true`, precarga el carrito guardado al cargar la pagina; por defecto se refresca al abrirlo.
`onAdd`, `onComplete`, `onError`	Callbacks para analitica, mensajes del sitio o seguimiento de resultado.

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',
  floatingCart: {
    show: true,
    horizontal: 'right',
    vertical: 'bottom'
  },
  returnUrl: window.location.href,
  messageTargetOrigin: window.location.origin,
  theme: {
    primary: '#e8291c',
    buttonHover: '#c91f15',
    secondary: '#111111',
    accent: '#1565c0'
  },
  onAdd: function (context) {
    console.log('Producto agregado', context);
  },
  onComplete: function (context) {
    console.log('Checkout completado', context);
  },
  quickCheckoutTrigger: '#wao-fast-checkout',
  cartJsonProvider: function () {
    return [
      { id: 55350, qty: 2, attributes: { talla: 'M' } },
      { product_id: 190331, quantity: 1, extras: [{ name: 'Grabado', value: 'Omar' }] }
    ];
  },
  requestTimeoutMs: 45000,
  prefetchCart: false,
  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=20260621-3">
</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.
En checkout rapido, el JSON solo envia ID, cantidad, attributes, extras, options e instructions; WAOPay completa precio y titulo antes de cargar el carrito.
Los productos deben existir en WAOPay y tener inventario suficiente; si la disponibilidad no alcanza, el carrito o checkout rechaza la operacion.
floatingCart: false o floatingCart: { show: false } oculta el boton flotante.
prefetchCart: true precarga el carrito guardado al cargar la pagina; por defecto se evita esa llamada hasta que el cliente abre el carrito.

Checklist de prueba

La credencial pertenece a module: checkout y permite el dominio del sitio.
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