Search Overlay

Fonction de configuration

La fonction de configuration crée et initialise les modes de paiement Paysafe.js à l’intérieur des conteneurs d’éléments HTML sélectionnés (généralement des éléments div) sur votre page de paiement.

Cette fonction a les paramètres suivants :

Notez que cette clé ne peut être utilisée que pour générer des jetons à usage unique à utiliser avec l’API Paiements et qu’elle ne dispose d’aucun autre droit d’accès à l’API (par exemple pour encaisser des paiements). Par conséquent, cette clé peut être exposée publiquement dans le navigateur de l’utilisateur.

  1. La version encodée en Base64 de la clé API du jeton à usage unique est utilisée pour s’authentifier auprès de l’API REST de la plateforme de paiement. 
  2. Un objet optionscontenant l’environnement à utiliser (test ou production), les données des champs que vous souhaitez créer (y compris les sélecteurs CSS pour les éléments conteneurs de votre page de paiement), et le style pour les champs hébergés.

La signature de la fonction est la suivante :

paysafe.fields.setup(apikey,options)
.then((instance) => {/** Continue with instance.show() */})
.catch((error) => {/** Process any errors during the setup*/})

Vous pouvez également utiliser Aysnc-await :

async function setupPaysafeJS() {
TRYtry {
const instance = await paysafe.fields.setup(apikey,options)
/** Continue with instance.show() */
} catch(error) {
/** Process any errors during the setup*/
}

}

L’objet options contient quatre sections principales. currencyCode, environment, fields, et style, décrits ci-dessous.

Code de devise

La chaîne currencyCode est utilisée pour activer l’intégration de l’API Paiements et l’interface des promesses dans Paysafe JS.

Le paramètre currencyCode accepte les abréviations de 3 lettres de la norme ISO pour les devises.

Lorsqu’un currencyCode n’est pas fourni, l’intégration Paysafe JS ne créera pas de "payment handle", mais des jetons de paiement à usage unique, qui ne peuvent être traités que directement via l’API Paiements. Reportez-vous à la SDK Rappel Paysafe JS pour les directives d’intégration.

const instance = await paysafe.fields.setup(
"my Base64 encoded single-use-token API key",
{
"currencyCode": "USD"currencyCode: "USD",
fields: {...}
}

);
paysafe.fields.setup(
"my Base64 encoded single-use-token API key",
{
"currencyCode": "USD"currencyCode: "USD",
fields: {...}
}
).then(instance => {
/** Continue with instance.show() */
}).catch(error => {
/** Process any errors during the setup*/

});

Environnement

La chaîne environment est utilisée pour sélectionner l’environnement à utiliser pour la tokenisation. Les environnements acceptés sont LIVE (l’environnement de production Paysafe) et TEST (l’environnement de test marchand Paysafe ou le bac à sable).

N’utilisez pas de vrais numéros de cartes ou d’autres données d’instruments de paiement dans l’environnement de test marchand. Il n’est pas conforme aux normes de sécurité des données de l’industrie des cartes de paiement (PCI-DSS) et ne protège pas les informations relatives aux titulaires de cartes et aux bénéficiaires. Tout téléchargement de données réelles de titulaires de cartes est strictement interdit, comme décrit dans les conditions d’utilisation..

const instance = await paysafe.fields.setup(
"my Base64 encoded single-use-token API key",
{
environment: "TEST",
currencyCode: ...,
fields: {...}
}

);
paysafe.fields.setup(
"my Base64 encoded single-use-token API key",
{
environment: "TEST",
currencyCode: ...,
fields: {...}
}
).then(instance => {
/** Continue with instance.show() */
}).catch(error => {
/** Process any errors during the setup*/

});

Production

const instance = await paysafe.fields.setup(
"my Base64 encoded single-use-token API key",
{
environment: "LIVE",
currencyCode: ...,
fields: {...}
}

);
paysafe.fields.setup(
"my Base64 encoded single-use-token API key",
{
environment: "LIVE",
currencyCode: ...,
fields: {...}
}
).then(instance => {
/** Continue with instance.show() */
}).catch(error => {
/** Process any errors during the setup*/

});

Si vous omettez l’objet environment – en passant une valeur vide ou nulle pour ce paramètre – c’est l’environnement Live qui est utilisé.

Champs

L’objet fields indique les champs hébergés à créer. Les options suivantes sont disponibles pour chaque champ :

  • selector - le sélecteur CSS à utiliser pour localiser le conteneur de ce champ sur votre page de paiement.
  • placeholder – le texte de remplacement à insérer dans ce champ pour indiquer au client ce qu’il doit insérer.
  • le caractère de séparation utilisé entre les groupes de chiffres dans le champ du numéro de carte.
  • optional - indique si le champ est facultatif.
  • masked - indique si le champ CVV doit être masqué.
  • accessibilityLabel – indique un titre de champ qui sera lu par les lecteurs d’écran.
  • iframeTitle – indique un titre d’iframe qui sera lu par les lecteurs d’écran.
  • accessibilityErrorMessage – indique un message d’erreur qui sera lu par les lecteurs d’écran en cas d’erreur de validation.

Champs du bouton ApplePay

Ces options ne sont applicables que pour l’intégration avec Apple Pay.

  • label – indique l’étiquette qui sera affichée dans la fenêtre de paiement Apple Pay
  • type – indique le texte du bouton Apple Pay
  • color – indique la couleur du bouton Apple Pay

Vous pouvez inclure un ou deux champs de date et un bouton de paiement ApplePay :

OptionChamp

Données de la carte avec un seul champ de date

  • cardNumber
  • cvv
  • expiryDate

expiryDate utilise le format mm/aa

Données de la carte avec plusieurs champs de date
  • cardNumber
  • cvv
  • expiryYear
  • expiryMonth
Intégration ApplePay
  • applePay

Améliorer l’accessibilité grâce aux options

Les paramètres facultatifs accessibilityLabel, iframeTitle et accessibilityErrorMessage sont exposés afin d’accroître la flexibilité de l’accessibilité. Ces paramètres affectent la manière dont les outils de lecture d’écran présenteront les entrées.

<html>
...
<body><div id="cardNumber"></div><div id="cvv"></div><div id="expiryDate"></div><script>
paysafe.fields.setup("my API key", {
fields: {
cardNumber: {
selector: "#cardNumber",
accessibilityLabel: "Numéro de carte",
placeholder: "00000000000000",
iframeTitle: "Conteneur de données de carte de crédit",
accessibilityErrorMessage: "Numéro de carte non valide"
},
cvv: {
selector: "#cvv"
},
expiryDate: {
selector: "#expiryDate"
}
}
}).then(instance => {...});
</script></body></html>

Voir la matrice de décision pour la prise en charge par les lecteurs d’écran de accessibilityLabel et placeholder :

Propriété du champRésultat HTML
titleaccessibilityLabelPlaceholdervaleur du titre (cette valeur sera lue par le lecteur d’écran en mode présentation)valeur arie-labelledby (cette valeur sera lue par le lecteur d’écran)

Cadre de saisie du numéro de carte de crédit

Numéro de la carte***

Cadre de saisie du numéro de carte de crédit

Numéro de la carte
Cadre de saisie du numéro de carte de crédit<none>Saisir le numéro de la carteCadre de saisie du numéro de carte de créditSaisir le numéro de la carte
<none>Numéro de la carte<none>sécurisé (valeur par défaut)Numéro de la carte
<none><none><none>sécurisé (valeur par défaut)Numéro de carte (il s’agit d’une valeur par défaut si aucun espace réservé ni étiquette d’accessibilité n’est spécifié)

Voir la matrice de décision pour la prise en charge de accessibilityErrorMessage par les lecteurs d’écran :

accessibilityErrorMessageÉvénementvaleur aria-describedby (qui sera lue par le lecteur d’écran)attribut input aria-describedby (l’identifiant du message d’erreur)
Invalidon load<empty>null
Invalidon valid<empty>null
Invalidon invalid<empty> (à l’exception des événements non valides dépendant du champ actuel (CVV, mois d’expiration))aria-describedby
Invalidon focus (lorsque valide)<empty>null
Invalidon focus (lorsque non valide)Invalidaria-describedby
<none>on load<empty>null
<none>on valid<empty>null
<none>on invalid<empty>null
<none>on focus (lorsque non valide)<empty>null
<none>on focus (lorsque non valide)<empty>null

Styles

L’option style vous permet de préciser divers styles CSS pour vos champs en utilisant la syntaxe JavaScript. Par exemple :

<html>
...
<body>
...
<script>
paysafe.fields.setup("my Base64 encoded single-use-token API key", {
style: {
input: {
"font-family": "robotoregular,Helvetica,Arial,sans-serif",
"font-weight": "normal",
"font-size": "14px"
},
"#card-number.valid": {
"color": "green"
},
":focus": {
"color": "yellow"
}
}
}).then(instance => {...});
</script></body></html>

Des identifiants et des classes sont ajoutés aux champs de saisie, qui peuvent être utilisés comme sélecteurs CSS; vous pouvez également inclure des pseudo-sélecteurs, comme focus.

Objet d’erreur de configuration

Le tableau suivant décrit le contenu de l’objet « erreur » :

ParamètreRequisTypeDescription
codetruestringCode d’erreur
displayMessagetruestringMessage d’erreur à montrer aux clients.
detailedMessagetruestringDescription détaillée de l’erreur (cette information ne doit pas être montrée aux clients).
correlationIdtruestringIdentifiant d’erreur unique à fournir au service de soutien Paysafe lors de l’enquête.

Fonction et objets de configuration

Le tableau suivant répertorie les paramètres de la fonction de configuration, les objets JavaScript utilisés par la fonction de configuration et les paramètres qu’ils contiennent.

ParamètreRequisTypeDescription
apiKeytruestringLa version encodée en Base64 de la clé API du jeton à usage unique est utilisée pour s’authentifier auprès de l’API REST de la plateforme de paiement.
optionstrueobjectEnglobe l’environnement, les champs et le style.
{return}falsePromisePromesse qui sera résolue aux champs hébergés de l’objet instance
options
currencyCodetruestring

La devise de paiement du compte marchand, p. ex. USD pour les dollars américains.

Ce code de devise sera utilisé pour précharger les configurations du marchand, comme les marques de cartes prises en charge et la récupération des transactions.

Lorsqu’un compte unique est configuré pour cette devise et ce type de paiement, il sera utilisé pour la tokenisation.

environmentfalsestring

Environnement à utiliser pour tous les appels à la tokenisation et à la journalisation; soit :

  • LIVE – utilisé en mode Production
  • TEST – utilisé pour l’environnement de test ou de bac à sable
champsfalseobjectConfiguration des champs spécifiés.
stylefalseobjectReprésentation Javascript des propriétés CSS à appliquer aux champs.
initializationTimeoutfalsenumberDurée maximale (en millisecondes; la valeur par défaut est 5000) pendant laquelle la SDK attend que les iframes soient prêtes avant de renvoyer une erreur.
thresholdfalsenumber

La valeur seuil est spécifique au flux de récupération de la transaction. Spécifie le taux de refus maximum d’un NIB de carte.

accountsfalseobject

Les comptes qui seront utilisés pour précharger les configurations du marchand à partir du portail d’administration lorsque le marchand est configuré pour plusieurs comptes de la même devise.

Si la valeur des comptes n’est pas fournie, Paysafe JS essaiera de deviner le compte à configurer en fonction de la configuration du marchand dans le portail d’administration.

accounts
defaulttrue (conditional)number

Le compte sera utilisé pour tous les types de paiement si rien d’autre n’est indiqué.

Requis si l’objet des comptes est fourni.

applePayfalsenumber

Le compte sera utilisé pour l’intégration Apple Pay.

Par défaut, si aucun compte applePay n’est fourni, la valeur accounts.default sera utilisée.

champs
fieldNamefalsestring

Nom du champ à configurer :

  • cardNumber
  • cvv
  • expiryDate
  • expiryYear
  • expiryMonth
  • applePay
selectortruestringSélecteur CSS qui identifie de manière unique le conteneur vide dans lequel insérer l’iframe du champ.
placeholderfalsestringParamètre fictif pour l’élément de saisie iframe.
accessibilityLabelfalsestringUne étiquette d’accessibilité qui sera lue dans les lecteurs d’écran, si le client en utilise (par défaut ; si aucune étiquette d’accessibilité n’est spécifiée, la valeur du paramètre fictif est utilisée. S’il n’y a ni accessibilityLabel ni paramètre fictif, la valeur par défaut est Card Number/CVV/Card expiry date/Card expiry month/Card expiry year)
accessibilityErrorMessagefalsestringUn message d’erreur qui sera lu par les lecteurs d’écran lorsque le champ n’est pas valide (si le client en utilise). Vide par défaut.
iframeTitlefalsestringLe titre qui sera attribué à l’iframe. La valeur par défaut est « secured ».
separatorfalsestring

Disponible uniquement pour le champ du numéro de carte. Si aucun séparateur n’est spécifié, la valeur par défaut est l’espace blanc (" "). Les valeurs acceptées sont : null, undefined, "", "", "-".

Si la valeur du séparateur est nulle ou indéfinie, aucun séparateur n’est appliqué. Si le séparateur est " " ou "-", il est automatiquement ajouté après tous les 4 chiffres lors de la saisie d’un numéro de carte (par exemple, "4532-5647-1747-9616", "4078 2050 3082 0").

optionalfalseboolean

Disponible pour tous les champs uniquement en cas d’utilisation de la fonctionnalité de carte enregistrée (passage de singleUseCustomerToken et paymentTokenFrom sur la fonction de segmentation en unités), sinon disponible uniquement pour le champ CVV.

Valeurs par défauts à « false ». Si la valeur est « true », le champ ne sera pas requis pour effectuer une tokenisation, mais sera validé s’il n’est pas vide.

maskfalseboolean

Disponible uniquement pour le champ CVV.

Valeurs par défauts à « false ». Si la valeur est « true », la valeur du CVV sera masquée.

labeltrue (lorsque le champ est applePay)string

Disponible pour le champ applePay seulement.

Étiquette affichée immédiatement après le bouton « Payer » dans la fenêtre de paiement Apple Pay.

typefalsestring

Disponible pour le champ applePay seulement.

Le type de bouton Apple Pay :

  • "pay" – par défaut
  • "buy"
  • "donate"
colorfalsestring

Disponible pour le champ applePay seulement.

La couleur du bouton Apple Pay. Choisir parmi :

  • "black" – par défaut
  • "white"
  • "white-outline"
style
cssSelectorNamefalseobject

Sélecteur CSS qui identifie l’élément auquel s’appliquent les styles transmis. Liste des identifiants :

  • cvv
  • card-number
  • expiry-date
  • expiry-year
  • expiry-month

Liste des classes :

  • valid
  • invalid
cssSelectorName
cssStyleNamefalsestring

Nom du style CSS à appliquer et valeur correspondante. Noms de style CSS pris en charge :

  • color
  • opacity
  • letter-spacing
  • text-align
  • text-indent
  • text-decoration
  • text-shadow
  • font
  • font-style
  • font-weight
  • font-size
  • line-height
  • font-family
  • transition
  • -ms-filter

Erreurs de configuration

 

CodeMessage affichéMessage détailléDescription
9012Une erreur s’est produite (9012); veuillez contacter notre service de soutien.Nombre d’arguments non validesLe nombre d’arguments fourni est différent de 2.
9013Une erreur s’est produite (9013); veuillez contacter notre service de soutien.Paramètre apiKey non valide.Le paramètre apiKey fourni n’est pas une chaîne.
9014Une erreur s’est produite (9014); veuillez contacter notre service de soutien.Une erreur non gérée s’est produite.Une erreur qui n’a pas été gérée par la SDK Paysafe.js a été déclenchée.
9015Une erreur s’est produite (9015); veuillez contacter notre service de soutien.Argument d’options non valide.Le paramètre options fourni n’est pas un objet.
9016Une erreur s’est produite (9016); veuillez contacter notre service de soutien.Options de style non validesLes options de style fournies ne sont ni un objet ni un tableau.
9017Une erreur s’est produite (9017); veuillez contacter notre service de soutien.Les options d’environnement ne sont ni une chaîne ni un objet.L’environnement fourni n’est ni une chaîne ni un objet.
9018Une erreur s’est produite (9018); veuillez contacter notre service de soutien.L’environnement ne correspond à aucune des valeurs prédéfinies (possible : TEST, LIVE; actual: ${environment}). 
9019Une erreur s’est produite (9019); veuillez contacter notre service de soutien.L’url de l’environnement doit être une chaîne non vide.L’URL de l’environnement est vide ou n’est pas une chaîne.
9021Une erreur s’est produite (9021); veuillez contacter notre service de soutien.La valeur du sélecteur CSS pour ${styleName} n’est pas un objet.La valeur du sélecteur n’est ni un objet ni un tableau.
9022Une erreur s’est produite (9022); veuillez contacter notre service de soutien.La propriété CSS ${styleName}.${propertyName} doit être une chaîne ou un nombre.Les styles fournis contiennent une propriété dont la valeur n’est ni une chaîne ni un nombre.
9023Une erreur s’est produite (9023); veuillez contacter notre service de soutien.Aucun élément conteneur n’a été trouvé en utilisant le sélecteur ${fieldName}. 
9024Une erreur s’est produite (9024); veuillez contacter notre service de soutien.Plus d’un élément conteneur a été trouvé en utilisant le sélecteur ${fieldName}. 
9025Une erreur s’est produite (9025); veuillez contacter notre service de soutien.Le même conteneur a été trouvé pour ${firstField} et ${secondField} 
9026Une erreur s’est produite (9026); veuillez contacter notre service de soutien.Mauvaise configuration du champ de la date d’expiration La date d’expiration (expiryDate) ou le mois d’expiration (expiryMonth) et l’année d’expiration (expiryYear) doivent être définis. 
9028Une erreur s’est produite (9028); veuillez contacter notre service de soutien.Échec de l’initialisation des iframes Paysafe.js.Les iframes utilisés pour les champs de paiement sensibles n’ont pas été initialisés dans les 5 secondes. Cela peut se produire si le serveur qui génère le code HTML pour l’iframe n’est pas disponible.
9029Une erreur s’est produite (9029); veuillez contacter notre service de soutien.Le paramètre fictif ${fieldName} doit être une chaîne. 
9030Une erreur s’est produite (9030); veuillez contacter notre service de soutien.Le séparateur de numéro de carte doit être une chaîne. 
9031Une erreur s’est produite (9031); veuillez contacter notre service de soutien.Séparateur de numéro de carte non valide.La valeur spécifiée pour le séparateur de numéro de carte n’est pas nulle, indéfinie, "" (chaîne vide), " " (espace blanc) ou "-" (tiret).
9032Une erreur s’est produite (9032); veuillez contacter notre service de soutien.L’étiquette d’accessibilité ${fieldName} doit être une chaîne.Utilisé lorsque accessibilityLabel n’est pas une chaîne valide.
9033Une erreur s’est produite (9033); veuillez contacter notre service de soutien.Le sélecteur doit être défini soit sur tous les champs, soit sur aucun.Le sélecteur n’a été défini que pour certains champs. Par exemple, les options de configuration spécifiaient le numéro de carte, le cvv et la date d’expiration, mais il n’y a des sélecteurs que pour le numéro de carte et le cvv.
9072Une erreur s’est produite (9072); veuillez contacter notre service de soutien.${fieldName} accessibilityErrorMessage doit être une chaîne.Utilisé lorsque accessibilityErrorMessage n’est pas une chaîne valide.
9078Une erreur s’est produite (9078); veuillez contacter notre service de soutien.Paramètre facultatif ${fieldName} non valide. 
9079Une erreur s’est produite (9079); veuillez contacter notre service de soutien.${fieldName} ne peut pas avoir de paramètre facultatif. 
9082Une erreur s’est produite (9082); veuillez contacter notre service de soutien.initializationTimeout doit être un nombre supérieur à zéro. 
9097Une erreur s’est produite (9097); veuillez contacter notre service de soutien.${fieldName} iframeTitle doit être une chaîne.Utilisé lorsque iframeTitle n’est pas une chaîne valide.
9055Une erreur s’est produite (9055); veuillez contacter notre service de soutien.Paramètre de devise non valide.Le currencyCode n’est pas une devise ISO valide
90619061Une erreur s’est produite (9061); veuillez contacter notre service de soutien.Identifiant de compte invalide pour ${paymentMethod}.Le paramètre accounts.{account} n’est pas un identifiant de compte valide.
9099Une erreur s’est produite (9099); veuillez contacter notre service de soutien.Paramètre de seuil non valide.Le seuil fourni n’est pas un nombre valide entre 0 et 100.
Erreurs spécifiques à ApplePay