Console

Customise the iOS SDK

Customise the visual style of the iOS SDK to match the rest of your app.

Suggest Edits

When you configure the SDK, you can pass in an object that conforms to VisualSettingsProvider:

TrueLayer.Payments.manager.configure(
  environment: .sandbox,
	visualSettings: // Pass your object here
)

If you omit this parameter, the SDK defaults to the DefaultVisualSettings object.

Using VisualSettingsProvider

This protocol requires that you set the colors property:

  • colors: any ColorProvider

This defaults to UI.DefaultColors.

Using ColorProvider and Makeup

This protocol conforms to Makeup, which in turn conforms to BackgroundColor, ContentColor, and Accessory for granular customization.

Each property listed below has a default implementation, so you can customize specific aspects of the UI.

BackgroundColor

Property nameDescription
backgroundPrimaryThe primary colour of the background of the views.
backgroundSecondaryThe secondary colour of the background of the views.
backgroundActionPrimaryThe primary colour of an action item such as a button.

For example, Continue
backgroundCellThe background colour for the cells.

ContentColor

Property nameDescription
contentPrimaryThe colour of the primary content.

For example, any generic text around the SDK.
contentSecondaryThe colour of secondary content.

For example, things like explanation text.
contentPrimaryInvertedThe system colour for text on a dark background.
contentActionThe colour for text invoking an action.

For example, a link.
contentErrorThe colour of text displaying an error.

Accessory

Property nameDescription
separatorThe colour for thin borders or divider lines, which allows some underlying content to be visible.
uiElementBorderThe colour of the border of some content elements. This is mainly used inside the table view cells' images.

Example

This example customises certain aspects of the UI, while leaving the rest as default colours:

struct CustomVisualSettings: VisualSettingsProvider {
  struct Colors: ColorProvider {
    var backgroundPrimary: UIColor {
      UIColor(
        lightAppearance: .white,
        darkAppearance: UIColor(red: 28 / 255, green: 27 / 255, blue: 32 / 255, alpha: 1)
      )
    }

    var backgroundCell: UIColor {
      backgroundPrimary // Match the table cells to the `backgroundPrimary` color above.
    }

    var backgroundActionPrimary: UIColor {
      UIColor(red: 0, green: 223 / 255, blue: 200 / 255, alpha: 1)
    }

    var contentPrimary: UIColor {
      UIColor(
        lightAppearance: UIColor(red: 13 / 255, green: 10 / 255, blue: 63 / 255, alpha: 1), 
        darkAppearance: .white
        )
    }

    var contentAction: UIColor {
      UIColor(red: 90 / 255, green: 27 / 255, blue: 255 / 255, alpha: 1)
    }
  }

  // Implemented the required property for `VisualSettingsProvider`:
  var colors: ColorProvider = Colors()
}

📘

Visit our GitHub page to get the latest version of the TrueLayer iOS SDK.

Updated about 1 year ago