Skip to content
StablezactStablezact Docs

Quickstart

The shortest path from nothing to a completed payment. It assumes a public key and at least one settlement wallet configured.

1. Install

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

2. Mount the checkout

Section titled “2. Mount the 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)}
      />
    </>
  );
}

Not using React? The same flow in plain 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. Confirm on your server

Section titled “3. Confirm on your server”

Confirm from your backend, where the answer cannot be forged by the browser:

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

Read outcome:

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

paid means the customer’s money is in and you can fulfil. The other two values are pending and failed. That is the whole rule, and it is the same however the customer paid.

Better still, let us tell you: see Webhooks.

What next

Section titled “What next”