La personnalisation de la page de paiement se fait avec l'objet template.
Avec les customfields, le marchand peut utiliser les champs personnalisables pouvant stocker des données supplémentaires ou afficher des informations spécifiques sur une page de paiement.
Cette section contient :
Pages de paiement Axepta BNP Paribas Online
La solution Axepta BNP Paribas Online propose 2 pages de paiement :
Pages de paiement BNP Paribas | ||
|---|---|---|
Pages de paiement | Page de choix des moyens de paiement (Hosted Payment Page) Affichage de tous les moyens de paiements que le marchand souhaite proposer. | Formulaire de paiement par carte (Payssl) Affichage du paiement par carte uniquement |
Endpoint | createPayment (card) | createSession |
Personnalisation |
| |
Le marchand peut choisir entre les 2 expériences de paiement suivantes:
Option | Redirection | iFrame |
|---|---|---|
Aperçu |
|
|
Fonctionnement | Le client est redirigé vers la page de paiement Axepta BNP Paribas Online | Le client reste sur le site du marchand et la page de paiement Axepta BNP Paribas Online est affichée au sein du site marchand |
Atouts |
|
|
La page de paiement est disponible en français et en anglais.
Si la langue n'est pas précisée dans l'appel à l'API, alors la langue de la page de paiement correspond à la langue du navigateur.
Dans le cas où la langue du navigateur n'est pas disponible dans la page de paiement, alors la page de paiement est affichée en anglais.
L'utilisateur a la possibilité de changer la langue, une fois arrivé sur la page de paiement grâce à un menu déroulant, en haut à droite de celle-ci.
Appel API
"language": "fr" |
Langues disponibles
| Langues | Valeur dans l'API |
|---|---|
| Français | fr |
| Anglais | en |
| Néerlandais | nl |
Par défaut, l'ensemble des moyens de paiement disponibles sur le MerchantID sont affichés sur la page de choix des moyens de paiement.
Le marchand a la possibilité de restreindre et piloter le ou les moyens de paiement affichés à un client via le paramètre 'allowedPaymentMethods'.
"allowedPaymentMethods" : [
"PAYPAL",
"WERO",
"CARD"
], |
Moyens de paiement disponibles
Moyen de paiement | Valeur du paramètre « allowedPaymentMethods » lors de l'appel à l'API /payments/sessions uniquement |
Carte *Voir la liste des marques de cartes ci-dessous | CARD |
WERO | WERO |
APPLEPAY | APPLEPAY |
| GOOGLEPAY | GOOGLEPAY |
| PAYPAL | PAYPAL |
| FLOAPAY | FLOAPAY |
BANCONTACT | BANCONTACT |
INSTANEA | INSTANEA |
Par défaut, l'ensemble des moyens de paiement disponibles sur le MerchantID sont affichés sur la page de choix des moyens de paiement.
Le marchand al a possibilité de restreindre et piloter le ou les cartes affichées à un client via le paramètre 'paymentMethods.card.subType '.
"paymentMethods": {
"card" : {
...
"subType" : ["CARTESBANCAIRES", "VISA","MASTERCARD", "AMEX"],
...
}, |
Cartes disponibles
Carte | Valeur dans l'API |
|---|---|
Carte Bancaire | CARTESBANCAIRES |
Visa | VISA |
Mastercard | MASTERCARD |
| Amex | AMEX |
| JCB | WERO |
| Discover | DISCOVER |
| Diners | DINERS |
| UPI | CUP |
Lorsque le marchand décide d’utiliser la page standard de BNP Paribas, il peut insérer son propre logo et personnaliser des champs spécifiques appelés champs dynamiques ou personnalisables (customFields).
Paramètre | Format | CND | Description |
|---|---|---|---|
template.customFields.customField1 | ans...50 | O | Montant et devise du paiement |
template.customFields.customField2 | ans...50 | O | Référence commande |
template.customFields.customField3 | ans...256 | O | Logo du commerçant URL avec le logo du commerçant, taille recommandée 200x100 pixels |
template.customFields.customField4 | ans...50 | O | Référence facture |
template.customFields.customField5 | ans...50 | O | Informations sur l'utilisateur |
template.customFields.customField6 | ans...50 | O | Adresse de livraison |
template.customFields.customField7 | ans...50 | O | Adresse de facturation |
template.customFields.customField8 | ans...50 | O | Nom du champ (header) personnalisable (à la main du commerçant) |
template.customFields.customField9 | ans...50 | O | Valeur du champ personnalisable (relatif au champ 8) |
template.customFields.customField14 | ans...50 | O | Cette option permet de mettre en place l'iframe dans la page de paiement du marchand. |
Les customFields permettent d'afficher du texte avec retour à la ligne. Dans ce cas, il est nécessaire d'ajouter le caractère "|" dans le contenu du customField pour indiquer le retour à ligne. Exemple : CustomField6 = Ligne 1|Ligne 2|Ligne 3 Les CustomFields qui acceptent le signe "|" sont CustomField4, CustomField5, CustomField6, CustomField7 et CustomField9 |
...
"template": {
"customFields": {
"customField1": "20.00 €",
"customField2": "merchantReference",
"customField3": "https://placehold.co/200x100/png",
"customField4": "invoice29351925733931",
"customField5": "+33600000000|john.doe@bnpparibas.com",
"customField6": "41 Rue de Valmy|93100 Montreuil",
"customField7": "41 Rue de Valmy|93100 Montreuil",
"customField8": "Discount",
"customField9": "FRI_50|SUM_25"
}
},
... |
Formulaire de choix des moyens de paiement (Hosted Payment Page) contenant des customFields

...
"paymentMethods": {
"integrationType": "HOSTED",
"type": "CARD",
"card": {
"template": {
"customFields": {
"customField1": "20.00 €",
"customField2": "merchantReference",
"customField3": "https://placehold.co/200x100/png",
"customField4": "invoice29351925733931",
"customField5": "+33600000000|john.doe@bnpparibas.com",
"customField6": "41 Rue de Valmy|93100 Montreuil",
"customField7": "41 Rue de Valmy|93100 Montreuil",
"customField8": "Discount",
"customField9": "FRI_50|SUM_25"
}
}
}
}
... |
Formulaire de paiement par carte (Payssl) contenant des customFields

Lorsque le paramètre customField14 = "iframe" sur la Page de choix des moyens de paiement (Hosted Payment Page), tous les autres champs personnalisés deviennent invisibles.
... "template": {
"customFields": {
"customField1": "20.00 EURO",
"customField2": "merchantReference",
"customField3": "https://placehold.co/200x100/png",
"customField4": "invoiceId",
"customField5": "+33600000000|john.doe@bnpparibas.com",
"customField6": "41 Rue de Valmy|93100 Montreuil",
"customField7": "41 Rue de Valmy|93100 Montreuil",
"customField8": "Discount",
"customField9": "FRI_50|SUM_25",
"customField14": "iframe"
}
},
... |
Page de choix des moyens de paiement (Hosted Payment Page) avec un customField14
...
"paymentMethods": {
"type": "CARD",
"card": {
"template": {
"customFields": {
"customField1": "20.00 €",
"customField2": "merchantReference",
"customField3": "https://placehold.co/200x100/png",
"customField4": "invoice29351925733931",
"customField5": "+33600000000|john.doe@bnpparibas.com",
"customField6": "41 Rue de Valmy|93100 Montreuil",
"customField7": "41 Rue de Valmy|93100 Montreuil",
"customField8": "Discount",
"customField9": "FRI_50|SUM_25",
"customField14": "iframe"
}
}
}
... |
Formulaire de paiement par carte (Payssl) avec un customField14