Web Component

El frontend de Botón de Pago es un Web Component que se carga desde un CDN y se inserta como un tag HTML. Dispara eventos de JavaScript que tu sitio escucha para orquestar el flujo de pago.

Importar desde el CDN

HTML 
<script type="module" src="https://bt-cdn-uat.yappycloud.com/v1/cdn/web-component-btn-yappy.js"></script>
<script type="module" src="https://bt-cdn.yappy.cloud/v1/cdn/web-component-btn-yappy.js"></script>

Insertar el botón

HTML
<btn-yappy theme="blue"></btn-yappy>

Themes disponibles

El atributo theme controla el estilo visual del botón. Hay seis variantes oficiales:

Pagar con yappy
theme=“blue”
Pagar con yappy
theme=“darkBlue”
Pagar con yappy
theme=“orange”
Pagar con yappy
theme=“dark”
Pagar con yappy
theme=“sky”
Pagar con yappy
theme=“light”

Para bordes redondeados, agrega el atributo rounded=“true”:

HTML
<btn-yappy rounded="true" theme="light"></btn-yappy>

Eventos del botón

EventoTipoDescripción
eventClickrequeridoSe dispara cuando el usuario hace click. Úsalo para llamar a tu backend y crear la orden.
eventSuccessrequeridoTransacción ejecutada exitosamente. Recibe los detalles en event.detail.
eventErrorrequeridoLa transacción falló. Recibe el detalle en event.detail.
eventPaymentmétodoNo es listener: es un método que tú invocas con { transactionId, token, documentName } tras crear la orden.
isYappyOnlineopcionalDevuelve true si el canal Yappy está disponible.
isButtonLoadingopcionalProperty: pásalo en true para mostrar el botón en estado de carga.
triggerModalopcionalProperty: controla si se muestra el modal con el contador de la transacción.

Snippet canónico de integración

JavaScript · vanilla
window.addEventListener("load", () => {
  const btnYappy = document.querySelector("btn-yappy");

  btnYappy.addEventListener("eventSuccess", (event) => {
    console.log("Transacción ejecutada: ", event.detail);
  });

  btnYappy.addEventListener("eventError", (event) => {
    console.log("Transacción fallida: ", event.detail);
  });

  btnYappy.addEventListener("eventClick", async () => {
    try {
      const response = await fetch('/api/crear-orden', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
      });
      const result = await response.json();
      if (result?.body?.token && result?.body?.documentName && result?.body?.transactionId) {
        btnYappy.eventPayment({
          transactionId: result.body.transactionId,
          documentName: result.body.documentName,
          token: result.body.token
        });
      }
    } catch (error) {
      console.error('Error:', error);
    }
  });
});
¿Te fue útil esta página?