Skip to main content
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

ClassWhat it controls
.ps-widgetWidget root container
.ps-containerMain widget container
.ps-field-blockEach form field wrapper
.ps-field-labelField label text
.ps-field-inputInput fields
.ps-field-selectDropdown/select fields
.ps-submitSubmit (payment) button
.ps-submit-disabledDisabled submit button
.ps-submit-successSuccess state for submit button
.ps-errorGeneral error messages
.ps-field-errorField-level error indicator
.ps-field-error-messageField-level error message text
.ps-dividerDivider lines between sections
.ps-divider-labelDivider label text
Only the classes above are guaranteed to be supported. Avoid targeting internal widget markup or using unsupported selectors.
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

Configuration reference

theme field details

Theming live demo

Interactive theme.css presets and button copy.

Custom styling example

Full styling example