Le formulaire de paiement par carte est utilisé lorsque le marchand souhaite offrir une solution de paiement simplifiée et sécurisée pour les transactions par carte bancaire. Cette méthode est idéale pour les sites e-commerce qui veulent intégrer une solution de paiement rapide et conforme aux normes de sécurité.


Sommaire



1. Avantages clés

  • Expérience Utilisateur Optimisée : Offrez à vos clients une interface de paiement intuitive, sécurisée et responsive
  • Sécurité et Conformité aux Normes : Respectez les réglementations en vigueur grâce à la gestion des données sensibles des clients par Axepta BNP Paribas, réduisant ainsi considérablement vos responsabilités et coûts liés à la conformité PCI-DSS
  • Flexibilité : Permettez aux clients de payer avec différentes cartes bancaires.


2. Flux de paiement

hosted-forms_partner.png

Le client procède au paiement sur votre boutique en ligne :

  1. Votre frontend demande la page de paiement au backend.
  2. Votre backend effectue un appel de création de paiement avec `paymentMethods.integrationType=HOSTED` à Axepta BNP Paribas.
  3. Axepta BNP Paribas répond avec un code de réponse HTTP 202 et une URL de redirection à votre backend.
  4. Votre backend orchestre le navigateur pour rediriger l'interface utilisateur vers l'URL de redirection.
  5. Le client est redirigé vers le formulaire de paiement hébergé par Axepta BNP Paribas.
  6. Le client saisit les détails et complète le paiement.
  7. À la fin, le client est redirigé vers l'URL de retour que vous avez soumise lors de l'appel de création de paiement (urls.return) avec le payId dans les paramètres de requête.
  8. Le navigateur récupère l'URL de retour hébergée par votre backend.
  9. Le backend effectue un appel de détails de paiement GET avec le payId pour récupérer le code de réponse du paiement.
  10. Axepta BNP Paribas répond avec le code de réponse du paiement ainsi que d'autres paramètres.
  11. Votre backend retourne une page de succès ou d'échec en fonction du code de réponse du paiement.


3. Create Payment

(Documentation swagger de l'api /payment: Create payment )

Paiement simple

Données techniques de connexion

Des données techniques de connexion doivent être passées dans les headers http de la requête REST

  • Content-Type
    le type de la payload: les données doivent être passés dans une payload json.
    Content-Type: application/json
  • les données d'autorisation reçues lors de l'étape d'authentification Oauth-v2
    il s'agit du type de token, et du json web token. ils doivent être renseigné dans le header 'Authorization'
    Authorization: <token_type> <YOUR_JWT>
  • L'id d'idempotence.
    Indispensable pour détecter les possibles répétitions http.
    Utilisez le header 'Idempotency-Key' et générez un uuid-v4 comme valeur
    Idempotency-Key: "8f35cb16-2f05-4aa1-85cf-b1e41ee7aec9"

Données minimales

Pour initier le paiement, les données minimales nécessaires sont:

  • l'identifiant de la transaction coté marchant: 'transId'
  • le montant et la devise de la transaction: objet 'amount'
    • composés des données 'curreny' et 'value'.
    • le montant doit toujours être exprimé dans la plus petite unité de la devise associée. (par ex, le centime d'euro)
  • l'identification du client: objet 'customerInfo' composé à minima
    • de l'e-mail du client: 'email'. 
    • Il est fortement conseillé de renseigner l'identification du client sur le site marchant: 'merchantCustomerId'. Cette donnée est indispensable à la fonctionnalité 'One-Click'.
  • les données de la commande: objet 'order'
    • Au moins une des deux données suivantes: le numéro de commande 'merchantReference', ou le numéro de facture 'invoiceId' générée sur le site marchant.
    • il est conseillé de renseigner les 2.
  • les urls de retour: objet 'urls'
    • obligatoirement les adresses de 3 urls de retour: return, cancel, webhook
  • le type de paiement souhaité: objet 'paymentMethods'
    • Il faut préciser si le paiement est hébergé par Axepta BNP Paribas Online, ou traité entièrement coté marchant: 'integrationType'
    • et il faut donner le type de paiement souhaité: 'type'
Exemple curl minimal create paiement
curl -i -X POST \
  https://test.paymentpage.axepta.bnpparibas/api/v2/payments \
  -H 'Authorization: <token_Type> <YOUR_JWT>' \
  -H 'Content-Type: application/json' \
  -H 'Idempotency-Key: "8f35cb16-2f05-4aa1-85cf-b1e41ee7aec9" \
  -d '{
    "transId": "95330876-67ae-4949-a11c-b9a29257831b",
 	"amount": {
    	"currency": "EUR",
    	"value": 1500
    },
    "customerInfo": {
        "email": "john-doe@email.com"
    },
 	"order": {
    	"merchantReference": "order7811",
        "invoiceId": "invoice10240203569454"
    },
 	"urls": {
 		"return":"https://myProcessingServer.net/myApi/success.php?transId=95330876-67ae-4949-a11c-b9a29257831b",
		"cancel":"https://myProcessingServer.net/myApi/cancel.php?transId=95330876-67ae-4949-a11c-b9a29257831b",
 		"webhook":"https://myBackOfficeServer.net/webhook.php" 
    },
    "paymentMethods": {
        "integrationType": "HOSTED",
        "type": "CARD"
	}
}'


Exemple de page de paiement par carte


Paiement iframe

Pour ouvrir la page de paiement dans une iframe séparée, il faut utiliser l'objet: 'template'.
Valorisez le champ 'customField14' avec la valeur: "iframe".

L'objet 'template' permet de personnaliser la page de paiement.
Voir la doc: Personnalisation de l'expérience de paiement


Exemple object template pour iframe
...
	"template": {
		"customFields": {
	    	"customField14": "iframe"
		}
	},
...

Exemple de page de paiement affichée dans un iframe séparé


image-2026-6-16_16-55-20.png



4. Préconisations

Nous préconisons de transmettre à minima les données suivantes : 

  • Identifiant de la transaction  : L'identifiant unique du paiement

  • Montant du Paiement : Le montant à payer par le client.
  • Devise : La devise utilisée pour le paiement.
  • Identifiant du Client : L'identifiant unique du client 
  • email : L'email du client
  • Identifiant de la commande (order.merchantReference) : L'identifiant de la commande
  • Identifiant de la facture (order.invoiceId) : L'identifiant de la facture associé à ce paiement


L'ensemble de nos guidelines sont disponibles ici : https://axeptabnpparibas-docs.redocly.app/


5. Liste des carte supportées

Nous proposons les marques de cartes ci-dessous:

  • Cartes
    • MasterCard
    • Visa
  • Bancontact
  • Wallets
    • Apple Pay
    • Google Pay


6. Fonctionnalités associées

  • Génération Automatique de la Référence End to End (RefNr) : Chaque transaction bénéficie d'une référence unique générée automatiquement.

  • No labels