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ètre | Requis | Type | Description |
---|---|---|---|
events | true | string | Un nom d’événement ou une liste de noms d’événements séparés par des espaces auxquels s’applique l’écouteur :
Ce paramètre n’est pas sensible à la casse. |
fieldname | true | string | Le champ – ou les champs séparés par des espaces – produisant des événements auxquels s’abonner :
Ce paramètre est sensible à la casse. |
callback | true | function | La fonction de rappel invoquée lorsqu’un événement se produit. |
{return} | true | object | Le 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énement | Description |
---|---|
Focus | Un champ a été sélectionné et est prêt à recevoir des données. |
Blur | Un champ a été désélectionné. |
Valid | Un champ contient maintenant une valeur valide. |
Invalid | Un champ ne contient pas de valeur valide. |
FieldValueChange | Le client a modifié la valeur d’un champ. |
InvalidCharacter | Le 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ètre | Requis | Type | Description |
---|---|---|---|
events | true | string | 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 :
Ce paramètre est sensible à la casse. |
callback | true | function | La fonction de rappel invoquée lorsqu’un événement se produit. |
{return} | true | object | L’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énement | Description |
---|---|
CardBrandRecognition | La marque de la carte est reconnue à partir du numéro de carte saisi. |
Soumettre | Le client a appuyé sur « Entrée » alors que l’un des champs est focalisé. |
function callback(instance, event) {
...
}
La signature de la fonction contient les paramètres suivant :
Paramètre | Requis | Type | Description |
---|---|---|---|
instance | true | object | Instance Paysafe.js dans laquelle l’événement s’est produit. |
événement | true | object | Informations sur l’événement. |
événement | |||
type | true | string | Type/name de l’événement. |
target | true | object | L’élément du champ Paysafe.js qui a provoqué l’événement. |
data | true | object | Informations sur l’état du champ. |
target | |||
fieldName | true | string | Nom du champ de l’élément Paysafe.js. |
containerElement | true | HTMLElement | Conteneur HTML de l’iframe. |
data | |||
isEmpty | true | boolean | « true » si la valeur du champ est vide. |
cardBrand | true | string | Type de carte s’il est reconnu, ou non défini s’il ne l’est pas. Types de cartes pris en charge :
|
{return} | false | any | Aucun comportement spécifique n’est associé à la valeur de retour. |
{context} | true | HTMLElement | Le 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 |
---|---|---|---|
9005 | Une 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. |
9008 | Une 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. |
9009 | Une erreur s’est produite (9009); veuillez contacter notre service de soutien. | L’événement portant le nom ${eventName} n’est pas pris en charge. |