Search Overlay

Gérer un événement

S’abonner à des événements de champ

Cette fonction est utilisée pour s’abonner aux événements émis par un ou plusieurs champs Paysafe.js.

La signature de la fonction est la suivante :

instance.fields(fieldname).on(events, function(instance, event) {
...
})

La signature de la fonction contient les paramètres suivant :

ParamètreRequisTypeDescription
eventstruestring

Un nom d’événement ou une liste de noms d’événements séparés par des espaces auxquels s’applique l’écouteur :

  • Focus
  • Blur
  • Valid
  • Invalid
  • FieldValueChange
  • InvalidCharacter

Ce paramètre n’est pas sensible à la casse.

fieldnametruestring

Le champ – ou les champs séparés par des espaces – produisant des événements auxquels s’abonner :

  • cardNumber
  • cvv
  • expiryDate
  • expiryMonth
  • expiryYear

Ce paramètre est sensible à la casse.

callbacktruefunctionLa fonction de rappel invoquée lorsqu’un événement se produit.
{return}trueobjectLe gestionnaire de champs à partir duquel la méthode a été invoquée.

Voici un exemple :

<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.fields("cvv cardNumber expiryDate").on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
});
</script>
</body>
</html>

Les événements pris en charge sont énumérés ci-dessous :

ÉvénementDescription
FocusUn champ a été sélectionné et est prêt à recevoir des données.
BlurUn champ a été désélectionné.
ValidUn champ contient maintenant une valeur valide.
InvalidUn champ ne contient pas de valeur valide.
FieldValueChangeLe client a modifié la valeur d’un champ.
InvalidCharacterLe client a tenté de saisir un caractère qui n’est pas accepté par ce champ (p. ex. un caractère alphabétique).

Autre méthode pour s’abonner aux événements

Vous pouvez également vous abonner à des événements en utilisant la syntaxe alternative présentée dans la signature de fonction ci-dessous :

instance.fields.<fieldname>.on(events, function(instance, event) {
...
})

Remplacez <fieldname> par une seule valeur de la liste ci-dessous :

  • cardNumber
  • cvv
  • expiryDate
  • expiryMonth
  • expiryYear

Les noms ci-dessus sont sensibles à la casse.

Le reste de la fonction a la même syntaxe que la syntaxe standard; par exemple :

<html>
...
<body>
...
<script>
paysafe.fields.setup("my Bas64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.fields.cvv.on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
});
</script>
</body>
</html>

S’abonner à des événements d’instance

Cette fonction est utilisée pour s’abonner aux événements émis par l’instance Paysafe.js. La signature est la suivante :

instance.on(events, function(instance, event) {
...
})

La signature de la fonction contient les paramètres suivant :

ParamètreRequisTypeDescription
eventstruestring

Un nom d’événement ou une liste de noms d’événements séparés par des espaces auxquels s’applique l’écouteur, soit :

  • Soumettre
  • CardBrandRecognition

Ce paramètre est sensible à la casse.

callbacktruefunctionLa fonction de rappel invoquée lorsqu’un événement se produit.
{return}trueobjectL’instance à partir de laquelle la méthode a été invoquée.

Voici un exemple :

<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", function(instance, error) {
if (error) {
console.log(error);
} else {
instance.on("Submit", function(instance, event) {
document.getElementById("pay-button").disabled = instance.areAllFieldsValid();
});
}
});
</script>
</body>
</html>

Les événements d’instance pris en charge sont énumérés ci-dessous :

ÉvénementDescription
CardBrandRecognitionLa marque de la carte est reconnue à partir du numéro de carte saisi.
SoumettreLe client a appuyé sur « Entrée » alors que l’un des champs est focalisé.

Callback

La fonction de rappel a la signature suivante :

function callback(instance, event) {
...
}

La signature de la fonction contient les paramètres suivant :

ParamètreRequisTypeDescription
instancetrueobjectInstance Paysafe.js dans laquelle l’événement s’est produit.
événementtrueobjectInformations sur l’événement.
événement
typetruestringType/name de l’événement.
targettrueobjectL’élément du champ Paysafe.js qui a provoqué l’événement.
datatrueobjectInformations sur l’état du champ.
target
fieldNametruestringNom du champ de l’élément Paysafe.js.
containerElementtrueHTMLElementConteneur HTML de l’iframe.
data
isEmptytrueboolean« true » si la valeur du champ est vide.
cardBrandtruestring

Type de carte s’il est reconnu, ou non défini s’il ne l’est pas.

Types de cartes pris en charge :

  • American Express
  • Mastercard
  • Visa
  • Diners Club
  • JCB
  • Maestro
{return}falseanyAucun comportement spécifique n’est associé à la valeur de retour.
{context}trueHTMLElementLe conteneur iframe du champ dans lequel l’événement s’est produit.

Liste des erreurs rencontrées lors de l’inscription à des événements :

Code

Message affiché

Message détaillé

Description

9005Une erreur s’est produite (9005); veuillez contacter notre service de soutien.Les événements doivent être des chaînes.Le paramètre « events » fourni n’est pas une chaîne.
9008Une erreur s’est produite (9008); veuillez contacter notre service de soutien.Configuration des événements manquants.Aucun événement n’est spécifié, ou les événements sont une chaîne vide ou ne contiennent que des espaces.
9009Une erreur s’est produite (9009); veuillez contacter notre service de soutien.L’événement portant le nom ${eventName} n’est pas pris en charge.