Saltar al contenido principal

Astro

El paquete @apolopay-sdk/astro proporciona un componente compatible con Astro para el botón de pago SmartPay.

Instalación​

npm install @apolopay-sdk/astro

Uso​

---
// checkout.astro
import { PaymentButton } from '@apolopay-sdk/astro';
---

<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Caja</title>
  </head>
  <body>
    <h1>Completa tu Compra</h1>
    <PaymentButton
      publicKey="TU_LLAVE_PUBLICA"
      processId="PROCESS_ID_DESDE_BACKEND"
      client:load
    />

    <script>
      // Obtén el processId desde tu backend y actualiza el componente
      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();

        const button = document.querySelector('payment-button');
        if (button) {
          button.setAttribute('process-id', processId);
        }
      }

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

Recuerda usar la directiva client:load para que el componente se hidrate en el lado del cliente (client-side), ya que el botón de pago requiere JavaScript para funcionar.

Propiedades (Props)​

PropiedadTipoRequeridoDescripción
publicKeystring✅La llave pública de tu botón de pago
processIdstring✅El process ID desde tu backend

Siguientes Pasos​