Dalenys Hosted Fields - Personnalisation des champs et évènements Javascript

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