Customization

You can customize the Flutter Unified Checkout to supports visual customization, which allows you to match the design of your app

You can modify colors, fonts, and more by using the instance of 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

For using custom colors for SDK, you should create an instance of ColorsObject class by passing the above attributes to its constructor. Now, you have to create an instance of DynamicColors class by invoking its constructor and passing the object of ColorsObject class created earlier. Finally, you have to create an instance of Appearance class by passing the object of DynamicColors class.

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

Now, create an instance of Configuration class by invoking its constructor and passing the object of Appearance class created above. Then, you have to create an instance of PaymentSheetParams class by invoking its constructor and passing the object of Configuration class created earlier.

Consider the below code for your reference.

  Configuration configuration= Configuration(appearance: appearance)
  configuration.displaySavedPaymentMethods: true,
  configuration.displaySavedPaymentMethodsCheckbox: true,

  PaymentSheetParams params = PaymentSheetParams(
      publishableKey: "YOUR_PUBLISHABLE_KEY",
      clientSecret: clientSecret,
      configuration: configuration,
    );

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 Hyperswitch 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 Hyperswitch branding in the SDK, you may set the disableBranding property to true

configuration.disableBranding = true

Finally, you can pass the object of PaymentSheetParams to initPaymentSheet as shown in the previous section.

Note To support dark mode, pass objects of ColorsObject class for both light and dark colors to constructor of 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 border radius, border width, and shadow used throughout the mobile Payment Element. Using an Object of inbuilt class Shapes.

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 inbuilt class Shapes.

Shapes shapes = Shapes(borderRadius:10.0, borderWidth: 10.0, shadow: shadow);

Now you can test the payments on your app and go-live!

Languages

Hyperswitch Flutter SDK supports localization in 6 languages. The default locale is English (en). To override, you can send locale in the appearance object. You may refer the below code for your reference.

Appearance appearance = Appearance(
     ...
      locale: 'LOCALE_CODE'
    );

We support the following locales -

• Arabic (ar)
• Hebrew (he)
• German (de)
• English (en)
• English (en-GB )
• Japanese (ja)
• French (fr)
• French (Belgium) (fr-BE)
• Spanish (es)
• Catalan (ca)
• Portuguese (pt)
• Italian (it)
• Polish (pl)
• German (de)
• Dutch (nl)
• Dutch (Belgium) (nl-BE)
• Swedish (sv)
• Russian (ru)
• Lithuanian (lt)
• Czech (cs)
• Slovak (sk)
• Icelandic (is)
• Welsh (cy)
• Greek (el)
• Estonian (et)
• Arabic (ar)
• Finnish (fi)
• Norwegian (nb)
• Bosnian (bs)
• Danish (da)
• Malay (ms)
• Turkish (tr-CY)

Next step:

payment-methods-setup