@paygate/react

Le SDK officiel React pour intégrer Paygate de façon transparente dans vos applications.

Installation

npm install @paygate/react

Usage

import { PaygateProvider, PaygateElements, PaygatePaymentElement, usePaygate } from '@paygate/react';

// 1. Enveloppez votre application avec le Provider et votre Clé Publique Paygate
function App() {
  return (
    <PaygateProvider publicKey="pk_test_votre_cle_publique_paygate">
      <CheckoutForm clientSecret="secret_recu_depuis_votre_backend" />
    </PaygateProvider>
  );
}

// 2. Utilisez les éléments de paiement et le hook
function CheckoutForm({ clientSecret }) {
  return (
    <PaygateElements clientSecret={clientSecret}>
      <PaymentForm />
    </PaygateElements>
  );
}

function PaymentForm() {
  const { confirmPayment, isReady } = usePaygate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!isReady) return;

    const result = await confirmPayment({
      confirmParams: {
        return_url: window.location.href,
      },
    });

    if (result.error) {
      console.log(result.error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaygatePaymentElement />
      <button type="submit" disabled={!isReady}>Payer</button>
    </form>
  );
}