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

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

	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, 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?