@futurekode/stablepay-react

Headless React components and helpers for accepting USDC on Solana with built-in verification.

This package is the reusable payment component layer. It does not depend on the hosted Payflow dashboard or request-page product.

Install

npm install @futurekode/stablepay-react

Usage

import {
  StablePayProvider,
  StablePay,
  usePaymentVerification,
} from "@futurekode/stablepay-react";

export function Checkout() {
  const { status, verify } = usePaymentVerification();

  return (
    <StablePayProvider to="YOUR_WALLET_ADDRESS">
      <StablePay
        amount={0.1}
        reference="order-123"
        metadata={{ requestId: "req_123", customerEmail: "alice@example.com" }}
        onSuccess={async (payload) => {
          console.log(payload.metadata?.requestId);
          await verify(payload);
        }}
      >
        <button>
          {status === "verifying"
            ? "Verifying..."
            : status === "pending"
              ? "Confirming..."
              : status === "confirmed"
                ? "Paid"
                : "Pay 0.1 USDC"}
        </button>
      </StablePay>
    </StablePayProvider>
  );
}

API

• verifyPayment — verify a transaction against expected payment details
• waitForPaymentConfirmation — wait until a payment is confirmed
• usePaymentVerification — React hook for simplest integration

metadata

StablePay accepts an optional metadata prop for app-side context.

<StablePay
  amount={0.1}
  reference="order-123"
  metadata={{ requestId: "req_123", customerEmail: "alice@example.com" }}
  onSuccess={(payload) => {
    console.log(payload.metadata?.requestId);
  }}
>
  <button>Pay 0.1 USDC</button>
</StablePay>

metadata is:

• returned in the onSuccess payload
• useful for request IDs, customer context, or analytics source data
• not sent on-chain
• not persisted anywhere by the package itself