# Styling

> 🧪 **Beta.** Hosted Payment Fields is in Beta and available on request.


Only whitelisted properties are forwarded to the field iframes. Pass them as `styles` to `mountFields`.

```typescript
const fields = cashier.mountFields({
  sessionId,
  fields: {
    cardholder: { containerId: "om-cardholder" },
    cardNumber: { containerId: "om-card-number" },
    expiry:     { containerId: "om-expiry" },
    cvv:        { containerId: "om-cvv" },
  },
  styles: {
    base: {
      color: "#1a1a2e",
      fontFamily: "-apple-system, system-ui, sans-serif",
      fontSize: "16px",
      "::placeholder": { color: "#98a2b3" },
    },
    invalid: { color: "#d92d20" },
    placeholder: {
      cardNumber: "1234 5678 9012 3456",
      expiry: "MM/YY",
      cvv: "CVC",
      cardholder: "Name on card",
    },
  },
});
```

## Whitelist

- **`styles.base`** — `color`, `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`, `textAlign`, and `::placeholder: { color }`.
- **`styles.invalid.color`** — the text color for an invalid field.
- **`styles.placeholder`** — per-field placeholder text, keyed by field name (`cardNumber`, `expiry`, `cvv`, `cardholder`).


Any property not on this whitelist is ignored. Style the container elements themselves (borders, padding, background) with your own CSS — the whitelist governs only the text inside the iframes.

## Build it →

- [`mountFields` reference](/hosted-payment-fields/mount-fields) · [Events](/hosted-payment-fields/events)