Credit Card
ProA premium payment-card visual that updates live as the user types: auto-detects the brand from the number, formats the digits (incl. Amex 4-6-5), and flips to the back for the CVC. Display-only — the number and CVC are masked by default, and it never collects or transmits card data. Five gradient themes.
</>sv-credit-card credit cardpaymentcheckoutcardecommercepci
Complexity tier: Interactive The primitive bar, plus declared async states, a keyboard model, focus restoration and undo for destructive actions.
import { SvCreditCardComponent } from '@styloviz-pro/commerce';Demo & usage
Basic usage
ProUsage example — open the gallery for the full interactive demo.
Pro
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Saved card (masked, the default)
ProFlip on CVC focus (two-way)
ProEntry preview — explicit opt-out of masking
ProPrivacy mode — take the reveal back for a shared session
ProWhen to use
- A live preview beside the payment form at checkout.
- A saved-cards list in the account, fed from a payment token’s last4 and brand.
- You want brand detection and formatting handled for you.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| number | string | '' | Card number (digits; non-digits are ignored). Only the brand and the last four digits are ever rendered unless `maskNumber` is turned off — see the PCI boundary note on the class. |
| name | string | '' | Cardholder name. |
| expiry | string | '' | Expiry as MM/YY. |
| cvc | string | '' | CVC / security code (shown on the back). |
| brand | CreditCardBrand | 'auto' | 'auto' | Force a brand, or 'auto' to detect from the number. |
| variant | CreditCardVariant | 'noir' | Gradient theme. |
| issuer | string | '' | Optional issuing-bank name shown top-left. |
| flippable | boolean | true | Allow click / keyboard to flip the card. |
| showCvc | boolean | true | Show the CVC block on the back. |
| maskNumber | boolean | true | Mask all but the last four entered digits. Masked by default — set false only when the digits on screen are ones you accept appearing in a screenshot or a session recording. |
| maskCvc | boolean | true | Mask the CVC, so flipping the card cannot expose it. A CVC must never be stored at all, which makes it the value that should never be recoverable from a recording. |
| privacy | boolean | false | Declare that this session is recorded, screen-shared or replayed. While set, the number and the CVC render masked even where `maskNumber` or `maskCvc` was turned off, and the face that lost its reveal says why. An app-wide `provideSvSensitivePrivacy()` (from `@styloviz/core`) does the same for every card while this is left unset. This is a declaration, not a detection — see the note on the class. |
| placeholderName | string | 'CARDHOLDER NAME' | Placeholder cardholder name when empty. |
| flipped | boolean (two-way) | false | Whether the back is showing (two-way: `[(flipped)]`). |
Outputs
| Event | Payload type | Description |
|---|---|---|
| flippedChange | boolean | Emits the new `flipped` whenever it changes — the output half of `[(flipped)]`. |
Customization & theming
- Five gradient variants (noir, indigo, sunset, emerald, ocean).
- Force a brand or auto-detect; optional issuer name.
- Toggle flippability, CVC visibility, and masking of the number and CVC independently.
- privacy overrides both mask opt-outs at runtime, because the opt-out is set at author time while screen sharing is only known during the session — and the face that lost its reveal says so, so dots where digits were requested are not mistaken for a broken render.
- Custom placeholder cardholder name.
Best practices
- Do: Collect card data with your PSP’s hosted element (Stripe Elements, Adyen Components) — those keep the digits in an iframe the provider owns, which is what keeps your page out of PCI DSS scope.
- Do: Leave maskNumber and maskCvc at their masked defaults; opt out per-instance only for values you accept appearing in a screenshot or session recording.
- Do: Feed saved-card tiles from a token’s last4 + brand rather than a stored number.
- Do: Flip to the back when the CVC field is focused via [(flipped)].
- Don't: Do not bind a real card number. This is a display, not an input — doing so puts the PAN in your own DOM and pulls the whole page into PCI DSS scope.
- Don't: Do not turn masking off to "make the demo look better" on a page that handles real cards — screen shares and session-replay tools record the DOM, not the screen.
- Do: Bind privacy to whatever your host actually knows about the session — a MediaStreamTrack from your own getDisplayMedia call, your conferencing SDK’s in-call flag, or your session-replay tool’s state. It re-masks anything a template opted out of.
- Don't: Do not expect privacy to detect a recorder on its own. A page cannot observe a capture it did not start, so nothing here sniffs for one — a check that silently never fires reads like protection while providing none.
Accessibility
- When flippable the card exposes role="button", a descriptive label and Enter / Space activation.
- Chip, contactless mark and decorative sheen are hidden from assistive tech.
- Number is real, formatted text; the card is always dark-styled with sufficient contrast.
- The number and CVC are select-none, so neither can be dragged to the clipboard.
- A withheld reveal is announced as real text on the affected face — front for the number, back for the CVC — rather than by the absence of digits alone.
Feedback on Credit Card
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.