Schnellstart

Der kürzeste Weg von null zu einer abgeschlossenen Zahlung. Vorausgesetzt werden ein Public Key und mindestens eine konfigurierte Auszahlungs-Wallet.

1. Installieren

npm install stablezact-pay

2. Den Checkout einbinden

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)}
      />
    </>
  );
}

Sie verwenden kein React? Derselbe Ablauf in reinem JavaScript:

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. Auf Ihrem Server bestätigen

Führen Sie die Bestellung nicht in onSuccess aus

onSuccess wird ausgelöst, wenn die Wallet des Kunden die Transaktion akzeptiert, nicht wenn das Geld on-chain bestätigt ist. Eine Transaktion kann danach noch fehlschlagen, ersetzt oder verworfen werden. Behandeln Sie es als „übermittelt“ und führen Sie die Bestellung erst aus, wenn Ihr Server die Zahlung bestätigt hat.

Bestätigen Sie über Ihr Backend, wo die Antwort nicht vom Browser gefälscht werden kann:

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

Lesen Sie outcome:

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

paid bedeutet, dass das Geld des Kunden eingegangen ist und Sie die Bestellung ausführen können. Die beiden anderen Werte sind pending und failed. Das ist die ganze Regel, und sie gilt unabhängig davon, wie der Kunde bezahlt hat.

Noch besser: Lassen Sie sich von uns benachrichtigen, siehe Webhooks.

Wie geht es weiter

• Konfiguration: die Optionen, die Sie kennen sollten
• Zahlungslebenszyklus: Bestellungen ausführen und Ihre Auszahlung verfolgen
• Überzahlungen und Rückerstattungen: was passiert, wenn der Betrag nicht stimmt