Customization guide

The Gini Merchant SDK components can be customized either through the GiniMerchantConfiguration, the Localizable.string file or through the assets. Here you can find a complete guide with the reference to every customizable item.

Overview of the UI customization options

Colors

We provide a global color palette GiniColors.xcassets which you are free to override. For example, if you want to override Accent01 color you need to create an Accent01.colorset with your wished value in your main bundle. The custom colors are then applied to all screens.

Find the names of the color resources in the color palette (you can also view it in Figma here).

Images

Customizing of images is done via overriding of image sets. If you want to override specific SDK images:

  1. Create an asset catalog for images called GiniImages.xcassets in your app.
  2. Add your own images to GiniImages.xcassets using the image names from the SDK’s UI customization guide. It is important to name the images you wish to override exactly as shown in the UI customization guide, otherwise overriding won’t work.

Typography

We provide global typography based on text appearance styles from UIFont.TextStyle. Preview our typography and find the names of the style resources (you can also view it in Figma here).

In the example below you can see to override a font for .body1

let configuration = GiniMerchantConfiguration()

configuration.updateFont(UIFont(name: "Impact", size: 15)!, for: .body1)     
merchant.setConfiguration(configuration)

Text

Text customization is done via overriding of string resources. For example you would like to customize pay invoice button label in the Payment Component:

  1. Find a string key for a text that you would like to customize. For the Pay the invoice button label in the Payment Component we use gini.merchant.paymentcomponent.pay.invoice.label.

  2. If you use localizable strings: Add the string key with a desired value to Localizable.strings in your app.

If you use a string catalog: Add the string key with a desired value to Localizable.xcstrings in your app.

Supporting dark mode

We support dark mode in our SDK. If you decide to customize the color palette, please ensure that the text colors are also set in contrast to the background colors.

Payment Component

You can also view the UI customisation guide in Figma here.

For configuring the the payment component height use paymentComponentButtonsHeight configuration option:

let giniConfiguration = GiniMerchantConfiguration()
// Ensure the height of the payment component buttons meets the [iOS minimum standard](https://developer.apple.com/design/human-interface-guidelines/buttons).
// If the specified height is less than 44.0 points, it will be reset to 44.0 points.
config.paymentComponentButtonsHeight =  45.0
merchantSDK.setConfiguration(config)

Note: To copy text from Figma you need to have a Figma account. If you don’t have one, you can create one for free.

Bank Selection Bottom Sheet

You can also view the UI customisation guide in Figma here.

Note: To copy text from Figma you need to have a Figma account. If you don’t have one, you can create one for free.

Payment Feature Info Screen

You can also view the UI customisation guide in Figma here.

Note: To copy text from Figma you need to have a Figma account. If you don’t have one, you can create one for free.

Payment Review Bottom Sheet

You can also view the UI customisation guide in Figma here.

Note: To copy text from Figma you need to have a Figma account. If you don’t have one, you can create one for free.

Note:

  • PaymentReviewViewController Bottom Sheet contains the following configuration options:
  • showPaymentReviewScreen: If set to true, a Payment Review Bottom Sheet will be shown. Default value is true.

For disabling showPaymentReviewScreen:

let giniConfiguration = GiniMerchantConfiguration()
config.showPaymentReviewScreen =  false
merchantSDK.setConfiguration(config)