fma-ds

Payment Card

The payment card screens: the saved card and the form to add one.

originalMITexperimentalChangelogRegistry JSON

Overview

Saved card

  • `PaymentCardDetails`: draws the saved card (credit-card) beside a description-list (issuer, last digits, holder, expiry) from the gateway's data (number with hidden digits, issuer, name, expiry), with actions under it.
  • `PaymentCardRemove`: the destructive button that asks through a ConfirmDialog and runs onRemove with the dialog pending, showing an error if it throws.

Adding a card

PaymentCardForm is a react-aria Form that lays PaymentCardPreview beside PaymentCardFields (stacked when narrow). The fields are ready-made react-aria TextFields that feed the live preview with their value and focus (the code field turns the card):

  • `PaymentCardNumberField`: masked by issuer.
  • `PaymentCardNameField`: part="first"/"last" split it for gateways that take them apart.
  • `PaymentCardExpiryField`: MM/YY.
  • `PaymentCardCodeField`: digits, sized by the issuer.

Each takes value/onChange or defaultValue, name, validate, isInvalid and errorMessage (for react-hook-form's Controller), label and description. Validate with the credit-card-validation lib.

Built-in text is in English; translate it with label, placeholder and i18n.labels.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/payment-card

    Files land in components/fma-ds/payment-card/payment-card.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1