React

The @apolopay-sdk/react package provides a native React component that wraps the SmartPay payment button.

Installation

npm install @apolopay-sdk/react

Usage

import { PaymentButton } from '@apolopay-sdk/react';

function CheckoutPage() {
  const [processId, setProcessId] = useState('');

  useEffect(() => {
    // Call your backend to create a payment process
    fetch('/api/create-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: 25.50 }),
    })
      .then(res => res.json())
      .then(data => setProcessId(data.processId));
  }, []);

  return (
    <div>
      <h1>Complete Your Purchase</h1>
      <PaymentButton
        publicKey="YOUR_PUBLIC_KEY"
        processId={processId}
      />
    </div>
  );
}

export default CheckoutPage;

Props

Prop	Type	Required	Description
publicKey	string	✅	Your payment button's public key
processId	string	✅	The process ID from your backend

Next Steps

• Backend Integration → — Set up the preorder API call
• Webhooks → — Get notified when payments are completed