Kartentransaktionen: Anpassung der Benutzeroberfläche

Der Drop-In-Controller enthält Anpassungsoptionen, die es Ihnen ermöglichen, das Erscheinungsbild Ihres Checkouts besser an das Branding Ihrer App anzupassen. Es gibt Optionen, mit denen Sie sowohl das Aussehen des Zahlungsformulars als auch das des Overlays, das vom Access Control Server (ACS) als Teil des 3-D Secure Prozesses angezeigt wird, ändern können.

Einstellung von Standard-Stilmanagern

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 Manager mit allen Optionen

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

Im Folgenden finden Sie ein Beispiel für die Komponenten des View Controllers für 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)

So konfigurieren Sie die Sichtbarkeit von Drop-In View Controller-Komponenten

DropInViewController hat eine Eigenschaft namens visibleFields: [DropInViewVisibleFields].

Damit können Sie festlegen, welche Eingabefelder im Kassenformular für den Kunden sichtbar sind (wenn Sie z. B. eine tokenisierte Zahlung durchführen, möchten Sie vielleicht alle Felder außer dem Sicherheitscode ausblenden). Wenn Sie diesen Parameter aus der Datei init Funktion sind alle Felder sichtbar. Sie können alle Komponenten in einem Array einstellen, die Sie anzeigen möchten.

Die folgenden Fälle werden unterstützt und können in folgende Dokumente aufgenommen werden visibleFields:

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

Benutzerdefinierte Komponenten in den Drop-In View Controller einbinden

Dadurch wird eine Ansicht erstellt, die mit der DropInViewProtocol wenn Sie die gesamte Ansicht außer Kraft setzen wollen.

Wenn Sie eine benutzerdefinierte Ansicht hinzufügen möchten, z. B. eine Umschalttaste zum Speichern von Kartendetails, Rechnungs- und Lieferansichten, dann entsprechen Sie der DropInView und fügen ihn der Stapelhierarchie hinzu:

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

Anpassen von Fehlermeldungen

Sie können für Fehlermeldungen, die dem Kunden in Ihrer Anwendung angezeigt werden, einen alternativen Wortlaut festlegen, der den standardmäßig angezeigten Text überschreibt.

Um einen individuellen Wortlaut festzulegen, müssen Sie Folgendes angeben LocalizableKeys in der SDK-Initialisierung. Das folgende Beispiel zeigt, wie man einen benutzerdefinierten Wortlaut für die Eingabefehlertasten in englischer Sprache angeben kann:

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

Liste aller LocalizableKeys (einschließlich Standardtext)

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

Wie geht es weiter?