Skip to main content

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.

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 CategoryUsage
primaryDefines the color of the Pay button and selected items
backgroundThe color used for the background of your Payment page
componentBackgroundThe color used for the background of inputs, tabs, and other components
componentBorderThe color used for the external border of inputs, tabs, and other components in your PaymentSheet
componentDividerThe color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet
primaryTextThe color of the header text in your Payment page
secondaryTextThe color of the label text of input fields
componentTextThe color of the input text in your PaymentSheet components, such as the user’s card number or zip code
placeholderTextThe color of the placeholder text of input fields
iconThe color used for icons in your Payment Sheet, such as the close (x) button
errorThe 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: 
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: 
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: 
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: 
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:
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 CategoryUsage
colorShadow color of components of the payment page
intensityShadow intensity across input fields, tabs, and other components
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 CategoryUsage
borderRadiusRadius of the border of the input fields, tabs, and other components of the payment page
borderWidthWidth of the border used across input fields, tabs, and other components
shadowAdd shadow to components
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: 
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)