The credit card payment form is used when the merchant wants to offer a simplified and secure payment solution for card transactions.

This method is ideal for e-commerce sites that want to integrate a fast payment solution that complies with security standards.


Summary



1. Key Advantages

  • Optimized User Experience: Provide your customers with an intuitive, secure, and responsive payment interface
  • Security and Compliance with Standards: Comply with current regulations through Axepta BNP Paribas's management of customer sensitive data, significantly reducing your responsibilities PCI-DSS compliance and costs related to PCI-DSS compliance. 

  • Flexibility: Allow customers to pay with various cards


2. Payment Flow

hosted-forms_partner.png

The customer proceeds with payment on your online store:

  1. Your frontend requests the payment page from the backend.

  2. Your backend makes a payment creation call with 'paymentMethods.integrationType=HOSTED' to Axepta BNP Paribas.
  3. Axepta BNP Paribas responds with HTTP 202 status code and a redirect URL to your backend.

  4. Your backend orchestrates the browser to redirect the user interface to the redirect URL.

  5. The customer is redirected to the payment form hosted by Axepta BNP Paribas.

  6. The customer enters details and completes the payment.

  7. At the end, the customer is redirected to the return URL you submitted during the payment creation call (urls.return) with the payId in the query parameters.

  8. The browser fetches the return URL hosted by your backend.

  9. The backend makes a payment details GET call with the payId to fetch the payment response code.

  10. Axepta BNP Paribas responds with the payment response code along with other parameters.

  11. Your backend returns a success or failure page based on the payment response code.


3. Create Payment

(API /payment Swagger Documentation: Create payment )

Paiement simple

Données techniques de connexion

Des données technique 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çut 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'
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 avec One-Click / Wallet

Pour traiter la fonctionnalité One-Click, il est nécessaire de fournir l'identifiant du client pour le marchand.

Dans l'objet 'customerInfo', il faut envoyer le paramètre 'merchantCustomerId'

...
     "customerInfo": {
        "email": "john-doe@email.com",
		"merchantCustomerId": "id-8803"
    }, 
...


Exemple de page de paiement disposant de la fonctionnalité One-Click




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: https://docs.axepta.bnpparibas/display/DOCBNP/Personnaliser+la+page+de+paiement


...
	"template": {
		"customFields": {
	    	"customField14": "iframe"
		}
	},
...

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




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 - Permet d'utiliser la fonctionnalité de paiement One-Click/Wallet
  • 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. Moyens de paiement disponibles

AJouter ici la liste des moyens de paiement disponibles


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.

  • Wallet : Offrez à vos clients une expérience de paiement fluide et sécurisée. Grâce à cette fonctionnalité, les clients peuvent enregistrer leurs cartes de manière sécurisée pour les transactions futures, ce qui rend les achats répétés plus rapides et plus faciles, améliorant ainsi le taux de conversion.

  • Contrôle des Doublons : Détectez et gérez les tentatives de paiement en double pour éviter les erreurs - Activation lors de la configuration de votre boutique ou via une demande au support

  • Email de confirmation : Axepta BNP Paribas peut envoyer une mail de confirmation de succès ou d'échec de paiement au client - Activation lors de la configuration de votre boutique ou via une demande au support