Skip to main content

Astro

The @apolopay-sdk/astro package provides an Astro-compatible component for the SmartPay payment button.

Installation​

npm install @apolopay-sdk/astro

Usage​

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

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Checkout</title>
  </head>
  <body>
    <h1>Complete Your Purchase</h1>
    <PaymentButton
      publicKey="YOUR_PUBLIC_KEY"
      processId="PROCESS_ID_FROM_BACKEND"
      client:load
    />

    <script>
      // Fetch processId from your backend and update the component
      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

Remember to use the client:load directive so the component hydrates on the client side, as the payment button requires JavaScript to function.

Props​

PropTypeRequiredDescription
publicKeystring✅Your payment button's public key
processIdstring✅The process ID from your backend

Next Steps​