Kaarttransacties: De UI aanpassen

De Drop-In Controller biedt aanpassingsmogelijkheden, zodat u het uiterlijk van uw betaalpagina kunt afstemmen op de huisstijl van uw app. Er zijn opties waarmee u zowel het uiterlijk van het betaalformulier als dat van de overlay kunt wijzigen die door de Access Control Server (ACS) wordt weergegeven als onderdeel van het 3D Secure .

Standaardstijlbeheerders instellen

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)
)

Stijlmanagers met alle opties

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

Hieronder volgt een voorbeeld van de view controller componenten voor 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)

Hoe de zichtbaarheid van Drop-In View Controller-componenten configureren

DropInViewController heeft een eigenschap genaamd visibleFields: [DropInViewVisibleFields].

U kunt dit gebruiken om te bepalen welke invoervelden op het afrekenformulier zichtbaar zijn voor de klant (bijv. bij een betaling met een token, wilt u misschien alle velden behalve de veiligheidscode verbergen). Als u deze parameter verwijdert uit de init functie, dan zullen alle velden zichtbaar zijn. U kunt alle componenten in een array instellen die u wilt weergeven.

Hieronder volgen ondersteunde gevallen die kunnen worden opgenomen in visibleFields:

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

Aangepaste componenten opnemen in de Drop-In View Controller

Dit creëert een uitzicht dat voldoet aan de DropInViewProtocol als je het hele uitzicht wilt overschrijven.

Als u een aangepaste weergave wilt toevoegen, bijv. een wisselknop voor het opslaan van kaartgegevens, facturerings- en leveringsweergaven, dan moet u zich houden aan de DropInView en voeg het toe aan de stapelhiërarchie:

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

Foutmeldingen aanpassen

U kunt alternatieve bewoordingen opgeven voor foutmeldingen die aan de klant worden getoond in uw app, waarbij de standaard getoonde tekst wordt overschreven.

Voor een aangepaste formulering moet u het volgende opgeven LocalizableKeys in de SDK-initialisatie. Het volgende voorbeeld toont hoe aangepaste bewoordingen voor de invoerfouttoetsen kunnen worden voorzien, in de Engelse taal:

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"
    ]
  ]
)

Lijst van alle LocalizableKeys (inclusief standaardtekst)

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
  }
}

Waar nu?