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

 

InputViewStyleManager

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

 

PayButtonStyleManager

  Parameter Beschrijving
X3-EN.png borderColor De kleur van de rand van de knop.
X3-EN.png borderWidth De breedte van de rand van de knop.
X3-EN.png buttonContentHeightMargins De rand van de inhoud van de knop. Dit verandert de hoogte van de knop.
X3-EN.png cornerRadius De straal van de hoek van de knop.
X3-EN.png disabledBackgroundColor De kleur van de knop wanneer deze is uitgeschakeld.
X3-EN.png enabledBackgroundColor De kleur van de knop wanneer deze is ingeschakeld.
X3-EN.png spinnerColor De kleur van de laadspinner.
X3-EN.png spinnerStyle De stijl van de laadspinner.
X3-EN.png titleColor De kleur van de titel van de knop.
X3-EN.png 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
X3-EN.png CardinalButtonStyleManager Styling voor de knoppen op het door de ACS gehoste formulier.
X3-EN.png CardinalCancelButtonStyleManager Styling voor de annuleringsknop op het door de ACS gehoste formulier.
X3-EN.png CardinalLabelStyleManager Styling voor het label op het door de ACS gehoste formulier.
X3-EN.png CardinalTextBoxStyleManager Styling voor het tekstvak op het door de ACS gehoste formulier.
X3-EN.png 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.

  Voordelen

  • Zorg voor alternatieve bewoordingen voor de standaardzinnen die worden teruggestuurd om de stem van uw merk beter weer te geven.
  • Geef aanvullende informatie die specifiek is voor uw bedrijf (bijvoorbeeld een bestelreferentie).

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?

  Test

Zodra u de SDK in uw app hebt geïnitialiseerd, zou u nu testtransacties moeten kunnen verwerken.

Klik hier om te leren hoe.

  Aanvullende verzoeken uitvoeren

Voor meer geavanceerde configuraties kan in de Drop-In View Controller worden verwezen naar bijkomende verzoeken om bijkomende acties uit te voeren.

Klik hier om te leren hoe.

Was dit artikel nuttig?
0 van de 0 vonden dit nuttig
Hebt u meer vragen? Dien een verzoek in