Options de configuration
En raison de restrictions de sécurité entre domaines, vous ne pouvez pas gérer directement les événements et le style des champs de saisie hébergés par Dalenys.
Cependant, Dalenys fournit des sélecteurs CSS et des événements / callbacks JS pour les gérer :
Sélecteurs et propriétés CSS disponibles
Étant donné que vous ne pouvez pas personnaliser directement le style iframe interne à partir de votre propre CSS, vous pouvez spécifier une propriété de style lors de l’initialisation des champs hébergés.
Les sélecteurs et propriétés css ci-dessous sont les seuls disponibles pour la personnalisation.
Sélecteurs
- input (le champ de saisie actuel)
- :empty
- :valid
- :invalid
- :focus
- :hover
- ::placeholder
Propriétés :
- color
- font-family
- font-size
- font-smooth
- font-style
- font-variant
- font-weight
- line-height
- letter-spacing
- text-decoration
- text-shadow
- text-transform
- background-color
fields: {
'card': {
id: 'card-container'
style: {
':invalid': {
"color": "red"
}
}
}, Classes de conteneurs
En fonction des événements survenant dans les champs de saisie de la carte bancaire, certaines classes spécifiques seront envoyées dans vos conteneurs, en direct. Ces classes peuvent être exploitées dans votre CSS :
- hosted-fields-valid-state
- hosted-fields-invalid-state
- hosted-fields-empty-state
- hosted-fields-disabled-state
- hosted-fields-focus-state
Callbacks et événements
Callbacks disponibles
Vous pouvez personnaliser certains rappels pour recevoir des événements se produisant sur les entrées de champs hébergés.
- onInput
- onBlur
- onFocus
fields: {
'card': {
id: 'card-container',
onInput: function (event) {
alert(event['cardType']);
},
onInput: function (event) {
if (event.type == 'invalid') {
alert(event['message']);
}
}
},
Événements déclenchés
Chaque callback recevra un événement en tant que paramètre. La structure de ces événements peut différer selon le type d’événement :
- invalid
- valid
- empty
- focus
- blur
- input
- disabled : le champ cryptogramme est désactivé dans le cas où le numéro de carte entré correspond à une carte sans cryptogramme (par exemple pour les cartes Maestro et Bancontact).
- enabled : le champ cryptogramme est activé en cas d’utilisation d’une carte avec cryptogramme
Types d’événements
Un événement peut contenir différentes propriétés (selon son type) :
- type : le type d’événement (voir la liste précédente)
- element : l’entrée concernée
- valueLength : le nombre de caractères tapés
- execCode : le code d’erreur (uniquement en cas d’événement non valide)
- message : le message d’erreur (uniquement en cas d’événement invalide)
- type de carte : le type de carte (uniquement en cas d’événement de flou ou de ralentissement)
- inconnu
- visa
- MasterCard
- american_express
- maestro
- bancontact
Sélection de la langue
La clé de configuration des paramètres régionaux peut avoir l’une des valeurs suivantes :
- fr - français
- en - anglais
- de - allemand
- es - espagnol
- it - italien
- nl - néerlandais
- zh - chinois
- ru - russe
- pt - portugais
- cs - tchèque