{
  "name": "billing-payment-method-card-on-file",
  "kind": "block",
  "primary": "div",
  "page": "/apps/saas/app/billing/billing.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-col": ""
  },
  "html": "<div data-col>\n      <card-ui>\n        <header>\n          <span slot=\"icon\">\n            <avatar-ui icon=\"credit-card\"></avatar-ui>\n          </span>\n          <span slot=\"heading\">\n            <text-ui strong>Visa ending in 4242</text-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Update\" variant=\"outline\" size=\"sm\" onclick=\"document.getElementById('drawer-payment-method').open = true\"></button-ui>\n          </span>\n          <span slot=\"description\">\n            <text-ui color=\"subtle\" size=\"sm\">Expires 08/2028</text-ui>\n          </span>\n        </header>\n      </card-ui>\n      <field-ui label=\"Billing email\">\n        <input-ui value=\"billing@acme.com\" prefix=\"@\"></input-ui>\n      </field-ui>\n      <field-ui label=\"Tax ID (VAT / EIN)\">\n        <input-ui placeholder=\"Optional\"></input-ui>\n      </field-ui>\n    </div>",
  "source": "apps/saas/app/billing/billing.contents.html",
  "metadata": {
    "domain": "settings",
    "description": "Payment method on file — a card-ui showing the saved credit card (brand, last four, expiry) with an Update action, plus billing-email and tax-ID fields. For the payment section of a billing or account settings page.",
    "keywords": [
      "billing",
      "payment",
      "method",
      "credit",
      "card",
      "on-file",
      "visa",
      "last-four",
      "expiry",
      "update",
      "card-ui",
      "avatar",
      "billing-email",
      "tax-id",
      "vat",
      "ein",
      "recurring",
      "charges",
      "settings",
      "subscription"
    ]
  },
  "captured_at": "2026-06-10T13:16:11.236Z",
  "template": [
    {
      "id": "avatar",
      "component": "Avatar",
      "icon": "credit-card"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "avatar"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "Visa ending in 4242"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-3"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "size": "sm",
      "text": "Update",
      "variant": "outline"
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "button"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Expires 08/2028"
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "children": [
        "text-6"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2",
        "text-4",
        "text-5"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "prefix": "@",
      "value": "billing@acme.com"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Billing email",
      "children": [
        "input"
      ]
    },
    {
      "id": "input-2",
      "component": "Input",
      "placeholder": "Optional"
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Tax ID (VAT / EIN)",
      "children": [
        "input-2"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "data-col": "",
      "children": [
        "card",
        "field",
        "field-2"
      ]
    }
  ]
}