Personnaliser les écrans de défi 3DS
Remarque : En tant que partenaire ISV/Paysafe, vous devrez effectuer toutes les étapes « marchand » ci-dessous au nom de l’entité juridique mère des marchands (PMLE) sous laquelle vos marchands exerceront leurs activités.
La SDK fournit des écrans par défaut pour le flux de défi 3DS. Vous pouvez personnaliser par programmation l’aspect et la convivialité de ces écrans en fonction de votre application.
Pour personnaliser les écrans 3DS par programmation, créez et utilisez l’objet UIConfiguration de la SDK Paysafe. Il vous donne la possibilité de modifier les éléments de l’interface utilisateur présentés dans les écrans du défi (barre d’outils, étiquettes de texte, boutons, etc.).
Vous pouvez fournir des polices, des couleurs au format hexadécimal, des angles et des largeurs de bordures, etc. en fonction de vos éléments. Tous les boutons peuvent avoir une configuration similaire, ou vous pouvez fournir une configuration différente pour chacun d’entre eux en fonction de leur utilisation.
Vous devez effectuer la conception tout en définissant merchantConfiguration.
// Voici comment initialiser l’objet uiConfiguration de PaysafeSDK
PaysafeSDK.uiConfiguration = [self getConfiguration];
- (PaysafeSDKUIConfiguration *)getConfiguration {
PaysafeSDKUIConfiguration *sdkUIConfiguration = [PaysafeSDKUIConfiguration new];
ToolbarConfiguration *toolBarConfiguration = [ToolbarConfiguration new];
toolBarConfiguration.headerText = @"Checkout";
toolBarConfiguration.buttonText = @"Cancel";
toolBarConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:18.0];
toolBarConfiguration.textColor = @"#ffffff";
toolBarConfiguration.backgroundColor = @"#080269";
sdkUIConfiguration.toolbarConfiguration = toolBarConfiguration;
LabelConfiguration *labelConfiguration = [LabelConfiguration new];
labelConfiguration.headingLabel.textFont = [UIFont fontWithName:@"Noteworthy" size:24.0];
labelConfiguration.headingLabel.textColor = @"#75a487";
labelConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:18.0];
labelConfiguration.textColor = @"#75a487";
sdkUIConfiguration.labelConfiguration = labelConfiguration;
TextBoxConfiguration *textBoxConfiguration = [TextBoxConfiguration new];
textBoxConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:12.0];
textBoxConfiguration.textColor = @"#a5d6a7";
textBoxConfiguration.borderColor = @"#a5d6a7";
textBoxConfiguration.borderWidth = 2.0;
textBoxConfiguration.cornerRadius = 8.0;
sdkUIConfiguration.textBoxConfiguration = textBoxConfiguration;
ButtonConfiguration *buttonConfiguration = [ButtonConfiguration new];
buttonConfiguration.textFont = [UIFont fontWithName:@"Noteworthy" size:16.0];
buttonConfiguration.textColor = @"222222";
buttonConfiguration.backgroundColor = @"#d7ffd9";
buttonConfiguration.cornerRadius = 4.0;
[sdkUIConfiguration setupAllButtonsWithConfiguration:buttonConfiguration];
return sdkUIConfiguration;
}
// Voici comment initialiser l’objet uiConfiguration de PaysafeSDK
PaysafeSDK.uiConfiguration = getUiConfiguration()
func getUiConfiguration() -> UIConfiguration {
let sdkUiConfiguration = UIConfiguration()
let toolBarConfiguration = ToolbarConfiguration()
toolBarConfiguration.headerText = "Checkout"
toolBarConfiguration.buttonText = "Cancel"
toolBarConfiguration.textFont = UIFont(name: "Noteworthy", size: 18.0)
toolBarConfiguration.textColor = "#ffffff"
toolBarConfiguration.backgroundColor = "#080269"
sdkUiConfiguration.toolbarConfiguration = toolBarConfiguration
let labelConfiguration = LabelConfiguration()
labelConfiguration.headingLabel?.textFont = UIFont(name: "Noteworthy", size: 24.0)
labelConfiguration.headingLabel?.textColor = "#75a487"
labelConfiguration.textFont = UIFont(name: "Noteworthy", size: 18.0)
labelConfiguration.textColor = "#75a487"
sdkUiConfiguration.labelConfiguration = labelConfiguration
let textBoxConfiguration = TextBoxConfiguration()
textBoxConfiguration.textFont = UIFont(name: "Noteworthy", size: 12.0)
textBoxConfiguration.textColor = "#a5d6a7"
textBoxConfiguration.borderColor = "#a5d6a7"
textBoxConfiguration.borderWidth = 2.0
textBoxConfiguration.cornerRadius = 8.0
sdkUiConfiguration.textBoxConfiguration = textBoxConfiguration
let buttonConfiguration = ButtonConfiguration()
buttonConfiguration.textFont = UIFont(name: "Noteworthy", size: 16.0)
buttonConfiguration.textColor = "222222"
buttonConfiguration.backgroundColor = "#d7ffd9"
buttonConfiguration.cornerRadius = 4.0
sdkUiConfiguration.setupAllButtons(withConfiguration: buttonConfiguration)
return sdkUiConfiguration
}
Il n’est pas obligatoire de personnaliser tous les éléments et attributs de l’interface utilisateur. Si vous ne configurez pas un élément ou certains de ses attributs, ils seront remplacés par des valeurs par défaut.
