janice edited this page May 11, 2016 · 18 revisions

Out-of-the-box UI

The UI default colors can be easily themed to match the look and feel of your app.

default UI

Configuring the UI theme

The theme can be configured by changing the tintColor property, which is accessible from the session you created:

myJudoKitSession.theme.tintColor = [UIColor yellowColor];

Depending on the brightness of the selected theme color (used for cursor, field labels and ‘Pay’ buttons), the UI will generate and present a dark or light theme.

themed UI

Changing individual components

If you prefer to change individual components within the UI, such as the color of error text, have a look at the Theme reference for more flexibility.

individual UI

Configuring the security message

We have composed an optional security message (see example above) that gives extra security reassurance for your customers while they initiate a transaction within your app. To enable this security message, manipulate the given boolean in your session object:

myJudoKitSession.theme.showSecurityMessage = YES;

While integrating the SDK, you can also change the text to any preferred String:

myJudoKitSession.theme.securityMessageString = @"a new string to show in the space";

You can adjust the font size of the String:

myJudoKitSession.theme.securityMessageTextSize = 14.0f;

Configuring the navigation bar

In some cases, you might want to configure the navigation bar that is shown during the card entry process. We have made it possible to access the currently visible ViewController instance by accessing it through your judoKitSession object:

JudoPayViewController *currentlyActivePaymentViewController = myJudoKitSession.activeViewController;

Using this ViewController, you can access the navigation bar and insert your own logo:

currentlyActivePaymentViewController.navigationItem.titleView = [[UIImageView alloc] initWithImage[UIImage imageNamed:@"logo_icon"]];

Configuring the button

As with the navigation bar, through the currently visible ViewController instance, you can access the button via your judoKitSession objects view parameter:

JudoPayViewController *viewController = self.judoKitSession.activeViewController;

Using this JudoPayView, you can access the button and change the parameters:

[viewController.view.subviews enumerateObjectsUsingBlock:^(UIView * obj, NSUInteger idx, BOOL *stop) {
    if ([obj isKindOfClass:[UIButton class]]) {
        UIButton *payButton = (UIButton *)obj;
        payButton.titleLabel.font = [UIFont fontWithName:@"Helvetica" size:14.0f];
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.