​
Styling Guide

The 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.

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

​
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 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