React helpers

@gryphem-pay/react contains small, credential-free building blocks for your storefront. Create payment intents on your server; pass only the checkout_url or the checkout session id to the browser.

pnpm add @gryphem-pay/react @gryphem-pay/sdk

<CheckoutButton>

A real link (navigation semantics, works without JavaScript) to the hosted checkout. Only absolute http(s) URLs are rendered; anything else (for example javascript:) becomes a disabled button.

import { CheckoutButton } from '@gryphem-pay/react';

<CheckoutButton checkoutUrl={intent.checkout_url} className="btn-primary" locale="pt-BR" />;

newTab opens a new tab with rel="noopener noreferrer".

useCheckoutSession

Follows a session from your own order page. It subscribes to server-sent events, falls back to polling, and stops once the payment reaches a terminal status.

import { PaymentStatus, useCheckoutSession } from '@gryphem-pay/react';

function OrderStatus({ sessionId }: { sessionId: string }) {
  const { status, session, error, transport } = useCheckoutSession(sessionId, {
    baseUrl: 'https://api.feitpay.com',
    pollIntervalMs: 3000,
  });
  if (error) return <p role="alert">{error.message}</p>;
  if (!status) return <p>Loading payment status…</p>;
  return (
    <>
      <PaymentStatus status={status} live />
      {session?.confirmations && (
        <p>
          {session.confirmations.current} / {session.confirmations.required} confirmations
        </p>
      )}
      <small>updates via {transport}</small>
    </>
  );
}

Session ids are validated (cs_ + 32 characters) before any request is made. Only public endpoints are called.

<PaymentStatus>

Renders a status as a text label plus a decorative symbol (aria-hidden), with data-status and data-tone attributes for styling. Labels are available in English, Portuguese (Brazil) and Finnish and match the hosted checkout and dashboard. With live, changes are announced politely to assistive technology.

[data-gryphem-status][data-tone='success'] { color: var(--semantic-success); }
[data-gryphem-status][data-tone='warning'] { color: var(--semantic-warning); }

Never communicate a payment state with colour alone.