> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paysight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling Guide

> Customize the Paysight Widget using theme.font and theme.css

<Info>
  Advanced/custom CSS targeting outside the documented classes is not supported. Use only the options and classes listed here for reliable results.
</Info>

Customize the widget with `theme.font` (Google Fonts) and `theme.css` overrides on supported `.ps-*` classes.

## Theme configuration

```javascript theme={null}
const config = {
  theme: {
    font: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
    css: {
      '.ps-submit': {
        backgroundColor: '#3b82f6',
        borderRadius: '6px',
      },
    },
  },
};
```

## Supported CSS classes

| Class                     | What it controls                |
| ------------------------- | ------------------------------- |
| `.ps-widget`              | Widget root container           |
| `.ps-container`           | Main widget container           |
| `.ps-field-block`         | Each form field wrapper         |
| `.ps-field-label`         | Field label text                |
| `.ps-field-input`         | Input fields                    |
| `.ps-field-select`        | Dropdown/select fields          |
| `.ps-submit`              | Submit (payment) button         |
| `.ps-submit-disabled`     | Disabled submit button          |
| `.ps-submit-success`      | Success state for submit button |
| `.ps-error`               | General error messages          |
| `.ps-field-error`         | Field-level error indicator     |
| `.ps-field-error-message` | Field-level error message text  |
| `.ps-divider`             | Divider lines between sections  |
| `.ps-divider-label`       | Divider label text              |

<Note>
  Only the classes above are guaranteed to be supported. Avoid targeting internal widget markup or using unsupported selectors.
</Note>

<Accordion title="Example: Customizing colors and fonts">
  ```javascript theme={null}
  const config = {
    theme: {
      font: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      css: {
        '.ps-widget': {
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
        },
        '.ps-field-label': {
          color: '#1e293b',
          fontWeight: 600,
        },
        '.ps-field-input': {
          border: '1px solid #e5e7eb',
          borderRadius: '6px',
          padding: '12px',
          fontSize: '16px',
        },
        '.ps-submit': {
          backgroundColor: '#3b82f6',
          color: '#fff',
          borderRadius: '6px',
          fontWeight: 600,
          fontSize: '16px',
          padding: '0 24px',
        },
        '.ps-submit:hover': {
          backgroundColor: '#2563eb',
        },
        '.ps-error, .ps-field-error-message': {
          color: '#ef4444',
          fontSize: '13px',
        },
      },
    },
  };
  ```
</Accordion>

## Best practices

* Use CSS variables for colors and spacing when overriding multiple elements.
* Keep overrides minimal for easier upgrades and troubleshooting.
* Test on both desktop and mobile viewports.

## Accessibility

* Maintain sufficient color contrast on `.ps-submit` and error states.
* Do not hide required field labels — customize color/size instead.

## Live demo

Try theme presets in the sandbox playground: [https://payment.paysight.io/demo?preset=theming](https://payment.paysight.io/demo?preset=theming)

## Related

<CardGroup cols={2}>
  <Card title="Configuration reference" icon="sliders" href="/widget-sdk/reference/configuration">
    `theme` field details
  </Card>

  <Card title="Theming live demo" icon="play" href="https://payment.paysight.io/demo?preset=theming">
    Interactive theme.css presets and button copy.
  </Card>

  <Card title="Custom styling example" icon="palette" href="/widget-sdk/examples/custom-styling">
    Full styling example
  </Card>
</CardGroup>