Pix Automático

Install

Install manually View source on GitHub

Anatomy

PixAutomatico
PixAutomaticoHeader
PixAutomaticoAvatar
PixAutomaticoTitle
PixAutomaticoStatusBadge
PixAutomaticoReview
PixAutomaticoAmount
PixAutomaticoTerms
PixAutomaticoTerm
PixAutomaticoMethod
PixAutomaticoAuthorize
PixAutomaticoQrCode
PixAutomaticoAppPending
PixAutomaticoActive
PixAutomaticoSchedule
PixAutomaticoOutcome

Accessibility6 checks

The card is a section named by the product. Terms are a description list, and the CNPJ is read as text.
The authorization method is a radio group named “Como você quer autorizar?” with arrow keys, Home, and End. Arrows only select; a click, tap, or Space on “No app do banco” opens the bank step, so the content never swaps under arrow keys.
The bank step is a group named “Escolha seu banco”. Its search field is a combobox that controls a single-select listbox named “Bancos” through aria-activedescendant, so focus stays in the field while ↑ and ↓ move. The listbox is one tab stop with Home, End, and type-ahead; Enter selects and moves to “Enviar para o app …”, Esc clears the search and then goes back, and the result count is announced politely while searching. Disabled banks stay reachable and read their reason.
Focus goes to the search field on open (the heading on touch screens), back to the opener on Voltar, and to the waiting title once the request is sent, so it's never lost when the review goes inert.
The status badge is a polite live region that speaks “Pedido enviado para o app Itaú. Aguardando confirmação.” (or “Aguardando confirmação no banco” without a bank), “Pix Automático autorizado”, or “Autorização recusada”; the countdown is a time element that announces once, a minute before it expires.
Next charges are an ordered list named “Próximas cobranças”, each read as “5 de novembro, R$ 89,90, próxima”. The pulsing phone ring and the bank monograms are decorative.

Brazil

Clube do Café

Casa Aroeira

Pix Automático

R$ 89,90por mês

Primeira cobrança: 05/11/2026
Periodicidade: Mensal, todo dia 5
Vigência: Sem data de término
Recebedor: Casa Aroeira LtdaCNPJ 12.345.678/0001-95

Você confirma no app do seu banco e pode definir um valor máximo por cobrança. Dá para cancelar quando quiser, direto no banco.

Como você quer autorizar?

Code example

usage.tsx

"use client";import { useState } from "react";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";import {  PIX_AUTOMATICO_DEFAULT_BANKS,  PixAutomatico,  PixAutomaticoActive,  PixAutomaticoAmount,  PixAutomaticoAppPending,  PixAutomaticoAuthorize,  PixAutomaticoAvatar,  type PixAutomaticoBanksStatus,  PixAutomaticoHeader,  PixAutomaticoMaxHint,  PixAutomaticoMethod,  PixAutomaticoNotice,  PixAutomaticoOutcome,  PixAutomaticoQrCode,  PixAutomaticoReview,  PixAutomaticoSchedule,  type PixAutomaticoStatus,  PixAutomaticoStatusBadge,  PixAutomaticoTerm,  PixAutomaticoTerms,  PixAutomaticoTitle,  type PixAutomaticoVariant,} from "@/components/ui/uai/pix-automatico";const code =  "00020101021226930014br.gov.bcb.pix2571pix.casaaroeira.com.br/rec/7d9f0335-8dcc-4054-9bf9-0dbd61b2a4b95204000053039865802BR5912CASA AROEIRA6014BELO HORIZONTE62070503***6304A1F2";const variableCharges = [  { date: "2026-11-05", amount: 156.8 },  { date: "2026-12-05", amount: 171.25 },  { date: "2027-01-05", amount: 163.4 },];// The example list plus an invented cooperative, so no real bank is ever shown as unavailable.const banks = [  ...PIX_AUTOMATICO_DEFAULT_BANKS.slice(0, 1),  { id: "ipe", name: "Cooperativa Ipê", disabled: true, disabledReason: "Em manutenção" },  ...PIX_AUTOMATICO_DEFAULT_BANKS.slice(1),];const charges = [  { date: "2026-11-05", amount: 89.9 },  { date: "2026-12-05", amount: 89.9 },  { date: "2027-01-05", amount: 89.9 },];export function PixAutomaticoPreview({ variant = "card" }: { variant?: PixAutomaticoVariant }) {  const [status, setStatus] = useState<PixAutomaticoStatus>("review");  const [expiresAt, setExpiresAt] = useState<number | undefined>(undefined);  const [banksStatus, setBanksStatus] = useState<PixAutomaticoBanksStatus>("ready");  // Your app persists the last-used bank (account preference, cookie); the preview keeps it here.  const [recentBankId, setRecentBankId] = useState("nubank");  const [pickerOpen, setPickerOpen] = useState(false);  const variable = variant === "plain";  const go = (next: PixAutomaticoStatus) => {    // Your PSP sends the request and its expiry; the preview gives it ten minutes.    if (next === "awaiting") setExpiresAt(Date.now() + 10 * 60 * 1000);    setStatus(next);  };  return (    <div style={{ display: "grid", gap: 12, justifyItems: "center" }}>      <ToggleGroup        type="single"        aria-label="Simular status"        value={status}        onValueChange={(next) => next && go(next as PixAutomaticoStatus)}        className="flex-wrap justify-self-center"      >        <ToggleGroupItem value="review">Revisão</ToggleGroupItem>        <ToggleGroupItem value="awaiting">Aguardando</ToggleGroupItem>        <ToggleGroupItem value="active">Ativo</ToggleGroupItem>        <ToggleGroupItem value="declined">Recusado</ToggleGroupItem>        <ToggleGroupItem value="expired">Expirado</ToggleGroupItem>        <ToggleGroupItem value="cancelled">Cancelado</ToggleGroupItem>      </ToggleGroup>      {/* Only the open bank picker reads the list status. The row keeps its space while hidden,          so the card never moves, and inert takes it out of focus and the accessibility tree. */}      <div        inert={!pickerOpen}        aria-hidden={!pickerOpen || undefined}        className={          pickerOpen            ? "justify-self-center opacity-100 transition-opacity duration-180 ease-out motion-reduce:transition-none"            : "justify-self-center opacity-0 transition-opacity duration-180 ease-out motion-reduce:transition-none"        }      >        <ToggleGroup          type="single"          aria-label="Simular lista de bancos"          value={banksStatus}          onValueChange={(next) => next && setBanksStatus(next as PixAutomaticoBanksStatus)}          className="flex-wrap justify-self-center"        >          <ToggleGroupItem value="ready">Lista pronta</ToggleGroupItem>          <ToggleGroupItem value="loading">Carregando bancos</ToggleGroupItem>          <ToggleGroupItem value="error">Erro na lista</ToggleGroupItem>        </ToggleGroup>      </div>      <PixAutomatico        variant={variant}        status={status}        code={code}        expiresAt={status === "awaiting" ? expiresAt : undefined}        banks={banks}        banksStatus={banksStatus}        onBanksRetry={() => setBanksStatus("ready")}        recentBankId={recentBankId}        onBankPickerOpenChange={setPickerOpen}        onAuthorize={(payload) => {          if (payload.method === "app") setRecentBankId(payload.bank.id);          go("awaiting");        }}        onChangeBank={() => go("review")}        onRetry={() => go("review")}        onOtherMethod={() => go("review")}        onExpire={() => go("expired")}      >        <PixAutomaticoHeader>          <PixAutomaticoAvatar>CA</PixAutomaticoAvatar>          <PixAutomaticoTitle            product={variable ? "Clube do Café · Seleção do mês" : "Clube do Café"}            recipient={              status === "review" || status === "active"                ? "Casa Aroeira"                : variable                  ? "Valor variável"                  : "R$ 89,90 por mês"            }          />          <PixAutomaticoStatusBadge />        </PixAutomaticoHeader>        <PixAutomaticoReview>          <PixAutomaticoAmount value={variable ? "variable" : 89.9} period="month" />          <PixAutomaticoTerms>            <PixAutomaticoTerm label="Primeira cobrança">05/11/2026</PixAutomaticoTerm>            <PixAutomaticoTerm label="Periodicidade">              {variable ? "Mensal" : "Mensal, todo dia 5"}            </PixAutomaticoTerm>            <PixAutomaticoTerm label="Vigência">              {variable ? "Até 12/2027" : "Sem data de término"}            </PixAutomaticoTerm>            <PixAutomaticoTerm label="Recebedor" detail="CNPJ 12.345.678/0001-95">              Casa Aroeira Ltda            </PixAutomaticoTerm>            {variable ? (              <PixAutomaticoTerm label="Valor máximo mínimo">R$ 150,00</PixAutomaticoTerm>            ) : null}          </PixAutomaticoTerms>          {variable ? <PixAutomaticoMaxHint minimum={150} /> : <PixAutomaticoNotice />}          <PixAutomaticoMethod />          <PixAutomaticoAuthorize />        </PixAutomaticoReview>        <PixAutomaticoQrCode          src="/brazil/pix-qr.svg"          alt="QR Code do Pix Automático do Clube do Café"        />        <PixAutomaticoAppPending />        <PixAutomaticoActive>          {variable            ? "Valor variável, todo mês, a partir de 05/11."            : "R$ 89,90 por mês, a partir de 05/11."}        </PixAutomaticoActive>        <PixAutomaticoSchedule charges={variable ? variableCharges : charges} />        <PixAutomaticoOutcome />      </PixAutomatico>    </div>  );}

Manual installation

pix-automatico.tsx

Loading component source…