Customization guide

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

Colors

We are providing a global color palette GiniColors.xcassets which you are free to override. The custom colors will be then applied on all screens. You can find the names of the colors in GiniColors.xcassets.

You can view our color palette here:

Typography

We provide a global typography based on text appearance styles from UIFont.TextStyle.

To override them in your application please use GiniConfiguration.updateFont(_ font: UIFont, for textStyle: UIFont.TextStyle). For example:


    // If you need to scale your font please use our method `scaledFont()`. Please, find the example below.
    let configuration = GiniBankConfiguration.shared
    let customFontToBeScaled = UIFont.scaledFont(UIFont(name: "Avenir", size: 20) ?? UIFont.systemFont(ofSize: 7, weight: .regular), textStyle: .caption1)
    configuration.updateFont(customFontToBeScaled, for: .caption1)

    // If you would like to pass us already scaled font.
    let customScaledFont = UIFontMetrics(forTextStyle: .caption2).scaledFont(for: UIFont.systemFont(ofSize: 28))
    configuration.updateFont(customScaledFont, for: .caption2)

Images

Images customization is done via overriding of GiniImages.xcassets resources.

Text

Text customization is done via overriding of string resources.

You can find all the string resources in Localizable.strings.

Generic components

1. Top Navigation bar

Colors, typography, texts can be customized as described above.

To inject your own navigation bar view you need to pass your navigation view controller to GiniConfiguration.shared.customNavigationController. The view from the custom navigation view controller will then be displayed on all screens as the top navigation bar.

2. Bottom Navigation bar

You can opt to show a bottom navigation bar. To enable it pass true to GiniConfiguration.shared.bottomNavigationBarEnabled.

Note: The top navigation bar will still be used, but its functionality will be limited to showing the screen’s title and an optional close button. Please inject a custom top navigation bar if your design requires it even if you have enabled the bottom navigation bar.

For each screen we provide a possibility to inject a custom bottom navigation bar. More details will be added below during the specific screen customization.

Onboarding screens

Camera screen

Single Page

By default, the Gini Capture SDK is configured to capture single page documents. No further configuration is required for this.

Multi-Page

The multi-page feature allows the SDK to capture documents with multiple pages.

To enable this feature simply pass true to GiniConfiguration.shared.multipageEnabled.

Camera

  • Enable the flash toggle button: To allow users toggle the camera flash pass true to GiniConfiguration.shared.flashToggleEnabled.

  • Turn off flash by default: Flash is on by default, and you can turn it off by passing false to GiniConfiguration.shared.flashOnByDefault.

Camera access

QR Code Scanning

When a supported QR code is detected with valid payment data, the QR Code will be processed automatically without any further user interaction. The QR Code scanning may be triggered directly without the need to analyze the document.

You can show a custom loading indicator with custom animation support. Your custom loading indicator should implement CustomLoadingIndicatorAdapter interface and be passed to GiniConfiguration.shared.customLoadingIndicator.

If the QR code does not have a supported payment format then a popup informs the user that a QR code was detected, but it cannot be used.

Please find more information in the QR Code scanning guide.

QR Code Only

During QR Code only mode the capture and import controls will be hidden from the camera screen.

For enabling QR code only mode the both flags GiniConfiguration.shared.qrCodeScanningEnabled and GiniConfiguration.shared.onlyQRCodeScanningEnabled should be true.

Document Import

This feature enables the Gini Capture SDK to import documents from the camera screen. When it’s enabled an additional button is shown next to the camera trigger. Using this button allows the user to pick either an image or a pdf from the device.

Please find more information in the Import PDFs and images guide.

Camera import error handling

Review screen

You can show a custom loading indicator with custom animation support on the process button. Your custom loading indicator should implement OnButtonLoadingIndicatorAdapter interface and be passed to GiniConfiguration.shared.onButtonLoadingIndicator.

The example implementation is available here.

Analysis screen

You can show a custom loading indicator with custom animation support. Your custom loading indicator should implement CustomLoadingIndicatorAdapter interface and be passed to GiniConfiguration.shared.customLoadingIndicator.

The example implementation is available here.

Help screens

You can show your own help screens in the Gini Capture SDK. You can pass the title and view controller for each screen to the GiniConfiguration.shared.customMenuItems using a list of HelpMenuItem structs:


        let customMenuItem = HelpMenuItem.custom("Custom menu item", CustomMenuItemViewController())

        configuration.customMenuItems = [customMenuItem]

The example implementation is available here.

You can also disable the supported formats help screen by passing false to GiniConfiguration.shared.shouldShowSupportedFormatsScreen.

No result screen

You can show your own UI for data input if an error occurred and the user clicks the “Enter manually” button on the error screen. For this you must to implement GiniCaptureResultsDelegate.giniCaptureDidEnterManually().

You can find more details here.

Error screen

You can find more details here.