> For the complete documentation index, see [llms.txt](https://docs.payr.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payr.com/payment-interface/payr-sdk/customization.md).

# Customization

The SDK's `appearance` API allows you to match Payr's UI to your brand.

#### Basic Customization

```javascript
PAYR.init({
  apiBaseUrl: 'https://api.mypayr.co.uk',
  authToken: token,
  container: '#payr-payment-form',
  appearance: {
    primaryColor: '#1e3a5f',      // Your brand color
    borderRadius: '8px',           // Match your design system
    fontFamily: 'verdana_sans'     // Web-safe font
  }
});
```

#### Advanced Customization

```javascript
PAYR.init({
  apiBaseUrl: 'https://api.mypayr.co.uk',
  authToken: token,
  container: '#payr-payment-form',
  appearance: {
    borderRadius: '10px',
    primaryColor: '#5b4ddb',
    fontFamily: 'verdana_sans',
    text: {
      header: { 
        fontSize: '1.2rem', 
        fontWeight: '700' 
      },
      subtitle: { 
        fontSize: '12px', 
        fontWeight: '600' 
      },
      body: { 
        fontSize: '13px', 
        fontWeight: '500' 
      }
    }
  }
});
```

#### Available Font Families

Web-safe font stack IDs:

* `georgia_serif`
* `palatino_serif`
* `times_serif`
* `arial_sans`
* `arial_black_sans`
* `comic_sans_sans`
* `impact_sans`
* `lucida_sans_unicode`
* `lucida_sans_grande`
* `tahoma_sans`
* `trebuchet_sans` (default)
* `verdana_sans`