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

InputViewStyleManager

PayButtonStyleManager

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)

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.

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?