Cette documentation détaille toutes les variables de configuration disponibles pour personnaliser visuellement votre interface de paiement.

L'interface par défaut propose un thème clair en noir et blanc, mais vous pouvez la personnaliser entièrement selon l'identité visuelle de votre marque.


Conseils de Personnalisation

  1. Cohérence avec votre marque : Utilisez des couleurs qui correspondent à l'identité visuelle de votre site ou application.

  2. Contraste et accessibilité : Assurez-vous que le texte est bien lisible sur les fonds colorés. Un bon contraste améliore l'accessibilité pour tous les utilisateurs.

  3. Simplicité : Même si vous personnalisez l'interface, gardez-la simple et claire. L'objectif principal est de faciliter le processus de paiement.

  4. Test sur différents appareils : Vérifiez que votre personnalisation fonctionne bien sur différentes tailles d'écran et appareils.

  5. Identification minimale : Au minimum, configurez headerTitle ou headerImage pour que les utilisateurs reconnaissent votre marque pendant le processus de paiement.


Palette de Couleurs Principale


primaryColorColorCouleur principale pour les éléments interactifs comme les boutons d'action (défaut: Colors.arsenic)               
onPrimaryColorColorCouleur du texte et des icônes sur les éléments à couleur primaire (défaut: .white)
secondaryColorColorCouleur secondaire pour créer une hiérarchie visuelle (défaut: Colors.radicalRed)
onSecondaryColorColorCouleur du texte et des icônes sur les éléments à couleur secondaire (défaut: .white)
backgroundColorColorCouleur d'arrière-plan général de l'interface (défaut: Colors.cultured)
onBackgroundColorColorCouleur par défaut du texte sur l'arrière-plan principal (défaut: Colors.arsenic)
surfaceColorColorCouleur des surfaces élevées comme les cartes et panneaux (défaut: .white)
onSurfaceColorColorCouleur du texte et des éléments sur les surfaces (défaut: Colors.arsenic)
confirmationColorColorCouleur pour les actions positives et confirmations (défaut: Colors.malachite)
onConfirmationColorColorCouleur du texte sur les éléments de confirmation (défaut: Colors.arsenic)
errorColorColorCouleur pour signaler les erreurs et avertissements (défaut: Colors.alabamaCrimson)

Champs de Texte


textfieldLabelColorColorCouleur des étiquettes des champs de saisie ("Numéro de carte", "Date d'expiration")                          
textfieldTextColorColorCouleur du texte saisi par l'utilisateur dans les champs
textfieldBorderColorColorCouleur de la bordure des champs à l'état normal (non sélectionné)
textfieldBorderSelectedColorColorCouleur de la bordure des champs sélectionnés ou en focus
textfieldBackgroundColorColorCouleur d'arrière-plan des champs de saisie
textfieldAccessoryColorColorCouleur des éléments accessoires (icônes de carte, calendrier, etc.)

Dimensions et Formes


buttonRadiusCGFloatRayon de courbure des coins des boutons (défaut: 24)                                                            
cardRadiusCGFloatRayon de courbure des coins des cartes et panneaux (défaut: 16)
textfieldRadiusCGFloatRayon de courbure des coins des champs de saisie (défaut: 10)
textfieldStrokeCGFloatÉpaisseur de la bordure des champs à l'état normal (défaut: 1)
textfieldStrokeSelectedCGFloatÉpaisseur de la bordure des champs sélectionnés (défaut: 2)
paymentMethodShapePaymentMethodShapeForme des icônes de méthode de paiement (défaut: .round)

Entêtes


headerTitleStringTexte qui apparaît dans l'en-tête de l'interface de paiement (nom de l'entreprise, "Paiement sécurisé", etc.) 
headerImageImageLogo ou image affichée dans l'en-tête pour renforcer l'identité de marque
headerBackgroundColorColorCouleur d'arrière-plan de l'en-tête (défaut: Colors.cultured)
onHeaderBackgroundColorColorCouleur du texte et des icônes sur l'arrière-plan de l'en-tête (défaut: Colors.arsenic)


Ecran des moyens de paiement


Formulaire de paiement carte


Images de Résultat


successImageImage?Image affichée lors d'un paiement réussi (remplace la coche par défaut)                                                                                      
failureImageImage?Image affichée lors d'un échec de paiement (remplace la croix par défaut)