AOF Creative Solutions • Web Architecture
Pasarela Invisible en Cloudflare Pages. Cero Bloat. Cero WordPress.
Integración de cobros SPEI y Web3 en sitios estáticos con 1 línea de script. Liquidación directa al comercio con solo 1.49% + $3 MXN y blindaje fiscal SAT Art. 18-J LIVA.
Modos de Integración Disponibles
[01] CERO JAVASCRIPT
Atributos Declarativos HTML
Ideal para páginas de aterrizaje, botones de compra directa, reservas de canchas y servicios boutique. Solo añade atributos data-zocalo-* al HTML.
<button
data-zocalo-pay
data-amount="1250"
data-merchant-id="merch_padel_polanco"
data-merchant-name="Pádel Masaryk"
data-customer-email="socio@padel.mx"
data-success-url="/success.html">
Reservar Cancha ($1,250 MXN)
</button>
[02] CONTROL TOTAL JS
Checkout Programático
Para carritos dinámicos, flujos multi-paso o aplicaciones interactivas en React, Vue, Svelte o Vanilla JS. Dispara el modal con un método limpio.
window.ZocaloPay.openCheckout({
amountMxn: 3800,
merchantId: "merch_clinica_cdmx",
merchantName: "Clínica Masaryk",
customerEmail: "paciente@salud.mx",
onSuccess: (order) => {
console.log("Acreditado SPEI", order);
}
});
[03] EDGE SERVERLESS
Pages Function (/api/create-order)
Máxima seguridad: el navegador no conoce tu sk_live_.... La Cloudflare Pages Function genera la orden en el Edge y devuelve el modal.
const res = await fetch("/api/create-order", {
method: "POST",
body: JSON.stringify({
amountMxn: 5400,
concept: "Retoque Estético Dental"
})
});
Registro de Actividad en Vivo (Zócalo Dispatcher)
Listening to DOM CustomEvent:zocalo:success
[00:00:00]
Widget drop-in inicializado. Escuchando eventos de pago en Cloudflare Pages...