Skip to main content

Vanilla JS / Web Components

The @apolopay-sdk/ui package provides the SmartPay payment button as a standard Web Component built with Lit. This means it works with any JavaScript framework or without one — it's the universal option.

Installation​

npm install @apolopay-sdk/ui

Usage​

Import the Component​

import '@apolopay-sdk/ui';

Add the Payment Button​

Once imported, the <payment-button> custom element is available in your HTML:

<payment-button
  publicKey="YOUR_PUBLIC_KEY"
  process-id="PROCESS_ID_FROM_BACKEND"
></payment-button>

Complete Example​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Store</title>
</head>
<body>
  <h1>Complete Your Purchase</h1>
  <div id="payment-section">
    <payment-button
      publicKey="pk_live_abc123..."
      process-id=""
    ></payment-button>
  </div>

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

    // When the user is ready to pay, fetch a processId from your 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();

      // Set the process-id on the payment button
      const button = document.querySelector('payment-button');
      button.setAttribute('process-id', processId);
    }

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

Props​

PropTypeRequiredDescription
publicKeystring✅Your payment button's public key from the ApoloPay dashboard
process-idstring✅The process ID obtained from your backend via the preorder API

How It Works​

  1. Your page loads and imports @apolopay-sdk/ui
  2. Your JavaScript calls your own backend to create a payment process (see Backend Integration)
  3. Your backend calls the ApoloPay API and returns the processId
  4. You set the process-id attribute on the <payment-button> element
  5. The customer interacts with the button and completes the payment

Next Steps​