Advanced/custom CSS targeting outside the documented classes is not supported. Use only the options and classes listed here for reliable results.
Paysight Widget supports straightforward customization so you can match your checkout to your brand. This guide covers all currently supported styling options and best practices.

​
Theme Configuration

You can customize the widget’s appearance using the theme option in your widget config by:
  • Setting a Google Font.
  • Choosing a pre-defined theme (light or dark).
  • Overriding specific styles using supported CSS classes.
const config = {
  // ... other config options
  theme: {
    // Google Font link (optional)
    font: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
    
    // Custom CSS styles
    css: {
      // Your custom styles
    },
    
    // Pre-defined theme name (optional)
    themeName: 'light' // or 'dark'
  }
};

​
Supported CSS classes

ClassWhat it Controls
.ps-widgetWidget root container
.ps-containerMain widget container
.ps-field-blockEach form field’s 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 mentioned above are guaranteed to be supported. Avoid targeting internal widget markup or using unsupported selectors.

​
Pre-defined Themes

Paysight supports two built-in themes: 
    theme: {
    themeName: 'light' // default
  }
  // or
    theme: {
    themeName: 'dark'
  }
Switch between them by updating the themeName property.

​
Best Practices

  • Use CSS variables for colors and spacing if you want consistency across multiple elements.
  • Keep overrides minimal for easier upgrades and troubleshooting.
  • Always test your widget in both light and dark themes if you support both.

​
Accessibility

Ensure your color choices provide enough contrast for readability and accessibility. All focus states and error messages should remain clearly visible after customization.

​
Next Steps

Localization Guide

Implement multi-language support for global customers.

Event Handling Guide

Explore advanced features

Custom Styling Example

View styling examples