Helpers para React

@feitpay/react contém pequenos blocos de construção, sem credenciais, para a sua loja. Crie as intenções de pagamento no seu servidor; passe ao navegador apenas a checkout_url ou o id da sessão de checkout.

pnpm add @feitpay/react @feitpay/sdk

<CheckoutButton>

Um link de verdade (semântica de navegação, funciona sem JavaScript) para o checkout hospedado. Só URLs http(s) absolutas são renderizadas; qualquer outra coisa (por exemplo javascript:) vira um botão desabilitado.

import { CheckoutButton } from '@feitpay/react';

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

newTab abre uma nova aba com rel="noopener noreferrer".

useCheckoutSession

Acompanha uma sessão a partir da sua própria página de pedido. Ele assina os server-sent events, recorre a polling quando necessário e para quando o pagamento atinge um status terminal.

import { PaymentStatus, useCheckoutSession } from '@feitpay/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>Carregando o status do pagamento…</p>;
  return (
    <>
      <PaymentStatus status={status} live />
      {session?.confirmations && (
        <p>
          {session.confirmations.current} / {session.confirmations.required} confirmações
        </p>
      )}
      <small>atualizações via {transport}</small>
    </>
  );
}

Os ids de sessão são validados (cs_ + 32 caracteres) antes de qualquer requisição. Apenas endpoints públicos são chamados.

<PaymentStatus>

Exibe um status como um rótulo de texto mais um símbolo decorativo (aria-hidden), com os atributos data-status e data-tone para estilização. Os rótulos estão disponíveis em inglês, português (Brasil) e finlandês e são os mesmos do checkout hospedado e do painel. Com live, as mudanças são anunciadas de forma educada às tecnologias assistivas.

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

Nunca comunique o estado de um pagamento apenas com cor.