Page History

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

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

Simple payment

Technical Connection Data

Technical connection data must be passed in the HTTP headers of the REST request:

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 The payload type de la payload: les données doivent être passés dans une payload json: data must be passed in a JSON payload.
  Content-Type: application/jsonles 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 data received during the OAuth-v2 authentication step

This includes the token type and JSON Web Token (JWT). They must be specified in the 'Authorization' header
Authorization: <token_type> <YOUR_JWT>

• Idempotency Id
  

  Essential for detecting possible HTTP repetitions.

Use the 'Idempotency-Key'

header and generate a uuid-v4

as the value

Idempotency-Key: "8f35cb16-2f05-4aa1-85cf-b1e41ee7aec9"

Minimal Data

To initiate the payment, the minimum required data are:

• Transaction identifier on the merchant side

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

• Transaction amount and currency: '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)

• object

  • Composed of the data 'currency' and 'value'
  • The amount must always be expressed in the smallest unit of the associated currency (e.g., EUR cents)

• Customer identification: 'customerInfo' object composed at minimum

  • Of the customer's email: 'email'
  • It is highly recommended to provide the customer identification on the merchant site: 'merchantCustomerId'. This data is essential for the 'One-Click' functionality.

• Order data: 'order' object

  • At least one of the following two data points: the order number 'merchantReference', or the invoice number 'invoiceId' generated on the merchant site.
  • It is recommended to provide both.

• Return URLs: object 'urls'

  • Mandatory addresses of 3 return URLs
• 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

• Desired payment type

de paiement souhaité

• :

objet

• 'paymentMethods'

Il faut préciser si le paiement est hébergé par

• object

  • It must be specified whether the payment is hosted by Axepta BNP Paribas Online,
ou traité entièrement coté marchant
• • or processed entirely on the merchant side: 'integrationType'
et il faut donner le type de paiement souhaité
• • And the desired payment type must be provided: 'type'

Exemple de page de paiement par carte

Image Removed

Example of card payment form

Image Added

Payment with

One-Click / Wallet

Pour traiter la fonctionnalité To process the One-Click , il est nécessaire de fournir l'identifiant du client pour le marchand.feature, it is necessary to provide the merchant's customer identifier.

In the Dans l'objet 'customerInfo' , il faut envoyer le paramètre object, you must send the 'merchantCustomerId' parameter.

Exemple de page de paiement disposant de la fonctionnalité Example of a payment page with the One-Click Image Removed Image Removed

Paiement iframe

feature

Card saving
Image Added

Card reusing

Image Added

iframe Payment

To open the payment page in a separate iframe, you need to use the objectPour ouvrir la page de paiement dans une iframe séparée, il faut utiliser l'objet: 'template'.
Valorisez le champ Set the field 'customField14' avec la valeurwith the value: "iframe".

L'objet The 'template' permet de personnaliser la page de paiement.
Voir la doc: https://docs.axepta.bnpparibas/display/DOCBNP/Personnaliser+la+page+de+paiementobject allows you to customize the payment page.

See the doc: Checkout experience Customization

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

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

Image Removed

Example of a payment page displayed in a separate iframe

Image Added

4.

Recommandations

We recommend transmitting at least the following data:

• Transaction Identifier: The unique payment identifier
• Payment Amount: The amount to be paid by the customer.
• Currency: The currency used for the payment.
• Customer Identifier: The unique customer identifier - Allows the use of the

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 payment featureemail
• Email: LThe customer's email du client
Identifiant de la commande
• Order Identifier (order.merchantReference):
L'identifiant de la commande
• The order identifier
• Invoice Identifier
Identifiant de la facture
• (order.invoiceId):
L'identifiant de la facture associé à ce paiement
• The invoice identifier associated with this payment

Our complete guidelines are available here: L'ensemble de nos guidelines sont disponibles ici : https://axeptabnpparibas-docs.redocly.app/

5.

AJouter ici la liste des moyens de paiement disponibles

6. Fonctionnalités associées

Available card brands

We support the card payment brands below:

• Cards
  • American Express (AMEX)
  • Cartes Bancaires
  • Union Pay International (UPI)
  • Diners
  • Discover
  • JCB
  • MasterCard
  • Visa
• Wallets
  • Apple Pay
  • Google Pay

6. Related features

• End-to-End Reference Generation (RefNr): Each transaction benefits from a unique automatically generated reference.

• Wallet: Offer your customers a smooth and secure payment experience. With this feature, customers can securely save their cards for future transactions, making repeated purchases faster and easier, thus improving the conversion rate.

• Duplication check: Detect and manage duplicate payment attempts to avoid errors - Activation during your store setup or via a support request

• Confirmation Email: Axepta BNP Paribas can send a confirmation email of payment success or failure to the customer - Activation during your store setup or via a support request

• 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