Démarrage rapide

Le chemin le plus court pour passer de rien à un paiement terminé. Il suppose que vous disposez d’une clé publique et d’au moins un wallet de règlement configuré.

1. Installer

npm install stablezact-pay

2. Monter le checkout

import { useState } from 'react';
import { StablezactPayment } from 'stablezact-pay';
import 'stablezact-pay/dist/style.css';

export default function Checkout() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pay with crypto</button>

      <StablezactPayment
        isOpen={open}
        onClose={() => setOpen(false)}
        publicKey="pk_your_public_key"
        apiUrl="https://hub.stablezact.com"
        config={{
          amount: 49.99,
          currency: 'USDC',
          customerEmail: 'customer@example.com',
        }}
        onSuccess={(paymentId, txHash) => {
          // The customer has submitted. Do not fulfil here. See step 3.
          console.log('submitted', paymentId, txHash);
        }}
        onError={(error) => console.error(error)}
      />
    </>
  );
}

Vous n’utilisez pas React ? Voici le même flux en JavaScript simple :

const stablezact = new StablezactVanilla({
  publicKey: 'pk_your_public_key',
  apiUrl: 'https://hub.stablezact.com',
  theme: 'light',
});

document.getElementById('payButton').addEventListener('click', () => {
  stablezact.open(
    { amount: 49.99, customerEmail: 'customer@example.com', merchantName: 'Your Store' },
    {
      onSuccess: (paymentId, txHash) => console.log('submitted', paymentId, txHash),
      onError: (error) => console.error(error),
    }
  );
});

3. Confirmer sur votre serveur

Confirmez depuis votre backend, là où la réponse ne peut pas être falsifiée par le navigateur :

curl https://hub.stablezact.com/api/v1/payments/PAYMENT_UUID/status \
  -H "X-Public-Key: pk_your_public_key"

Lisez outcome :

{ "payment": { "outcome": "paid", "isFinal": true } }

paid signifie que les fonds du client sont arrivés et que vous pouvez honorer la commande. Les deux autres valeurs sont pending et failed. C’est toute la règle, et elle est la même quelle que soit la façon dont le client a payé.

Mieux encore, laissez-nous vous prévenir : consultez Webhooks.

Et ensuite

Configuration : les options à connaître
Cycle de vie du paiement : honorer les commandes et suivre votre versement
Paiements excédentaires et remboursements : ce qui se passe quand le montant n’est pas le bon