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>
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields("cvv cardNumber expiryDate").on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
Exemple de Async Await
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
initializeJs();
async function initializeJs() {
try {
const hostedFieldInstance = await paysafe.fields.setup("my Base64 encoded single-use-token API key", options);
const paymentMethods = await hostedFieldInstance.show();
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields("cvv cardNumber expiryDate").on("Focus Blur", function (instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
} catch (error) {
console.log(error);
}
}
</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>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields.cvv.on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
Le reste de la fonction a la même syntaxe que la syntaxe standard; par exemple :
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields.cvv.on("Focus Blur", function(instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : initialcolor;
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
Async Await example
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
initializeJs();
async function initializeJs() {
try {
const hostedFieldInstance = await paysafe.fields.setup("my Base64 encoded single-use-token API key", options);
const paymentMethods = await hostedFieldInstance.show();
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.fields("cvv cardNumber expiryDate").on("Focus Blur", function (instance, event) {
this.style.borderColor = event.type === "Focus" ? "green" : 'red';
});
}
} catch (error) {
console.log(error);
}
}
</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. |
An example is shown below:
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
let hostedFieldInstance;
paysafe.fields.setup("my Base64 encoded single-use-token API key", options)
.then(instance => {
hostedFieldInstance = instance;
return hostedFieldInstance.show();
}).then(paymentMethods => {
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.on("Submit", function(instance, event) {
document.getElementById("pay-button").disabled = instance.areAllFieldsValid();
});
}
}).catch(error => {
console.log(error);
});
</script>
</body>
</html>
Async Await Example
<html>
...
<body>
<div id="cardNumber" paysafe="card-number"></div>
<div id="cvv" paysafe="cvv"></div>
<div id="expiryDate" paysafe="expiry-date"></div>
<script>
initializeJs();
async function initializeJs() {
try {
const hostedFieldInstance = await paysafe.fields.setup("my Base64 encoded single-use-token API key", options);
const paymentMethods = await hostedFieldInstance.show();
if (paymentMethods.card && !paymentMethods.card.error) {
hostedFieldInstance.on("Submit", function(instance, event) {
document.getElementById("pay-button").disabled = instance.areAllFieldsValid();
});
}
} catch (error) {
console.log(error);
}
}
</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é. |
| BadBin | La marque de la carte est activée pour la récupération des transactions et il y a un risque que la transaction soit refusée. |
| UnsupportedCardBrand | La marque de la carte n’est pas configurée pour le compte marchand. |
Callback
La fonction de rappel a la signature suivante :
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 :
|
| declineRate | true | number | Le risque de refus de la banque de cette marque particulière en pourcentage |
| salvageFlow | true | boolean | si le flux de récupération est supérieur au seuil configuré pour le marchand. |
| {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. | |
| 9102 | Une erreur s’est produite (9102); veuillez contacter notre service de soutien. | Échec de la requête de recherche du NIB. |