Customizing 3DS Challenge iOS Screens

The SDK provides default screens for the 3DS challenge flow. You can programmatically customize the look and feel of these screens as per your application.

To customize the 3DS screens programmatically, create and use Paysafe SDK UIConfiguration object. It gives you the possibility to modify the UI elements presented in the challenge screens (toolbar, text labels, buttons, etc.).

You can provide fonts, colors in hex format, cornerRadius and borderWidth, etc. depending on your elements. All buttons can have a similar configuration setup, or you can provide a different one for each of them according to their purpose.

You have to do the design while setting the merchantConfiguration.

// Here is how to initialise the PaysafeSDK uiConfiguration object
PaysafeSDK.uiConfiguration = [self getConfiguration];

- (PaysafeSDKUIConfiguration *)getConfiguration {
    PaysafeSDKUIConfiguration *sdkUIConfiguration = [PaysafeSDKUIConfiguration new];

    ToolbarConfiguration *toolBarConfiguration = [ToolbarConfiguration new];
    toolBarConfiguration.headerText = @"Checkout";
    toolBarConfiguration.buttonText = @"Cancel";
    toolBarConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:18.0];
    toolBarConfiguration.textColor = @"#ffffff";
    toolBarConfiguration.backgroundColor = @"#080269";
    sdkUIConfiguration.toolbarConfiguration = toolBarConfiguration;

    LabelConfiguration *labelConfiguration = [LabelConfiguration new];
    labelConfiguration.headingLabel.textFont = [UIFont fontWithName:@"Noteworthy" size:24.0];
    labelConfiguration.headingLabel.textColor = @"#75a487";
    labelConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:18.0];
    labelConfiguration.textColor = @"#75a487";
    sdkUIConfiguration.labelConfiguration = labelConfiguration;

    TextBoxConfiguration *textBoxConfiguration = [TextBoxConfiguration new];
    textBoxConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:12.0];
    textBoxConfiguration.textColor = @"#a5d6a7";
    textBoxConfiguration.borderColor = @"#a5d6a7";
    textBoxConfiguration.borderWidth = 2.0;
    textBoxConfiguration.cornerRadius = 8.0;
    sdkUIConfiguration.textBoxConfiguration = textBoxConfiguration;

    ButtonConfiguration *buttonConfiguration = [ButtonConfiguration new];
    buttonConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:16.0];
    buttonConfiguration.textColor = @"222222";
    buttonConfiguration.backgroundColor = @"#d7ffd9";
    buttonConfiguration.cornerRadius = 4.0;
    [sdkUIConfiguration setupAllButtonsWithConfiguration:buttonConfiguration];

    return sdkUIConfiguration;
}
// Here is how to initialise the PaysafeSDK uiConfiguration object
PaysafeSDK.uiConfiguration = getUiConfiguration()

func getUiConfiguration() -> UIConfiguration {
        let sdkUiConfiguration = UIConfiguration()

        let toolBarConfiguration = ToolbarConfiguration()
        toolBarConfiguration.headerText = "Checkout"
        toolBarConfiguration.buttonText = "Cancel"
        toolBarConfiguration.textFont = UIFont(name: "Noteworthy", size: 18.0)
        toolBarConfiguration.textColor = "#ffffff"
        toolBarConfiguration.backgroundColor = "#080269"
        sdkUiConfiguration.toolbarConfiguration = toolBarConfiguration

        let labelConfiguration = LabelConfiguration()
        labelConfiguration.headingLabel?.textFont = UIFont(name: "Noteworthy", size: 24.0)
        labelConfiguration.headingLabel?.textColor = "#75a487"
        labelConfiguration.textFont = UIFont(name: "Noteworthy", size: 18.0)
        labelConfiguration.textColor = "#75a487"
        sdkUiConfiguration.labelConfiguration = labelConfiguration

        let textBoxConfiguration = TextBoxConfiguration()
        textBoxConfiguration.textFont = UIFont(name: "Noteworthy", size: 12.0)
        textBoxConfiguration.textColor = "#a5d6a7"
        textBoxConfiguration.borderColor = "#a5d6a7"
        textBoxConfiguration.borderWidth = 2.0
        textBoxConfiguration.cornerRadius = 8.0
        sdkUiConfiguration.textBoxConfiguration = textBoxConfiguration

        let buttonConfiguration = ButtonConfiguration()
        buttonConfiguration.textFont = UIFont(name: "Noteworthy", size: 16.0)
        buttonConfiguration.textColor = "222222"
        buttonConfiguration.backgroundColor = "#d7ffd9"
        buttonConfiguration.cornerRadius = 4.0
        sdkUiConfiguration.setupAllButtons(withConfiguration: buttonConfiguration)

        return sdkUiConfiguration
}

It is not mandatory to customize all the UI elements and attributes. If you skip configuring an element or some of it's attributes, they would be replaced with default values.

Did you find this page useful?