Ga naar inhoud
StablezactStablezact Docs

Snelstart

De kortste weg van niets naar een voltooide betaling. Er wordt uitgegaan van een public key en ten minste één geconfigureerde afwikkelingswallet.

1. Installeren

Section titled “1. Installeren”
Terminal window
npm install stablezact-pay

2. De checkout plaatsen

Section titled “2. De checkout plaatsen”
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)}
      />
    </>
  );
}

Gebruikt u geen React? Dezelfde flow in gewoon 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. Bevestigen op uw server

Section titled “3. Bevestigen op uw server”

Bevestig vanuit uw backend, waar het antwoord niet door de browser kan worden vervalst:

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

Lees outcome:

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

paid betekent dat het geld van de klant binnen is en u de bestelling kunt uitvoeren. De andere twee waarden zijn pending en failed. Dat is de hele regel, en die is hetzelfde, hoe de klant ook heeft betaald.

Nog beter: laat ons het u vertellen. Zie Webhooks.

Volgende stappen

Section titled “Volgende stappen”