{
  "name": "reg-billing-card",
  "kind": "block",
  "primary": "section",
  "page": "/apps/user-flow/app/registration/billing/billing.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-reg-form": ""
  },
  "html": "<section data-reg-form>\n          <field-ui inline label=\"Card Number\">\n            <input-ui name=\"card\" autocomplete=\"cc-number\" placeholder=\"1234 5678 9012 3456\" required></input-ui>\n          </field-ui>\n          <field-ui inline label=\"Expiry · CVC\">\n            <row-ui gap=\"2\">\n              <input-ui name=\"expiry\" autocomplete=\"cc-exp\" placeholder=\"MM/YY\" grow required></input-ui>\n              <input-ui name=\"cvc\" autocomplete=\"cc-csc\" placeholder=\"CVC\" grow required></input-ui>\n            </row-ui>\n          </field-ui>\n          <field-ui inline label=\"Cardholder\">\n            <input-ui name=\"cardholder\" autocomplete=\"cc-name\" placeholder=\"Jane Doe\" required></input-ui>\n          </field-ui>\n\n          <divider-ui></divider-ui>\n\n          <field-ui inline label=\"Country\">\n            <select-ui name=\"country\" value=\"us\">\n              <option value=\"us\" selected>United States</option>\n              <option value=\"ca\">Canada</option>\n              <option value=\"gb\">United Kingdom</option>\n              <option value=\"de\">Germany</option>\n              <option value=\"fr\">France</option>\n              <option value=\"other\">Other…</option>\n            </select-ui>\n          </field-ui>\n          <field-ui inline label=\"Billing Address\">\n            <input-ui name=\"address\" autocomplete=\"street-address\" placeholder=\"123 Main St\" required></input-ui>\n          </field-ui>\n          <field-ui inline label=\"City · ZIP\">\n            <row-ui gap=\"2\">\n              <input-ui name=\"city\" autocomplete=\"address-level2\" placeholder=\"San Francisco\" grow required></input-ui>\n              <input-ui name=\"zip\" autocomplete=\"postal-code\" placeholder=\"ZIP\" grow required></input-ui>\n            </row-ui>\n          </field-ui>\n        </section>",
  "source": "apps/user-flow/app/registration/billing/billing.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Credit card payment form — card number, expiry, CVV, cardholder name + submit row.",
    "keywords": [
      "payment",
      "credit-card",
      "form",
      "checkout",
      "billing",
      "card",
      "cvv",
      "expiry",
      "stripe",
      "purchase"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "card",
      "component": "Input",
      "required": true,
      "autocomplete": "cc-number",
      "name": "card",
      "placeholder": "1234 5678 9012 3456"
    },
    {
      "id": "field",
      "component": "Field",
      "inline": true,
      "label": "Card Number",
      "children": [
        "card"
      ]
    },
    {
      "id": "expiry",
      "component": "Input",
      "required": true,
      "autocomplete": "cc-exp",
      "name": "expiry",
      "placeholder": "MM/YY"
    },
    {
      "id": "cvc",
      "component": "Input",
      "required": true,
      "autocomplete": "cc-csc",
      "name": "cvc",
      "placeholder": "CVC"
    },
    {
      "id": "row",
      "component": "Row",
      "gap": "2",
      "children": [
        "expiry",
        "cvc"
      ]
    },
    {
      "id": "field-2",
      "component": "Field",
      "inline": true,
      "label": "Expiry · CVC",
      "children": [
        "row"
      ]
    },
    {
      "id": "cardholder",
      "component": "Input",
      "required": true,
      "autocomplete": "cc-name",
      "name": "cardholder",
      "placeholder": "Jane Doe"
    },
    {
      "id": "field-3",
      "component": "Field",
      "inline": true,
      "label": "Cardholder",
      "children": [
        "cardholder"
      ]
    },
    {
      "id": "divider",
      "component": "Divider"
    },
    {
      "id": "country",
      "component": "ChoicePicker",
      "name": "country",
      "value": "us",
      "options": [
        {
          "value": "us",
          "label": "United States"
        },
        {
          "value": "ca",
          "label": "Canada"
        },
        {
          "value": "gb",
          "label": "United Kingdom"
        },
        {
          "value": "de",
          "label": "Germany"
        },
        {
          "value": "fr",
          "label": "France"
        },
        {
          "value": "other",
          "label": "Other…"
        }
      ]
    },
    {
      "id": "field-4",
      "component": "Field",
      "inline": true,
      "label": "Country",
      "children": [
        "country"
      ]
    },
    {
      "id": "address",
      "component": "Input",
      "required": true,
      "autocomplete": "street-address",
      "name": "address",
      "placeholder": "123 Main St"
    },
    {
      "id": "field-5",
      "component": "Field",
      "inline": true,
      "label": "Billing Address",
      "children": [
        "address"
      ]
    },
    {
      "id": "city",
      "component": "Input",
      "required": true,
      "autocomplete": "address-level2",
      "name": "city",
      "placeholder": "San Francisco"
    },
    {
      "id": "zip",
      "component": "Input",
      "required": true,
      "autocomplete": "postal-code",
      "name": "zip",
      "placeholder": "ZIP"
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "2",
      "children": [
        "city",
        "zip"
      ]
    },
    {
      "id": "field-6",
      "component": "Field",
      "inline": true,
      "label": "City · ZIP",
      "children": [
        "row-2"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "data-reg-form": "",
      "children": [
        "field",
        "field-2",
        "field-3",
        "divider",
        "field-4",
        "field-5",
        "field-6"
      ]
    }
  ]
}