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.defaultLight()
let payButtonStyleManager = PayButtonStyleManager.defaultLight()
let dropInViewStyleManager = DropInViewStyleManager(
  inputViewStyleManager: inputViewStyleManager,
  requestButtonStyleManager: payButtonStyleManager,
  backgroundColor: .white,
  spacingBetweenInputViews: 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: .medium,
  spinnerColor: .white,
  buttonContentHeightMargins: HeightMargins(top: 15, bottom: 15),
  borderWidth: 0,
  cornerRadius: 6
)

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

DropInViewStyleManager

	Parameter	Beschreibung
	backgroundColor	Die Hintergrundfarbe der Drop-In-Ansicht.
	inputViewStyleManager	Dient zur Gestaltung der Eingabeansichten.
	insets	Legt die Einsätze (Abstände) des Formulars relativ zur übergeordneten Ansicht fest.
	requestButtonStyleManager	Dient zur Gestaltung der Bezahlschaltfläche.
	spacingBetweenInputViews	Die Größe der Abstände zwischen allen Eingabefeldern des Formulars.

InputViewStyleManager

	Parameter	Beschreibung
	errorColor	Die Farbe des Validierungsfehlers.
	errorFont	Die Schriftart des Validierungsfehlers.
	errorSpacing	Der Abstand der Fehlerbeschriftung vom Textfeld.
	placeholderColor	Die Farbe des Platzhalters.
	placeholderFont	Die Schriftart des Platzhalters.
	textColor	Die Farbe des Textes.
	textFieldBackgroundColor	Die Hintergrundfarbe des Textfeldes.
	textFieldBorderColor	Die Farbe des Rahmens des Textfeldes.
	textFieldBorderWidth	Die Breite des Randes des Textfeldes.
	textFieldCornerRadius	Der Radius der Ecke des Textfeldes.
	textFieldHeightMargins	Der Rand des Textfeldes wird eingefügt. Dies ändert die Höhe des Textfeldes.
	textFieldImage	Das Bild wird links vom Textfeld angezeigt.
	textFieldImageColor	Die Farbe des Bildes des Textfeldes.
	textFont	Die Schriftart des Textes.
	titleColor	Die Farbe des Titels.
	titleFont	Die Schriftart des Titels.
	titleSpacing	Der Abstand der Titelbeschriftung vom Textfeld.

PayButtonStyleManager

	Parameter	Beschreibung
	borderColor	Die Farbe des Rahmens der Schaltfläche.
	borderWidth	Die Breite des Rahmens der Schaltfläche.
	buttonContentHeightMargins	Der Rand des Schaltflächeninhalts wird eingefügt. Dadurch wird die Höhe der Schaltfläche geändert.
	cornerRadius	Der Radius der Ecke der Schaltfläche.
	disabledBackgroundColor	Die Farbe der Schaltfläche, wenn sie deaktiviert ist.
	enabledBackgroundColor	Die Farbe der Schaltfläche, wenn sie aktiviert ist.
	spinnerColor	Die Farbe der Ladeschleuder.
	spinnerStyle	Der Stil der Ladespinne.
	titleColor	Die Farbe des Schaltflächentitels.
	titleFont	Die Schriftart des Schaltflächentitels.

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 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, textBoxStyleManager: textBoxStyleManager)

	Parameter	Beschreibung
	CardinalButtonStyleManager	Gestaltung der Schaltflächen auf dem vom ACS gehosteten Formular.
	CardinalCancelButtonStyleManager	Styling für die Schaltfläche "Abbrechen" auf dem vom ACS gehosteten Formular.
	CardinalLabelStyleManager	Gestaltung des Etiketts auf dem vom ACS gehosteten Formular.
	CardinalTextBoxStyleManager	Styling für das Textfeld auf dem vom ACS gehosteten Formular.
	CardinalToolbarStyleManager	Styling für die Symbolleiste auf dem vom ACS gehosteten Formular.

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 {
    case pan = 0
    case expiryDate
    case cvv3
    case cvv4

    public static var `default`: [DropInViewVisibleFields] {
        [
            .pan,
            .expiryDate,
            .cvv3
        ]
    }
}

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.CVVInputView.error.key: "Security Code error",
      LocalizableKeys.CVVInputView.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)

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

    // 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: CVVInputView
    public enum CVVInputView: LocalizableKey {
        case title
        case placeholder3
        case placeholder4
        case error
        case emptyError
    }

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

    // MARK: ExpiryDatePickerView
    public enum ExpiryDatePickerView: LocalizableKey {
        case month
        case year
    }

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

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

    // MARK: Challenge view
    public enum ChallengeView: LocalizableKey {
        case headerTitle
        case headerCancelTitle
    }
}

Wie geht es weiter?