La personnalisation de Cette section détaille les fonctionnalités liées à 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.

Axepta BNP Paribas Online: type de page, modes d'intégration, options de personnalisation.

Cette section contient :

Table of Contents

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

/payments/sessions

/payments (card)

Personnalisation

Paramètres dynamiques (langues, moyens de paiement)
Champs personnalisables, appelés également CustomFields (détails sur le panier, détails sur l’acheteur…) & Logo

Choix de l'expérience de paiement

Le marchand peut choisir entre les 2 expériences de paiement suivantes:

Option	Redirection	iFrame
Aperçu	Image Added	Image Added
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	Intégration la plus simple Peu de développement côté marchand	L’acheteur reste sur le site commerçant : environnement connu et de confiance Le tunnel de paiement est fluide

Paramètres dynamiques des pages de paiement

Langues de la page de paiement

La page de paiement est disponible en français, anglais et en néerlandais.

Lors de la première visite, 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. S'il le fait c'est cette langue qui sera affichée par défaut lors de la visite suivante.

Appel API

Code Block

language	json

"language": "fr"

Langues disponibles

Langues	Valeur dans l'API
Français	fr
Anglais	en
Néerlandais	nl

Affichage des moyens de paiement sur la page

A chaque page de paiement, un template

Il existe 2 types de pages de paiement AXEPTA qui peuvent être personnalisées à l'aide des customfields.

NomAPIFormulaire

de choix des moyens de paiement (

Hosted

Hosted Payment Page)

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'.

Code Block

language	json

 "allowedPaymentMethods" :  [
      "PAYPAL",
      "WERO",
      "CARD"
    ],

Moyens de paiement disponibles

Moyen de paiement

Valeur du paramètre « allowedPaymentMethods » lors de l'appel à l'API /payments/sessions

Formulaire

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

Affichage des moyens de paiement sur le formulaire de paiement par carte (Payssl)

/payments

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 cartes affichées à un client via le paramètre 'paymentMethods.card.subType '.

Code Block

language	json
theme	Confluence

"paymentMethods": {
        "card" : {
			...
            "subType" : ["CARTESBANCAIRES", "VISA","MASTERCARD", "AMEX"],
			...
        },

Cartes disponibles

Carte	Valeur dans l'API
Carte Bancaire	CARTESBANCAIRES
Visa	VISA
Mastercard	MASTERCARD
Amex	AMEX
JCB	JCB
Discover	DISCOVER
Diners	DINERS
UPI	CUP

Champs personnalisables des pages de paiement

Liste des champs personnalisables (customFields)

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).

Liste des 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...50255	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. Valeur accepté "iframe"

Info

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

Code Block

language	json
title	Exemple objet customFields sur l'API /payments/sessions
linenumbers	true

...
	"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 Hosted Payment Page) contenant des customFields

Code Block

language	json
title	Exemple d'objet customFields sur l'API /payments
linenumbers	true

...
"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

Mise en place de l'iframe (customField14)

Affichage de la page

CustomField14 sur la Page

de choix des moyens de paiement (Hosted Payment Page) dans le site marchand (iframe)

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.

Code Block

language	json
title	Exemple d'objet customFields sur l'API /payments/sessions
linenumbers	true

...	"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

CustomField14 sur le Formulaire

Affichage du formulaire de paiement par carte (Payssl) dans le site marchand (iframe)

Lorsque le paramètre customField14 = "iframe", tous les autres champs personnalisés deviennent invisibles, à l'exception du customField1.

Code Block

language	json
title	Exemple d'objet customFields sur l'API /payments
linenumbers	true

...
"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
Image Modified

Autres paramètres dynamiques (langue, choix des moyens de paiement)

D’autres paramètres sont mis à la disposition du commerçant et peuvent être transmis non chiffrés :

Language

a2 Enum

O

Langue utilisée pour la page de paiement

Code pour la langue de la page de paiement du commerçant :

en : English
fr : Français
nl : Nederlands

Si non mentionné, la langue par défaut est le français.

Si l'utilisateur change de langue à partir du sélecteur de langue, c'est celle choisie qui sera affichée lors de la visite suivante.

allowedPaymentMethods

Enum

O

Liste des moyens de paiement à afficher dans la page de choix des moyens de paiement (Hosted Payment Page - HPP)

Ce paramètre permet d'indiquer les moyens de paiement à afficher sur la page de choix des moyens de paiement.

Si ce paramètre n'est pas utilisé, la configuration par défaut du niveau du commerçant est utilisée pour afficher les moyens de paiement autorisés.

Les valeurs possibles peuvent être prises dans la colonne allowedPaymentMethods du tableau des modes de paiement (Voir la section Définitions des valeurs des paramètres en bas de la page).

subType

Enum

O

Paramètre utilisé pour indiquer le type de carte à afficher sur la formulaire de paiement par carte

Ce paramètre, découlant des objets paymentMethods.card permet d'indiquer le type de marque de carte à afficher sur le formulaire de paiement par carte.

Info

title	Info

Il n'est pas possible d'indiquer précisément le type de carte à afficher sur la page de choix des moyens de paiement (Hosted Payment Page - HPP).

Definition des valeurs des paramètres

Paramètre « allowedPaymentMethods»

Veuillez trouver ci-dessous les différents moyens de paiement disponibles et les valeurs à renseigner dans le paramètre « allowedPaymentMethods »

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

APPLEPAY

GOOGLEPAYGOOGLEPAYPAYPALPAYPALFLOAPAYFLOAPAY

BANCONTACT

INSTANEA

Paramètre «subType»

Marques de cartes à indiquer dans les objets paymentMethods.card

Ce tableau liste l'orthographe exacte des différentes marques de cartes à indiquer dans le paramètre subType des objets paymentMethods.card.

MarqueValeur du paramètre (paymentMethods.card) "subType" lors de l'appel à l'API /payments/sessions ou à l'API /paymentsCarte AmexAMEX

Carte CB

CARTESBANCAIRES

UnionPay International (UPI)

CUP

Diners

DINERS

Discover

DISCOVER

JCB

Carte MasterCard

MasterCard

Carte VISA

VISA

Code Block

language	json
title	Endpoint /payments/sessions : exemple de code pour l'affichage des marques Cartes Bancaires et VISA sur le formulaire de paiement par carte
linenumbers	true

... "allowedPaymentMethods" : [ "CARD" ], "paymentMethods": { "card": { "subType":[ "CARTESBANCAIRES", "VISA"] } } ...

Page tree

Versions Compared

Old Version 120

New Version Current

Key

Pages de paiement Axepta BNP Paribas Online

Choix de l'expérience de paiement

Paramètres dynamiques des pages de paiement

Langues de la page de paiement

Affichage des moyens de paiement sur la page

de choix des moyens de paiement (

Hosted Payment Page)

Affichage des moyens de paiement sur le formulaire de paiement par carte (Payssl)

Champs personnalisables des pages de paiement

Liste des champs personnalisables (customFields)

Liste des customFields

Mise en place de l'iframe (customField14)

Affichage de la page

de choix des moyens de paiement (Hosted Payment Page) dans le site marchand (iframe)

Affichage du formulaire de paiement par carte (Payssl) dans le site marchand (iframe)

Autres paramètres dynamiques (langue, choix des moyens de paiement)

Help

Intranet Tools

Page tree

Page History

Versions Compared

Old Version 120

New Version Current

Key

Pages de paiement Axepta BNP Paribas Online

Choix de l'expérience de paiement

Paramètres dynamiques des pages de paiement

Langues de la page de paiement

Affichage des moyens de paiement sur la page

de choix des moyens de paiement (

Hosted Payment Page)

Affichage des moyens de paiement sur le formulaire de paiement par carte (Payssl)

Champs personnalisables des pages de paiement

Liste des champs personnalisables (customFields)

Liste des customFields

Mise en place de l'iframe (customField14)

Affichage de la page

de choix des moyens de paiement (Hosted Payment Page) dans le site marchand (iframe)

Affichage du formulaire de paiement par carte (Payssl) dans le site marchand (iframe)

Autres paramètres dynamiques (langue, choix des moyens de paiement)