Card transactions: Customising the UI

The Drop-In Controller includes customisation options, allowing you to tailor the appearance of your checkout to better fit the branding of your app. There are options that allow you to change the appearance of both the payment form, and also that of the overlay shown by the Access Control Server (ACS) as part of the 3-D Secure process.

 

Setting default style managers

let inputViewStyleManager = InputViewStyleManager.default()
let payButtonStyleManager = PayButtonStyleManager.default()

let dropInViewStyleManager = DropInViewStyleManager(
inputViewStyleManager: inputViewStyleManager,
requestButtonStyleManager: payButtonStyleManager,
backgroundColor: .white,
spacingBeetwenInputViews: 25,
insets: UIEdgeInsets(top: 25, left: 35, bottom: -30, right: -35)
)

 

Style managers with all options

let inputViewStyleManager = InputViewStyleManager(
titleColor: UIColor.gray,
textFieldBorderColor: UIColor.black.withAlphaComponent(0.8),
textFieldBackgroundColor: .clear,
textColor: .black,
placeholderColor: UIColor.lightGray.withAlphaComponent(0.8),
errorColor: UIColor.red.withAlphaComponent(0.8),
textFieldImageColor: .black,
titleFont: UIFont.systemFont(ofSize: 16, weight: .regular),
textFont: UIFont.systemFont(ofSize: 16, weight: .regular),
placeholderFont: UIFont.systemFont(ofSize: 16, weight: .regular),
errorFont: UIFont.systemFont(ofSize: 12, weight: .regular),
textFieldImage: nil,
titleSpacing: 5,
errorSpacing: 3,
textFieldHeightMargins: HeightMargins(top: 10, bottom: 10),
textFieldBorderWidth: 1,
textFieldCornerRadius: 6
)

let payButtonStyleManager = PayButtonStyleManager(
titleColor: .white,
enabledBackgroundColor: .black,
disabledBackgroundColor: UIColor.lightGray.withAlphaComponent(0.6),
borderColor: .clear,
titleFont: UIFont.systemFont(ofSize: 16, weight: .medium),
spinnerStyle: .white,
spinnerColor: .white,
buttonContentHeightMargins: HeightMargins(top: 15, bottom: 15),
borderWidth: 0,
cornerRadius: 6
)

let dropInViewStyleManager = DropInViewStyleManager(
inputViewStyleManager: inputViewStyleManager,
requestButtonStyleManager: payButtonStyleManager,
backgroundColor: .white,
spacingBeetwenInputViews: 25,
insets: UIEdgeInsets(top: 25, left: 35, bottom: -30, right: -35)
)

 

DropInViewStyleManager

  Parameter Description
table-optional.png backgroundColor The background colour of the Drop-In View.
table-optional.png inputViewStyleManager Used to style the input views.
table-optional.png insets Defines the insets (spacing) of the form relative to the parental view.
table-optional.png requestButtonStyleManager Used to style the pay button.
table-optional.png spacingBetweenInputViews The size of the spaces between all input views fields of the form.

 

InputViewStyleManager

  Parameter Description
table-optional.png errorColor The colour of the validation error.
table-optional.png errorFont The font of the validation error.
table-optional.png errorSpacing The distance of the error label from the text field.
table-optional.png placeholderColor The colour of the placeholder.
table-optional.png placeholderFont The font of the placeholder.
table-optional.png textColor The colour of the text.
table-optional.png textFieldBackgroundColor The background colour of the text field.
table-optional.png textFieldBorderColor The border colour of the text field.
table-optional.png textFieldBorderWidth The width of the text field border.
table-optional.png textFieldCornerRadius The radius of the corner of the text field.
table-optional.png textFieldHeightMargins The text field edge insets. This changes the height of the text field.
table-optional.png textFieldImage Image displayed on left of text field.
table-optional.png textFieldImageColor The colour of the text field image.
table-optional.png textFont The font of the text.
table-optional.png titleColor The colour of the title.
table-optional.png titleFont The font of the title.
table-optional.png titleSpacing The distance of the title label from the text field.

 

PayButtonStyleManager

  Parameter Description
table-optional.png borderColor The colour of the button border.
table-optional.png borderWidth The width of the button border.
table-optional.png buttonContentHeightMargins The button content edge insets. This changes the height of the button.
table-optional.png cornerRadius The radius of the corner of the button.
table-optional.png disabledBackgroundColor The colour of the button when disabled.
table-optional.png enabledBackgroundColor The colour of the button when enabled.
table-optional.png spinnerColor The colour of the loading spinner.
table-optional.png spinnerStyle The style of the loading spinner.
table-optional.png titleColor The button title colour.
table-optional.png titleFont The button title font.

 

CardinalToolbarStyleManager

The following is an example of the view controller components for Cardinal Commerce (ACS):

let toolbarStyleManager = CardinalToolbarStyleManager(textColor: .black, textFont: nil, backgroundColor: .white, headerText: "Trust payment checkout", buttonText: nil)
let labelStyleManager = CardinalLabelStyleManager(textColor: .gray, textFont: nil, headingTextColor: .black, headingTextFont: nil)
let verifyButtonStyleManager = CardinalButtonStyleManager(textColor: .white, textFont: nil, backgroundColor: .black, cornerRadius: 6)
let continueButtonStyleManager = CardinalButtonStyleManager(textColor: .white, textFont: nil, backgroundColor: .black, cornerRadius: 6)
let resendButtonStyleManager = CardinalButtonStyleManager(textColor: .black, textFont: nil, backgroundColor: nil, cornerRadius: 0)
let cancelButtonStyleManager = CardinalCancelButtonStyleManager(textColor: .black, textFont: nil)
let textBoxStyleManager = CardinalTextBoxStyleManager(textColor: .black, textFont: nil, borderColor: .black, cornerRadius: 6, borderWidth: 1)

let cardinalStyleManager = CardinalStyleManager(toolbarStyleManager: toolbarStyleManager, labelStyleManager: labelStyleManager, verifyButtonStyleManager: verifyButtonStyleManager, continueButtonStyleManager: continueButtonStyleManager, resendButtonStyleManager: resendButtonStyleManager, cancelButtonStyleManager: cancelButtonStyleManager, textBoxStyleManager: textBoxStyleManager)
  Parameter Description
table-optional.png CardinalButtonStyleManager Styling for the buttons on the form hosted by the ACS.
table-optional.png CardinalCancelButtonStyleManager Styling for the cancel button on the form hosted by the ACS.
table-optional.png CardinalLabelStyleManager Styling for the label on the form hosted by the ACS.
table-optional.png CardinalTextBoxStyleManager Styling for the text box on the form hosted by the ACS.
table-optional.png CardinalToolbarStyleManager Styling for the toolbar on the form hosted by the ACS.

 

How to configure visibility of Drop-In View Controller components

DropInViewController has a property called visibleFields: [DropInViewVisibleFields].

You can use this to determine which input fields on the checkout form are visible to the customer (e.g. when performing a tokenised payment, you may wish to hide all but the security code fields). If you remove this parameter from the init function, then all fields will be visible. You can set all components in an array that you want to display.

The following are supported cases that can be included in visibleFields:

@objc public enum DropInViewVisibleFields: Int, CaseIterable {
case pan = 0
case expiryDate
case securityCode3
case securityCode4
}

 

Include custom components to the Drop-In View Controller

This creates a view that conforms to the DropInViewProtocol if you want override the whole view.

If you want to add any custom view e.g. toggle button used for saving card details, billing & delivery views, then conform to the DropInView and add it to the stack hierarchy:

public override func setupViewHierarchy() {
super.setupViewHierarchy()
stackView.insertArrangedSubview(saveCardOptionView, at: max(stackView.arrangedSubviews.count - 1, 0))
}

 

Customising error messages

You can specify alternative wording for error messages displayed to the customer in your app, overriding the default text displayed.

  Advantages

  • Provide alternative wording to the default phrases returned to better reflect your brand’s voice.
  • Provide additional info that may be specific to your business (e.g. including an order reference).

To specify custom wording, you will need to specify LocalizableKeys in the SDK initialisation. The following example shows how to provide custom wording for the input error keys, in the English language:

TrustPayments.instance.configure(
username: "username", gateway: .eu, environment: .staging, locale: Locale(identifier: "en_GB"), translationsForOverride: [
Locale(identifier: "en_GB"): [
LocalizableKeys.Errors.general.key: "Something went wrong",
LocalizableKeys.CardNumberInputView.error.key: "Invalid Pan",
LocalizableKeys.CardNumberInputView.emptyError.key: "Pan input empty",
LocalizableKeys.CvcInputView.error.key: "Security Code error",
LocalizableKeys.CvcInputView.emptyError.key: "Security Code empty",
LocalizableKeys.ExpiryDateInputView.error.key: "Expiration date error",
LocalizableKeys.ExpiryDateInputView.emptyError.key: "Expiration date empty"
]
]
)

 

List of all LocalizableKeys (including default text)

public enum LocalizableKeys {
// MARK: Pay Button
public enum PayButton: LocalizableKey {
case title
}

// MARK: DropIn View Controller
public enum DropInViewController: LocalizableKey {
case successfulPayment
}

// MARK: Errors
public enum Errors: LocalizableKey {
case general
}

// MARK: CardNumberInputView
public enum CardNumberInputView: LocalizableKey {
case title
case placeholder
case error
case emptyError
}

// MARK: CvcInputView
public enum CvcInputView: LocalizableKey {
case title
case placeholder3
case placeholder4
case placeholderPiba
case error
case emptyError
}

// MARK: ExpiryDateInputView
public enum ExpiryDateInputView: LocalizableKey {
case title
case placeholder
case error
case emptyError
}

// MARK: AddCardButton
public enum AddCardButton: LocalizableKey {
case title
}

// MARK: Alerts
public enum Alerts: LocalizableKey {
case processing
}
}

 

Where next?

  Testing

Once you have initialised the SDK in your app, you should now be able to process test transactions.

Click here to learn how.

  Performing additional requests

For more advanced configurations, additional requests can be referenced in the Drop-In View Controller to perform additional actions.

Click here to learn how.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request