Kaarttransacties: De UI aanpassen

De Drop-In Controller bevat aanpassingsopties, zodat je het uiterlijk van je kassa beter kunt afstemmen op de branding van je app. Er zijn opties waarmee je het uiterlijk van zowel het betalingsformulier als dat van de overlay die door de Access Control Server (ACS) wordt getoond als onderdeel van het 3-D Secure proces, kunt wijzigen.

Standaardstijlbeheerders instellen

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

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: .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	Beschrijving
	backgroundColor	De achtergrondkleur van de Drop-In View.
	inputViewStyleManager	Wordt gebruikt om de invoerweergaven op te maken.
	insets	Bepaalt de inzet (afstand) van het formulier ten opzichte van het hoofdaanzicht.
	requestButtonStyleManager	Wordt gebruikt om de betaalknop op te maken.
	spacingBetweenInputViews	De grootte van de spaties tussen alle invoervelden van het formulier.

InputViewStyleManager

	Parameter	Beschrijving
	errorColor	De kleur van de validatiefout.
	errorFont	Het lettertype van de validatiefout.
	errorSpacing	De afstand van het foutlabel tot het tekstveld.
	placeholderColor	De kleur van de plaatshouder.
	placeholderFont	Het lettertype van de plaatshouder.
	textColor	De kleur van de tekst.
	textFieldBackgroundColor	De achtergrondkleur van het tekstveld.
	textFieldBorderColor	De randkleur van het tekstveld.
	textFieldBorderWidth	De breedte van de rand van het tekstveld.
	textFieldCornerRadius	De straal van de hoek van het tekstveld.
	textFieldHeightMargins	De rand van het tekstveld wordt ingevoegd. Dit verandert de hoogte van het tekstveld.
	textFieldImage	Afbeelding links van het tekstveld.
	textFieldImageColor	De kleur van de tekstveld afbeelding.
	textFont	Het lettertype van de tekst.
	titleColor	De kleur van de titel.
	titleFont	Het lettertype van de titel.
	titleSpacing	De afstand van het titellabel tot het tekstveld.

PayButtonStyleManager

	Parameter	Beschrijving
	borderColor	De kleur van de rand van de knop.
	borderWidth	De breedte van de rand van de knop.
	buttonContentHeightMargins	De rand van de inhoud van de knop. Dit verandert de hoogte van de knop.
	cornerRadius	De straal van de hoek van de knop.
	disabledBackgroundColor	De kleur van de knop wanneer deze is uitgeschakeld.
	enabledBackgroundColor	De kleur van de knop wanneer deze is ingeschakeld.
	spinnerColor	De kleur van de laadspinner.
	spinnerStyle	De stijl van de laadspinner.
	titleColor	De kleur van de titel van de knop.
	titleFont	Het lettertype van de knoptitel.

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 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	Beschrijving
	CardinalButtonStyleManager	Styling voor de knoppen op het door de ACS gehoste formulier.
	CardinalCancelButtonStyleManager	Styling voor de annuleringsknop op het door de ACS gehoste formulier.
	CardinalLabelStyleManager	Styling voor het label op het door de ACS gehoste formulier.
	CardinalTextBoxStyleManager	Styling voor het tekstvak op het door de ACS gehoste formulier.
	CardinalToolbarStyleManager	Styling voor de werkbalk op het door de ACS gehoste formulier.

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

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

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

Lijst van alle LocalizableKeys (inclusief standaardtekst)

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

Waar nu?