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
- Cohérence avec votre marque : Utilisez des couleurs qui correspondent à l'identité visuelle de votre site ou application.
- 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.
- Simplicité : Même si vous personnalisez l'interface, gardez-la simple et claire. L'objectif principal est de faciliter le processus de paiement.
- Test sur différents appareils : Vérifiez que votre personnalisation fonctionne bien sur différentes tailles d'écran et appareils.
- Identification minimale : Au minimum, configurez headerTitle ou headerImage pour que les utilisateurs reconnaissent votre marque pendant le processus de paiement.
Palette de Couleurs Principale
primaryColor | Color | Couleur principale pour les éléments interactifs comme les boutons d'action (défaut: Colors.arsenic) |
onPrimaryColor | Color | Couleur du texte et des icônes sur les éléments à couleur primaire (défaut: .white) |
secondaryColor | Color | Couleur secondaire pour créer une hiérarchie visuelle (défaut: Colors.radicalRed) |
onSecondaryColor | Color | Couleur du texte et des icônes sur les éléments à couleur secondaire (défaut: .white) |
backgroundColor | Color | Couleur d'arrière-plan général de l'interface (défaut: Colors.cultured) |
onBackgroundColor | Color | Couleur par défaut du texte sur l'arrière-plan principal (défaut: Colors.arsenic) |
surfaceColor | Color | Couleur des surfaces élevées comme les cartes et panneaux (défaut: .white) |
onSurfaceColor | Color | Couleur du texte et des éléments sur les surfaces (défaut: Colors.arsenic) |
confirmationColor | Color | Couleur pour les actions positives et confirmations (défaut: Colors.malachite) |
onConfirmationColor | Color | Couleur du texte sur les éléments de confirmation (défaut: Colors.arsenic) |
errorColor | Color | Couleur pour signaler les erreurs et avertissements (défaut: Colors.alabamaCrimson) |
Champs de Texte
textfieldLabelColor | Color | Couleur des étiquettes des champs de saisie ("Numéro de carte", "Date d'expiration") |
textfieldTextColor | Color | Couleur du texte saisi par l'utilisateur dans les champs |
textfieldBorderColor | Color | Couleur de la bordure des champs à l'état normal (non sélectionné) |
textfieldBorderSelectedColor | Color | Couleur de la bordure des champs sélectionnés ou en focus |
textfieldBackgroundColor | Color | Couleur d'arrière-plan des champs de saisie |
textfieldAccessoryColor | Color | Couleur des éléments accessoires (icônes de carte, calendrier, etc.) |
Dimensions et Formes
buttonRadius | CGFloat | Rayon de courbure des coins des boutons (défaut: 24) |
cardRadius | CGFloat | Rayon de courbure des coins des cartes et panneaux (défaut: 16) |
textfieldRadius | CGFloat | Rayon de courbure des coins des champs de saisie (défaut: 10) |
textfieldStroke | CGFloat | Épaisseur de la bordure des champs à l'état normal (défaut: 1) |
textfieldStrokeSelected | CGFloat | Épaisseur de la bordure des champs sélectionnés (défaut: 2) |
paymentMethodShape | PaymentMethodShape | Forme des icônes de méthode de paiement (défaut: .round) |
Entêtes
headerTitle | String | Texte qui apparaît dans l'en-tête de l'interface de paiement (nom de l'entreprise, "Paiement sécurisé", etc.) |
headerImage | Image | Logo ou image affichée dans l'en-tête pour renforcer l'identité de marque |
headerBackgroundColor | Color | Couleur d'arrière-plan de l'en-tête (défaut: Colors.cultured) |
onHeaderBackgroundColor | Color | Couleur 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
successImage | Image? | Image affichée lors d'un paiement réussi (remplace la coche par défaut) |
failureImage | Image? | Image affichée lors d'un échec de paiement (remplace la croix par défaut) |