Customise the iOS SDK
Customise the visual style of the iOS SDK to match the rest of your app.
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
VisualSettingsProvider
This protocol requires that you set the colors
property:
colors: any ColorProvider
This defaults to UI.DefaultColors
.
Using ColorProvider
and Makeup
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
BackgroundColor
Property name | Description |
---|---|
backgroundPrimary | The primary colour of the background of the views. |
backgroundSecondary | The secondary colour of the background of the views. |
backgroundActionPrimary | The primary colour of an action item such as a button. For example, Continue |
backgroundCell | The background colour for the cells. |
ContentColor
ContentColor
Property name | Description |
---|---|
contentPrimary | The colour of the primary content. For example, any generic text around the SDK . |
contentSecondary | The colour of secondary content. For example, things like explanation text. |
contentPrimaryInverted | The system colour for text on a dark background. |
contentAction | The colour for text invoking an action. For example, a link. |
contentError | The colour of text displaying an error. |
Accessory
Accessory
Property name | Description |
---|---|
separator | The colour for thin borders or divider lines, which allows some underlying content to be visible. |
uiElementBorder | The 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 5 months ago