> ## Documentation Index > Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt > Use this file to discover all available pages before exploring further. # Customization **Beta in Progress** – The beta version is under active development and coming soon to our platform. ## Visual Customization: Colors, Shapes, and Specific UI Components You can customize the Flutter Unified Checkout to support visual customization, allowing you to match the design of your app. You can modify colors, fonts, and more by using an instance of the `Appearance` class. ## Colors Customize the colors in the mobile Payment Element by modifying the color categories. Each color category determines the color of one or more components in the UI. For example, `primary` defines the color of the Pay button. | Color Category | Usage | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `primary` | Defines the color of the Pay button and selected items | | `background` | The color used for the background of your Payment page | | `componentBackground` | The color used for the background of inputs, tabs, and other components | | `componentBorder` | The color used for the external border of inputs, tabs, and other components in your PaymentSheet | | `componentDivider` | The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet | | `primaryText` | The color of the header text in your Payment page | | `secondaryText` | The color of the label text of input fields | | `componentText` | The color of the input text in your PaymentSheet components, such as the user's card number or zip code | | `placeholderText` | The color of the placeholder text of input fields | | `icon` | The color used for icons in your Payment Sheet, such as the close (x) button | | `error` | The color used to indicate errors or destructive actions in your Payment Sheet | To use custom colors for the SDK, you should create an instance of the `ColorsObject` class by passing the above attributes to its constructor. Next, create an instance of the `DynamicColors` class by invoking its constructor and passing the `ColorsObject` instance created earlier. Finally, create an instance of the `Appearance` class by passing the `DynamicColors` object. Consider the below code for your reference: ```dart theme={"system"} ColorsObject colorsObject = ColorsObject( primary: '#F8F8F2', background: '#00FF00', componentBackground: '#E6DB74', componentBorder: '#FD971F', componentDivider: '#FD971F', primaryText: '#F8F8F2', secondaryText: '#75715E', componentText: '#AE81FF', placeholderText: '#E69F66', icon: '#F92672', error: '#F92672' ); DynamicColors colors = DynamicColors(light: colorsObject); PrimaryButton primaryButton = PrimaryButton(colors: colors); Appearance appearance = Appearance( colors: colors, primaryButton: primaryButton, ); ``` ## Configuration and Appearance Create an instance of the `Configuration` class by invoking its constructor and passing the `Appearance` object created above. Then, create an instance of the `PaymentSheetParams` class by invoking its constructor and passing the `Configuration` object created earlier. Consider the below code for your reference: ```dart theme={"system"} Configuration configuration = Configuration( appearance: appearance, displaySavedPaymentMethods: true, displaySavedPaymentMethodsCheckbox: true, ); PaymentSheetParams params = PaymentSheetParams( publishableKey: "YOUR_PUBLISHABLE_KEY", clientSecret: clientSecret, configuration: configuration, ); ``` ### Configuration Options * Set `displaySavedPaymentMethods` to `false` to disable saved cards * Set `displaySavedPaymentMethodsCheckbox` to `false` to stop your users from saving their payment methods * Set `disableBranding` to `false` to disable Pesaswap branding * Set `primaryButtonLabel` to "Pay Button Text" to display custom text * Set `paymentSheetHeaderLabel` to "Heading Text" to display custom heading ## Custom Placeholders and Branding To set custom placeholder text for card number, expiry date, or CVV input fields, you may set the placeholder property for these as shown below: ```dart theme={"system"} configuration.placeholder.cardNumber = "YOUR_CUSTOM_CARD_NUMBER_PLACEHOLDER"; configuration.placeholder.expiryDate = "YOUR_CUSTOM_EXPIRY_DATE_PLACEHOLDER"; configuration.placeholder.cvv = "YOUR_CUSTOM_CVV_PLACEHOLDER"; ``` To disable Pesaswap branding in the SDK, you may set the `disableBranding` property to `true`: ```dart theme={"system"} configuration.disableBranding = true; ``` Finally, you can pass the `PaymentSheetParams` object to `initPaymentSheet` as shown in the previous section. ### Dark Mode Support To support dark mode, pass objects of the `ColorsObject` class for both light and dark colors to the constructor of the `DynamicColors` class like below: ```dart theme={"system"} ColorsObject lightColorsObject = ColorsObject( primary: '#F8F8F2', background: '#00FF00', componentBackground: '#E6DB74', componentBorder: '#FD971F', componentDivider: '#FD971F', primaryText: '#F8F8F2', secondaryText: '#75715E', componentText: '#AE81FF', placeholderText: '#E69F66', icon: '#F92672', error: '#F92672' ); ColorsObject darkColorsObject = ColorsObject( primary: '#00ff0099', background: '#ff0000', componentBackground: '#ff0080', componentBorder: '#62ff08', componentDivider: '#d6de00', primaryText: '#5181fc', secondaryText: '#ff7b00', componentText: '#00ffff', placeholderText: '#00ffff', icon: '#f0f0f0', error: '#0f0f0f', ); DynamicColors colors = DynamicColors( light: lightColorsObject, dark: darkColorsObject ); ``` ## Shadow You can customize the shadow used throughout the mobile Payment Element using an object of the built-in `Shadow` class. | Shadow Category | Usage | | --------------- | ---------------------------------------------------------------- | | `color` | Shadow color of components of the payment page | | `intensity` | Shadow intensity across input fields, tabs, and other components | ```dart theme={"system"} Shadow shadow = Shadow(color: 10.0, intensity: 10.0); ``` ## Shapes You can customize the border radius, border width, and shadow used throughout the mobile Payment Element using an object of the built-in `Shapes` class. | Shape Category | Usage | | -------------- | ---------------------------------------------------------------------------------------- | | `borderRadius` | Radius of the border of the input fields, tabs, and other components of the payment page | | `borderWidth` | Width of the border used across input fields, tabs, and other components | | `shadow` | Add shadow to components | ```dart theme={"system"} Shapes shapes = Shapes( borderRadius: 10.0, borderWidth: 10.0, shadow: shadow ); ``` Now you can test the payments on your app and go live! ## Languages The Pesaswap Flutter SDK supports localization in multiple languages. The default locale is English (en). To override, you can send the locale in the appearance object. You may refer to the below code for your reference: ```dart theme={"system"} Appearance appearance = Appearance( // ... other properties locale: 'LOCALE_CODE' ); ``` ### Supported Locales * Arabic (ar) * Bosnian (bs) * Catalan (ca) * Czech (cs) * Danish (da) * Dutch (nl) * Dutch (Belgium) (nl-BE) * English (en) * English (en-GB) * Estonian (et) * Finnish (fi) * French (fr) * French (Belgium) (fr-BE) * German (de) * Greek (el) * Hebrew (he) * Icelandic (is) * Italian (it) * Japanese (ja) * Lithuanian (lt) * Malay (ms) * Norwegian (nb) * Polish (pl) * Portuguese (pt) * Russian (ru) * Slovak (sk) * Spanish (es) * Swedish (sv) * Turkish (tr-CY) * Welsh (cy)