UI Theme Customization

The eCOM SDK supports comprehensive customization of its Mobile (iOS/Android) and Web UI components, enabling you to align the checkout experience with your brand identity.

🚧

Android Customization

Android currently has limited UI customization options. Please contact a Nayax Integration Engineer for assistance.

iOS Customization

The iOS SDK allows you to customize the appearance of the payment components using style configuration objects that you pass during initialization.

You customize the UI by modifying nested properties within a dedicated Style object (e.g., DropInComponent.Style or FormComponentStyle). These objects expose granular control over colors, typography, and layout for various UI elements.

To change section headers to red and the primary button background to black with white text:

var style = DropInComponent.Style()
// Customize text colors
style.listComponent.sectionHeader.title.color = .red 
style.formComponent.textField.title.color = .red 
// Customize button appearance
style.formComponent.mainButtonItem.button.backgroundColor = .black
style.formComponent.mainButtonItem.button.title.color = .white

let configuration = DropInComponent.Configuration(style: style)
// Initialize component with custom configuration
let component = DropInComponent(paymentMethods: paymentMethods, context: context, configuration: configuration)

Web Customization

For web integrations, the SDK's styling is primarily driven by CSS Custom Properties (CSS Variables), enabling easy, global theme overrides without modifying the core library code.

The library defines hundreds of CSS variables prefixed with --adyen-sdk-` that control the colors, spacing, typography, and borders of all Drop-in and Component elements. To apply your custom theme, you override these variables in your own CSS file.

1. Create a CSS file (e.g., override.css) and define your preferred values for the relevant --adyen-sdk- variables, typically at the :root level for global application.
   CSS

   :root {
       /* Changes the background color for selected payment method item */
       --adyen-sdk-color-background-secondary: #f7f7f8; 
       /* Changes the primary button background color */
       --adyen-sdk-color-background-always-dark: #333333; 
   }

2. Ensure your custom CSS file is imported after the SDK's main stylesheet.
   JavaScript

   import { AdyenCheckout } from '@adyen/adyen-web';
   import '@adyen/adyen-web/styles/adyen.css'; // Original SDK Styles
   import './override.css'; // Your Custom Overrides (must be imported last)

The following table lists a selection of commonly modified variables. You can override virtually any visual aspect using this method.

For elements inside iframes (such as Card Number, CVC, and Expiry Date fields for security compliance), specific styling guidelines must be followed. Consult the Styling Secured Fields guide for details.