Customization guide

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

If you plan to use a custom name for localizable strings, you need to set it in GiniBankConfiguration.localizedStringsTableName.

Supporting dark mode

Some background and text colors use the GiniColor type with which you can set colors for dark and light modes. Please make sure to set contrasting images to the background colors in your .xcassets for the Gini Bank SDK images you override (e.g. onboardingPage1). The text colors should also be set in contrast to the background colors.

Generic components

1. Navigation bar

2. Notice

3. Tooltip

4. GVL font

Camera screen



1. Navigation bar
2. Camera preview
3. Camera buttons container
4. QR code popup



Review screen



1. Navigation bar
  • Title → ginicapture.navigationbar.review.title localized string
  • Back button
  • Next button
    • Image → navigationReviewContinue image asset
    • Title → ginicapture.navigationbar.review.continue localized string
2. Review top view
  • Title → ginicapture.review.top localized string
3. Review bottom view

Multipage Review screen



1. Navigation bar
  • Back button
  • Next button
    • Image → navigationReviewContinue image asset
    • Title → ginicapture.navigationbar.review.continue localized string
2. Main collection
3. Page item
4. Bottom container

Analysis screen



1. Navigation bar
2. PDF Information view
3. Loading view

Supported formats screen



1. Supported format cells

Open with tutorial screen



1. Header
  • Text → ginicapture.help.openWithTutorial.collectionHeader localized string
2. Open with steps
  • App name → GiniBankConfiguration.openWithAppNameForTexts
  • Step indicator color → GiniBankConfiguration.stepIndicatorColor
  • Step 1
    • Title → ginicapture.help.openWithTutorial.step1.title localized string
    • Subtitle → ginicapture.help.openWithTutorial.step1.subtitle localized string
    • Image → openWithTutorialStep1 (German) and openWithTutorialStep1_en (English) image assets
  • Step 2
    • Title → ginicapture.help.openWithTutorial.step2.title localized string
    • Subtitle → ginicapture.help.openWithTutorial.step2.subtitle localized string
    • Image → openWithTutorialStep2 (German) and openWithTutorialStep2_en (English) image assets
  • Step 3
    • Title → ginicapture.help.openWithTutorial.step3.title localized string
    • Subtitle → ginicapture.help.openWithTutorial.step3.subtitle localized string
    • Image → openWithTutorialStep3 (German) and openWithTutorialStep3_en (English) image assets

Capturing tips screen



1. Navigation bar
  • Title → ginicapture.noresults.title localized string
2. Header container
  • Text → ginicapture.noresults.warningHelpMenu localized string
3. Capturing tip images
  • Tip 1 image → captureSuggestion1 image asset
  • Tip 2 image → captureSuggestion2 image asset
  • Tip 3 image → captureSuggestion3 image asset
  • Tip 4 image → captureSuggestion4 image asset
  • Tip 5 image → captureSuggestion5 image asset
4. Go to camera button



1. Selected image

Onboarding screens



1. Background
2. Image
  • Page image → onboardingPage* image asset
3. Text
4. Page indicator
5. Current page indicator

Help screen



1. Navigation bar
2. Table View Cells
3. Background
4. Additional help menu items

No results screen



1. Warning container
2. Tips for photo collection
  • Header title → ginicapture.noresults.collection.header localized string

Overriding tips images below will lead to the changes on the Capturing tips screen.

  • Tip 1 image → captureSuggestion1 image asset
  • Tip 2 image → captureSuggestion2 image asset
  • Tip 3 image → captureSuggestion3 image asset
  • Tip 4 image → captureSuggestion4 image asset
  • Tip 5 image → captureSuggestion5 image asset
3. Back to camera button

Albums screen



1. Select more photos button

Return assistant

Onboarding screen



1. Background
2. Title
3. Illustration
  • Image → digital_invoice_onboarding_icon image asset
4. Message
5. “Done” button
6. “Don’t Show Again” button

Info screen



1. Title
  • Text → ginibank.digitalinvoice.info.text1 localized string
2. Illustration
  • Image → digital_invoice_onboarding_icon image asset
3. Message
  • Text → ginibank.digitalinvoice.info.text2 localized string
4. “Close” button
  • Text → ginibank.digitalinvoice.info.hidebutton localized string

Info box



1. Background
2. Title and message
3. Expand/collapse button
4. Illustration
  • Image → ra-warning-illustration image asset
5. Bottom message
6. “OK” button
7. “Skip” button

Digital invoice screen



1. Navigation bar
  • Title → ginibank.digitalinvoice.screentitle localized string
  • Help button image → infoIcon image asset
  • Back button title → ginibank.digitalinvoice.backbutton localized string
  • Back button image → arrowBack image asset
2. Background
3. Line item index
4. Line item edit button
5. Line item card
6. Additional costs
7. “Add article” button
8. Total price
10. “Pay” button
  • Title → ginibank.digitalinvoice.paybuttontitle localized string.
    Please include two decimal format arguments:
    1. Selected items count: %d
    2. Total count: %d
  • The “othercharges” title is used when items are not selected but there are other charges to pay → ginibank.digitalinvoice.paybuttontitle.othercharges localized string.
  • The “disabled” title is used when the pay button is disabled → ginibank.digitalinvoice.paybuttontitle.disabled localized string.
  • Accessibility label → ginibank.digitalinvoice.paybuttontitle.accessibilitylabel localized string.
    Please include two decimal format arguments:
    1. Selected items count: %d
    2. Total count: %d
  • Background color → GiniBankConfiguration.payButtonBackgroundColor
  • Title color → GiniBankConfiguration.payButtonTitleTextColor
  • Font → GiniBankConfiguration.payButtonTitleFont
11. “Skip” Button

Return reason action sheet



1. Title
  • Text → ginibank.digitalinvoice.deselectreasonactionsheet.message localized string
2. “Cancel” button
  • Text → ginibank.digitalinvoice.deselectreasonactionsheet.action.cancel localized string

Edit line item screen



1. Navigation bar
  • Save button title → ginibank.digitalinvoice.lineitem.savebutton localized string
2. Background
3. Checkmark
  • Color → GiniBankConfiguration.digitalInvoiceLineItemToggleSwitchTintColor
  • Label text → ginibank.digitalinvoice.lineitem.checkmark.label plural localized string.
    Please include a decimal format argument for the quantity integer (e.g. %d Artikel ausgewählt).
  • Accessibility label
    • Select → ginibank.digitalinvoice.checkmarkbutton.select.accessibilitylabel localized string
    • Deselect → ginibank.digitalinvoice.checkmarkbutton.deselect.accessibilitylabel localized string
4. 5. 6. Text fields: name, quantity, price
7. Total price, Vat title