Saltar al contenido principal

Vanilla JS / Web Components

El paquete @apolopay-sdk/ui proporciona el botón de pago SmartPay como un Web Component estándar construido con Lit. Esto significa que funciona con cualquier framework de JavaScript o sin ninguno — es la opción universal.

Instalación​

npm install @apolopay-sdk/ui

Uso​

Importar el Componente​

import '@apolopay-sdk/ui';

Añadir el Botón de Pago​

Una vez importado, el elemento personalizado <payment-button> estará disponible en tu HTML:

<payment-button
  publicKey="TU_LLAVE_PUBLICA"
  process-id="PROCESS_ID_DESDE_BACKEND"
></payment-button>

Ejemplo Completo​

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Tienda</title>
</head>
<body>
  <h1>Completa tu Compra</h1>
  <div id="payment-section">
    <payment-button
      publicKey="pk_live_abc123..."
      process-id=""
    ></payment-button>
  </div>

  <script type="module">
    import '@apolopay-sdk/ui';

    // Cuando el usuario esté listo para pagar, solicita un processId a tu backend
    async function initPayment() {
      const response = await fetch('/api/create-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount: 25.50 }),
      });
      const { processId } = await response.json();

      // Establece el process-id en el botón de pago
      const button = document.querySelector('payment-button');
      button.setAttribute('process-id', processId);
    }

    initPayment();
  </script>
</body>
</html>

Propiedades (Props)​

PropiedadTipoRequeridoDescripción
publicKeystring✅La llave pública de tu botón de pago desde el panel de ApoloPay
process-idstring✅El process ID obtenido desde tu backend a través de la API de preorden

Cómo Funciona​

  1. Tu página carga e importa @apolopay-sdk/ui
  2. Tu JavaScript llama a tu propio backend para crear un proceso de pago (ver Integración Backend)
  3. Tu backend llama a la API de ApoloPay y devuelve el processId
  4. Tú estableces el atributo process-id en el elemento <payment-button>
  5. El cliente interactúa con el botón y completa el pago

Siguientes Pasos​