Payment Card

React data-display

Animated 3D credit-card visual. Auto-detects brand (Visa, Mastercard, Amex, Discover) from the card number, flips between front and back, and supports opt-in mouse-parallax tilt and a shimmering gradient sweep. Pure presentational — pass typed values in via props.

Also available for Vue ->

Installation

$ pnpm dlx shadcn@latest add https://react.uipkge.dev/r/react/payment-card.json

$ npx shadcn@latest add https://react.uipkge.dev/r/react/payment-card.json

$ yarn dlx shadcn@latest add https://react.uipkge.dev/r/react/payment-card.json

$ bunx shadcn@latest add https://react.uipkge.dev/r/react/payment-card.json

Or with the named registry: npx shadcn@latest add @uipkge-react/payment-card

Examples

Props

Name	Type / Values	Default	Required
`number`	`string`	—	optional
`name`	`string`	—	optional
`expiry`	`string`	—	optional
`cvc`	`string`	—	optional
`brand`	`'visa' \| 'mastercard' \| 'amex' \| 'discover' \| 'unknown' \| 'auto'`	—	optional
`flipped`	`boolean`	—	optional
`variant`	`'default' \| 'compact'`	—	optional
`tilt`	`boolean`	—	optional
`shimmer`	`boolean`	—	optional
`flip`	`boolean`	—	optional
`size`	`'sm' \| 'md' \| 'lg'`	—	optional
`className`	`string`	—	optional

Used by

checkout-flow payment-form saved-cards-list

Files (2)

components/ui/payment-card/payment-card.tsx 21.6 kB

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'

// Brand wordmark paths (from simpleicons.org, MIT-licensed). Single-path SVGs
// drawn against a 24x24 viewBox. Fill is set to currentColor so the parent
// controls color (white on the dark card gradient).
const BRAND_PATHS: Record<Exclude<CardBrand, 'unknown'>, string> = {
  visa: 'M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z',
  mastercard:
    'M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z',
  amex: 'M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234l.02-.008c.18-.072.48-.297.48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0zM21.156 14.955c.004.005.006.012.01.016.01.01.024.01.032.02l-.042-.035zM23.828 13.082h.065v.555h-.065zM23.865 15.03v-.005c-.03-.025-.046-.048-.075-.07-.15-.153-.39-.215-.764-.225l-.36-.012c-.12 0-.194-.007-.27-.03-.09-.03-.15-.105-.15-.21 0-.09.03-.16.09-.204.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84 0 .9.78.855 1.41.87.104 0 .18.015.224.06.046.03.076.106.076.18 0 .07-.034.138-.09.18-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523 0-.24-.045-.39-.135-.526zM18.597 14.208v-.583h-2.235V16.458h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zM13.126 9.543l-.007.006c0-.314-.13-.5-.34-.624-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516-.09-.107-.202-.19-.33-.237.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05.09.04.15.128.15.25s-.047.22-.134.266zM15.92 9.373h.632v-.6h-.644c-.464 0-.804.105-1.02.33-.286.3-.362.69-.362 1.11 0 .512.123.833.36 1.074.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134-.125-.15-.186-.36-.186-.662 0-.285.08-.51.194-.63.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93l.466-1.12zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202.015 2.202h.69v-2.81H6.118l-.807 1.904-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626h1.39zm-.688-1.705l.46 1.118-.003.002h-.915l.457-1.12zM11.856 13.62H9.714l-.85.923-.825-.922H5.346v2.82H8l.855-.932.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82-.764.824zm2.642.33l-1.03-1.147 1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344 0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507',
  discover:
    'M14.58 12a2.023 2.023 0 1 1-2.025-2.023h.002c1.118 0 2.023.906 2.023 2.023zm-5.2-2.001c-1.124 0-2.025.884-2.025 1.99 0 1.118.878 1.984 2.007 1.984.319 0 .593-.063.93-.221v-.873c-.296.297-.559.416-.895.416-.747 0-1.277-.542-1.277-1.312 0-.73.547-1.306 1.243-1.306.354 0 .622.126.93.428v-.873a1.898 1.898 0 0 0-.913-.233zm-3.352 1.545c-.445-.165-.576-.273-.576-.479 0-.239.233-.422.553-.422.222 0 .405.091.598.308l.388-.508a1.665 1.665 0 0 0-1.117-.422c-.673 0-1.186.467-1.186 1.089 0 .524.239.792.936 1.043.291.103.438.171.513.217a.456.456 0 0 1 .222.394c0 .308-.245.536-.576.536-.354 0-.639-.177-.809-.507l-.479.461c.342.502.752.724 1.317.724.771 0 1.311-.513 1.311-1.249-.002-.603-.252-.876-1.095-1.185zM24 10.3a.29.29 0 0 1-.288.291.29.29 0 0 1-.291-.291v-.003A.29.29 0 1 1 24 10.3zm-.059.001a.235.235 0 0 0-.231-.239.234.234 0 0 0-.232.239c0 .132.104.239.232.239a.235.235 0 0 0 .231-.239zM3.472 13.887h.742v-3.803h-.742v3.803zm12.702-1.248l-1.014-2.554h-.81l1.614 3.9h.399l1.643-3.9h-.804l-1.028 2.554zm2.166 1.248h2.104v-.644h-1.362v-1.027h1.312v-.644h-1.312v-.844h1.362v-.644H18.34v3.803zm5.409-3.557l.11.138h-.097l-.094-.13v.13h-.08v-.334h.107c.081 0 .126.036.126.103.001.046-.025.08-.072.093zm-.006-.092c0-.029-.021-.043-.06-.043h-.014v.087h.014c.039 0 .06-.014.06-.044zm-1.228 2.047l1.197 1.602H22.8l-1.027-1.528h-.097v1.528h-.741v-3.803h1.1c.855 0 1.346.411 1.346 1.123 0 .583-.308.965-.866 1.078zm.103-1.038c0-.37-.251-.563-.713-.563h-.228v1.152h.217c.473-.001.724-.207.724-.589zm-19.487.742a1.91 1.91 0 0 1-.69 1.46c-.365.303-.781.439-1.357.439H.001v-3.803H1.09c1.202 0 2.041.781 2.041 1.904zm-.764-.006c0-.364-.154-.718-.411-.947-.245-.222-.536-.308-1.015-.308H.742v2.515h.199c.479 0 .782-.092 1.015-.302.256-.228.411-.593.411-.958z',
}

// Tight viewBox per brand so the visible glyph fills its slot. The default
// simpleicons 24x24 canvas leaves a lot of empty space around wordmarks like
// Visa and Discover, which made them render visibly smaller than the
// Mastercard / Amex marks at the same nominal size.
const BRAND_VIEWBOX: Record<Exclude<CardBrand, 'unknown'>, string> = {
  visa: '0 7 24 10',
  mastercard: '0 4 24 16',
  amex: '0 0 24 24',
  discover: '0 8 24 8',
}

export interface PaymentCardProps {
  number?: string
  name?: string
  expiry?: string
  cvc?: string
  brand?: 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown' | 'auto'
  flipped?: boolean
  variant?: 'default' | 'compact'
  tilt?: boolean
  shimmer?: boolean
  flip?: boolean
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

function detectBrand(raw: string): CardBrand {
  const n = raw.replace(/\D/g, '')
  if (!n) return 'unknown'
  if (/^4/.test(n)) return 'visa'
  if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'
  if (/^3[47]/.test(n)) return 'amex'
  if (/^(6011|65|64[4-9])/.test(n)) return 'discover'
  return 'unknown'
}

function maskedNumber(raw: string, brand: CardBrand): string {
  const digits = raw.replace(/\D/g, '').slice(0, brand === 'amex' ? 15 : 16)
  const groups = brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]
  const total = groups.reduce((a, b) => a + b, 0)
  const padded = (digits + '•'.repeat(total)).slice(0, total)
  let i = 0
  return groups
    .map((g) => {
      const slice = padded.slice(i, i + g)
      i += g
      return slice
    })
    .join(' ')
}

const STYLE_ID = 'payment-card-styles'
const STYLE_CONTENT = `
@keyframes payment-card-shimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(150%); }
}
[data-slot='payment-card'] .payment-card-brand {
  transition: opacity 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-slot='payment-card'] [class*='transition-'] {
    transition-duration: 0ms !important;
  }
  [data-slot='payment-card'] [style*='payment-card-shimmer'] {
    animation: none !important;
  }
}
`

const PaymentCard = React.forwardRef<HTMLDivElement, PaymentCardProps>(
  (
    {
      number = '',
      name = '',
      expiry = '',
      cvc = '',
      brand = 'auto',
      flipped = false,
      variant = 'default',
      tilt = false,
      shimmer = false,
      flip = true,
      size = 'md',
      className,
    },
    ref,
  ) => {
    // Inject keyframes + reduced-motion rules once.
    React.useEffect(() => {
      if (typeof document === 'undefined') return
      if (document.getElementById(STYLE_ID)) return
      const el = document.createElement('style')
      el.id = STYLE_ID
      el.textContent = STYLE_CONTENT
      document.head.appendChild(el)
    }, [])

    const detectedBrand: CardBrand = brand === 'auto' ? detectBrand(number) : (brand as CardBrand)

    const displayNumber = maskedNumber(number, detectedBrand)
    const displayName = (name || (variant === 'compact' ? '' : 'CARDHOLDER NAME')).toUpperCase()
    const displayExpiry = expiry || 'MM/YY'
    const displayCvc = (() => {
      const want = detectedBrand === 'amex' ? 4 : 3
      const v = (cvc || '').replace(/\D/g, '').slice(0, want)
      return v.padEnd(want, '•')
    })()

    const brandGradient = (() => {
      switch (detectedBrand) {
        case 'visa':
          return 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900'
        case 'mastercard':
          return 'bg-gradient-to-br from-orange-500 via-red-500 to-red-700'
        case 'amex':
          return 'bg-gradient-to-br from-teal-500 via-teal-600 to-teal-800'
        case 'discover':
          return 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-700'
        default:
          return 'bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900'
      }
    })()

    const sizeClass =
      variant === 'compact' ? 'w-[120px]' : { sm: 'w-[280px]', md: 'w-[340px]', lg: 'w-[400px]' }[size]

    const fontClass = variant === 'compact' ? 'text-[7px]' : { sm: 'text-xs', md: 'text-sm', lg: 'text-base' }[size]

    const numberFontClass =
      variant === 'compact'
        ? 'text-[7px] tracking-tight'
        : { sm: 'text-base tracking-wider', md: 'text-lg tracking-wider', lg: 'text-xl tracking-widest' }[size]

    const brandHeightClass = variant === 'compact' ? 'h-2.5' : { sm: 'h-4', md: 'h-5', lg: 'h-6' }[size]

    // Tilt — mouse-parallax
    const cardRef = React.useRef<HTMLDivElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLDivElement | null) => {
        cardRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
      },
      [ref],
    )
    const [tiltX, setTiltX] = React.useState(0)
    const [tiltY, setTiltY] = React.useState(0)
    const rafId = React.useRef<number | null>(null)

    function onMove(e: React.MouseEvent) {
      if (!tilt || !cardRef.current) return
      if (rafId.current) cancelAnimationFrame(rafId.current)
      const clientX = e.clientX
      const clientY = e.clientY
      rafId.current = requestAnimationFrame(() => {
        if (!cardRef.current) return
        const rect = cardRef.current.getBoundingClientRect()
        const dx = (clientX - rect.left) / rect.width - 0.5
        const dy = (clientY - rect.top) / rect.height - 0.5
        setTiltY(dx * 16)
        setTiltX(-dy * 16)
      })
    }
    function onLeave() {
      setTiltX(0)
      setTiltY(0)
    }

    const flipDeg = flipped ? 180 : 0
    const innerTransform = `rotateX(${tiltX}deg) rotateY(${tiltY + flipDeg}deg)`

    return (
      <div
        ref={setRefs}
        data-uipkge=""
        data-slot="payment-card"
        className={cn('group relative inline-block select-none [perspective:1200px]', sizeClass, className)}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
      >
        <div
          className={cn(
            'relative aspect-[1.586/1] w-full transition-transform [transform-style:preserve-3d]',
            flip ? 'duration-[600ms] ease-[cubic-bezier(0.4,0,0.2,1)]' : 'duration-300',
          )}
          style={{ transform: innerTransform }}
        >
          {/* FRONT */}
          <div
            className={cn(
              'absolute inset-0 overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',
              'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',
              brandGradient,
            )}
          >
            {/* Lighting overlay: subtle radial highlight top-left */}
            <div
              className="pointer-events-none absolute inset-0"
              style={{ background: 'radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)' }}
            />
            {/* Subtle bottom-right darkening */}
            <div
              className="pointer-events-none absolute inset-0"
              style={{ background: 'radial-gradient(80% 60% at 100% 100%, rgba(0, 0, 0, 0.25) 0%, transparent 60%)' }}
            />
            {/* Shimmer sweep */}
            {shimmer && (
              <div
                className="pointer-events-none absolute -inset-x-full inset-y-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
                style={{ animation: 'payment-card-shimmer 2.5s linear infinite' }}
              />
            )}

            <div className={cn('absolute inset-0 flex flex-col', variant === 'compact' ? 'p-2' : 'p-4')}>
              {/* Brand top-right */}
              <div className="flex h-auto justify-end text-white">
                {detectedBrand !== 'unknown' ? (
                  <svg
                    key={detectedBrand}
                    viewBox={BRAND_VIEWBOX[detectedBrand]}
                    className={cn('payment-card-brand w-auto', brandHeightClass)}
                    fill="currentColor"
                    preserveAspectRatio="xMidYMid meet"
                    aria-hidden="true"
                  >
                    <path d={BRAND_PATHS[detectedBrand]} />
                  </svg>
                ) : (
                  <span
                    key="unknown"
                    className={cn(
                      'payment-card-brand font-semibold tracking-wider opacity-60',
                      variant === 'compact' ? 'text-[8px]' : 'text-xs',
                    )}
                  >
                    CARD
                  </span>
                )}
              </div>

              {/* Chip + contactless NFC, below brand on left */}
              <div className={cn('flex items-center gap-2', variant === 'compact' ? 'mt-1' : 'mt-3')}>
                {/* EMV chip with 8-contact layout */}
                <div
                  className={cn(
                    'relative rounded-[4px] bg-gradient-to-br from-amber-100 via-yellow-300 to-yellow-600 shadow-[inset_0_0_4px_rgba(0,0,0,0.25)]',
                    variant === 'compact' ? 'h-3 w-4' : 'h-7 w-10',
                  )}
                >
                  {/* Outer ring */}
                  <div className="absolute inset-[2px] rounded-[2px] border border-yellow-700/30" />
                  {/* Horizontal divider */}
                  <div className="absolute inset-x-[2px] top-1/2 h-px -translate-y-px bg-yellow-700/40" />
                  {/* Vertical dividers */}
                  <div className="absolute inset-y-[2px] left-1/3 w-px bg-yellow-700/40" />
                  <div className="absolute inset-y-[2px] left-2/3 w-px bg-yellow-700/40" />
                </div>

                {/* Contactless NFC waves */}
                {variant !== 'compact' && (
                  <svg
                    viewBox="0 0 24 24"
                    className="h-6 w-auto opacity-80"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    aria-hidden="true"
                  >
                    <path d="M7 8.5a6 6 0 0 1 0 7" />
                    <path d="M10 6a9.5 9.5 0 0 1 0 12" />
                    <path d="M13 4a13 13 0 0 1 0 16" />
                  </svg>
                )}
              </div>

              {/* spacer to push number+bottom down */}
              <div className="flex-1" />

              {/* Number — embossed look via subtle text shadow */}
              <div
                className={cn(
                  'overflow-hidden font-mono font-semibold whitespace-nowrap',
                  variant === 'compact' ? 'mb-1' : 'mb-3',
                  numberFontClass,
                )}
                style={{
                  textShadow: '0 1px 0 rgba(0, 0, 0, 0.18), 0 -1px 0 rgba(255, 255, 255, 0.08)',
                }}
              >
                {displayNumber}
              </div>

              {/* Bottom row: name + expiry */}
              <div className="flex items-end justify-between gap-2">
                <div className="min-w-0 flex-1">
                  {variant !== 'compact' && (
                    <div className="text-[9px] font-medium tracking-[0.18em] uppercase opacity-50">Cardholder</div>
                  )}
                  <div className={cn('truncate font-semibold tracking-wide whitespace-nowrap uppercase', fontClass)}>
                    {displayName}
                  </div>
                </div>
                <div className="shrink-0 text-right">
                  {variant !== 'compact' && (
                    <div className="text-[9px] font-medium tracking-[0.18em] uppercase opacity-50">Expires</div>
                  )}
                  <div className={cn('font-mono font-semibold tracking-wide whitespace-nowrap', fontClass)}>
                    {displayExpiry}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* BACK */}
          <div
            className={cn(
              'absolute inset-0 [transform:rotateY(180deg)] overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',
              'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',
              brandGradient,
            )}
          >
            {/* Lighting overlay */}
            <div
              className="pointer-events-none absolute inset-0"
              style={{ background: 'radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)' }}
            />
            {/* Magstripe */}
            <div
              className={cn(
                'w-full bg-gradient-to-b from-black via-neutral-900 to-black/90 shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.5)]',
                variant === 'compact' ? 'mt-3 h-5' : 'mt-6 h-10',
              )}
            />

            <div className={cn('relative', variant === 'compact' ? 'p-2' : 'p-4')}>
              {/* Signature strip + CVC */}
              <div className={cn('flex items-stretch gap-2', variant === 'compact' ? 'mt-1' : 'mt-2')}>
                {/* Signature strip with diagonal hatching */}
                <div
                  className={cn(
                    'relative flex-1 overflow-hidden rounded bg-white/95 px-2 py-1.5',
                    variant === 'compact' ? 'h-5' : 'h-9',
                  )}
                  style={{
                    backgroundImage:
                      'repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px)',
                    backgroundColor: 'rgba(248, 248, 248, 0.95)',
                  }}
                >
                  {variant !== 'compact' && (
                    <div className="absolute top-1 right-1.5 text-[7px] tracking-wider text-slate-500/80 uppercase">
                      Signature
                    </div>
                  )}
                </div>
                {/* CVC pill */}
                <div
                  className={cn(
                    'flex flex-col items-center justify-center rounded bg-white font-mono text-slate-900 shadow-sm',
                    variant === 'compact' ? 'px-1 text-[9px]' : 'px-2.5 text-sm',
                  )}
                >
                  {variant !== 'compact' && (
                    <span className="text-[7px] font-medium tracking-wider text-slate-500 uppercase">CVC</span>
                  )}
                  <span className="leading-none font-semibold">{displayCvc}</span>
                </div>
              </div>

              {variant !== 'compact' && (
                <div className="mt-3 text-[9px] tracking-wide opacity-50">
                  Authorized signature. Not valid unless signed. For customer service, see your card issuer.
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    )
  },
)
PaymentCard.displayName = 'PaymentCard'

export { PaymentCard }

components/ui/payment-card/index.ts 0.1 kB

export { PaymentCard, type PaymentCardProps } from './payment-card'

Raw manifest: https://react.uipkge.dev/r/react/payment-card.json