{
  "name": "PaymentMethodCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PaymentMethodCard.tsx",
  "chapterTag": "22 Billing",
  "chapter": "22-billing.html",
  "sectionId": "payment-method-card",
  "elName": "Two cards — Visa (primary) and Mastercard",
  "demoUrl": "https://brand.magicblocks.ai/components/22-billing#payment-method-card",
  "hasLiveDemo": false,
  "description": "A card-on-file display showing brand mark + last 4 digits + expiry +\ncardholder name + Edit / Remove action buttons. An optional \"Primary\"\npill marks the default card. Stateless and presentational — the\nconsumer wires the action handlers to whatever billing-provider SDK\n(Stripe, Adyen, etc.) they're using.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PaymentMethodCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PaymentMethodCardProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "PaymentMethodBrand",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { PaymentMethodCard } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "btn",
    "btn-danger-outline",
    "btn-ghost",
    "btn-sm",
    "payment-method-card",
    "payment-method-card-actions",
    "payment-method-card-brand",
    "payment-method-card-expiry",
    "payment-method-card-head",
    "payment-method-card-last4",
    "payment-method-card-meta",
    "payment-method-card-name",
    "payment-method-card-pill",
    "payment-method-grid"
  ],
  "examples": {
    "react": "<div className=\"payment-method-grid\">\n  <PaymentMethodCard\n    brand=\"visa\"\n    last4=\"4242\"\n    expiry=\"12/27\"\n    name=\"Jay Stockwell\"\n    isPrimary\n    onEdit={() => openCardEditor(\"pm_visa_4242\")}\n    onRemove={() => removeCard(\"pm_visa_4242\")}\n  />\n  <PaymentMethodCard\n    brand=\"mastercard\"\n    last4=\"8888\"\n    expiry=\"09/26\"\n    name=\"Jay Stockwell\"\n    onEdit={() => openCardEditor(\"pm_mc_8888\")}\n  />\n</div>",
    "html": "<div class=\"payment-method-grid\">\n  <div class=\"payment-method-card\">\n    <div class=\"payment-method-card-head\">\n      <span class=\"payment-method-card-brand\"><svg viewBox=\"0 0 48 32\" aria-hidden=\"true\"><rect x=\"0.75\" y=\"0.75\" width=\"46.5\" height=\"30.5\" rx=\"3.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.35\"/><path d=\"M11 11L15 21L19 11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M22 21L26 11\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/><path d=\"M29 21C32 21 35 19 35 16C35 13 30 13 30 11C30 9 33 9 36 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span>\n      <span class=\"payment-method-card-pill\">Primary</span>\n    </div>\n    <div class=\"payment-method-card-meta\">\n      <span class=\"payment-method-card-last4\">•••• 4242</span>\n      <span class=\"payment-method-card-expiry\">Expires 12/27</span>\n      <span class=\"payment-method-card-name\">Jay Stockwell</span>\n    </div>\n    <div class=\"payment-method-card-actions\">\n      <button type=\"button\" class=\"btn btn-ghost btn-sm\">Edit</button>\n      <button type=\"button\" class=\"btn btn-danger-outline btn-sm\">Remove</button>\n    </div>\n  </div>\n  <div class=\"payment-method-card\">\n    <div class=\"payment-method-card-head\">\n      <span class=\"payment-method-card-brand\"><svg viewBox=\"0 0 48 32\" aria-hidden=\"true\"><rect x=\"0.75\" y=\"0.75\" width=\"46.5\" height=\"30.5\" rx=\"3.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" opacity=\"0.35\"/><circle cx=\"20\" cy=\"16\" r=\"7\" fill=\"var(--error)\" opacity=\"0.9\"/><circle cx=\"28\" cy=\"16\" r=\"7\" fill=\"var(--warning)\" opacity=\"0.85\"/></svg></span>\n    </div>\n    <div class=\"payment-method-card-meta\">\n      <span class=\"payment-method-card-last4\">•••• 8888</span>\n      <span class=\"payment-method-card-expiry\">Expires 09/26</span>\n      <span class=\"payment-method-card-name\">Jay Stockwell</span>\n    </div>\n    <div class=\"payment-method-card-actions\">\n      <button type=\"button\" class=\"btn btn-ghost btn-sm\">Edit</button>\n    </div>\n  </div>\n</div>",
    "css": ".btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-danger-outline {\n  background: transparent; color: var(--error-text);\n  border-color: rgba(214, 69, 69, 0.3);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: var(--fg);\n  border-color: transparent;\n}\n\n.btn-sm { padding: 7px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }\n\n.payment-method-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n  padding: var(--s-4) var(--s-5);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n}\n\n.payment-method-card-actions {\n  display: flex;\n  flex-direction: row;\n  gap: var(--s-2);\n  justify-content: flex-end;\n  margin-top: auto;\n}\n\n.payment-method-card-brand {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 32px;\n  color: var(--fg);\n  flex: 0 0 auto;\n}\n\n.payment-method-card-expiry {\n  font: 400 13px/1.3 var(--f-mono);\n  color: var(--fg-dim);\n}\n\n.payment-method-card-head {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--s-3);\n}\n\n.payment-method-card-last4 {\n  font: 600 18px/1.3 var(--f-mono);\n  color: var(--fg);\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.05em;\n}\n\n.payment-method-card-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.payment-method-card-name {\n  font: 400 13px/1.3 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.payment-method-card-pill {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--r-pill);\n  background: var(--accent-soft);\n  color: var(--accent-text);\n  font: 600 11px/1.4 var(--f-mono);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.payment-method-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--s-4);\n}"
  }
}