Styling Guide

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

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

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

Theme configuration

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

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

Example: Customizing colors and fonts

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',
      },
    },
  },
};

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

Related

Configuration reference

theme field details

Theming live demo

Interactive theme.css presets and button copy.

Custom styling example

Full styling example