React

El paquete @apolopay-sdk/react proporciona un componente nativo de React que envuelve el botón de pago SmartPay.

Instalación

npm install @apolopay-sdk/react

Uso

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

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

  useEffect(() => {
    // Llama a tu backend para crear un proceso de pago
    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>Completa tu Compra</h1>
      <PaymentButton
        publicKey="TU_LLAVE_PUBLICA"
        processId={processId}
      />
    </div>
  );
}

export default CheckoutPage;

Propiedades (Props)

Propiedad	Tipo	Requerido	Descripción
publicKey	string	✅	La llave pública de tu botón de pago
processId	string	✅	El process ID desde tu backend

Siguientes Pasos

• Integración Backend → — Configura la llamada a la API de preorden
• Webhooks → — Recibe notificaciones cuando los pagos se completen