Table of Contents

Info

title	Bénéfices de l'iFrame

Cette option permet à l’acheteur de rester sur un environnement connu et de confiance.

Le tunnel de paiement est fluide et les abandons paniers plus rares.

Tip
web responsive et/ou intégration dans app mobile

Synthèse de la mise en place de l'iframe

Mise en place de l'iframe dans la page de paiement du marchand
Configuration de l'URL passée à l'atttribut src
- Préparation des paramètres URLSuccess et URLFailure avec les URL de retour en succès et en erreur
- Placement de ces 2 paramètres dans le hash du paramètre Data
- Passage de Data en paramètre de l'URL fournie à l'attribut src de l'iframe
- Ajout du paramètre CustomField14=iframe pour avoir uniquement l'affichage du bloc de paiement
Création des pages 'Succès' et 'Échec'
- Préparation du code HTML de redirect-success et redirect-failure
Mise en place de la redirection en JavaScript
- Intégration de la méthode postMessage dans redirect-success et redirect-failure
- Intégration de l'écouteur d'évenement (Event Listener) dans la page de paiement du marchand

Mise en place de l'iframe et configuration de l'URL passée à l'atttribut src

Balise iframe & customField14

Une iframe est une balise HTML qui permet d'intégrer une page HTML dans une autre.

Il faut pour cela utiliser la balise <iframe> et spécifier l'URL de la page qu'on souhaite afficher dans l'attribut src avec l'utilisation du customField14=iframe.

Code Block

language	xml
theme	Eclipse
title	Exemple d'intégration du formulaire carte au sein d'une page HTML
linenumbers	true

<!DOCTYPE html>
<HTML lang="en">
  <HEAD>
    <META charset="UTF-8" />
    <META http-equiv="X-UA-Compatible" content="IE=edge" />
    <META name="viewport" content="width=device-width, initial-scale=1.0" />
    <TITLE>Site marchand - commande</TITLE>
  </HEAD>
  <BODY>
    ...
    <IFRAME
      src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe"
    />
    ...
  </BODY>
</HTML>

Warning

Attention

Il conviendra de passer les paramètres requis au paiement avec cette URL

Au minimum : MerchantID, Data et Len

Réglages

Hauteur et largeur

En pixel

Code Block

language	xml
theme	Eclipse
linenumbers	true

<IFRAME
  src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe"
  height="600"
  width="800"
/>

En CSS

Code Block

language	xml
theme	Eclipse
linenumbers	true

#payment-iframe {
  height: 600px;
  width: 800px;
}

// ou pour un rendu fullscreen
#payment-iframe {
  height: 100vh;
  width: 100vw;
}
<IFRAME
  id="payment-iframe"
  src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe"
/>

Création des pages 'Succès' et 'Échec'

Quand le porteur soumet le formulaire de paiement, une requête est envoyée au serveur Axepta.

Si le paiement est validé, une réponse en succès est envoyée. Dans le cas contraire, une réponse Erreur sera émise.

L'objectif est d'afficher une page de succès ou d'échec à la place de l'iFrame en fonction du résultat du paiement.

Paramètres

Il faut intégrer 2 paramètres à la requête pour indiquer au serveur quelle URL utiliser en cas de succès ou d'erreur.

URLSuccess : URL de retour en succès (ex: https://mon-site.com/payment-success)
URLFailure : URL de retour en erreur (ex: https://mon-site.com/payment-failure)

Ces deux paramètres font partie des paramètres chiffrés de la requête. Ils seront donc intégrés au paramètre Data

Tip
Les pages 'payment-success'

Les URL de retours sont maintenant configurées. Il s'agit de faire correspondre ces URL avec des pages sur le site marchand. Si on reprend nos exemples ci-dessus, nous aurons, en fonction du site, 2 routes à configurer payment-succes et payment-failure.

Tip
Remarque : le serveur renvoie une réponse HTTP avec la méthode POST. On doit donc créer une route sur le serveur du site marchand pour traiter cette réponse.

Code Block

language	xml
theme	Eclipse
title	Exemple de code HTML pour payment-success
linenumbers	true

<!DOCTYPE html>
<HTML lang="en">
  <HEAD>
    <META charset="UTF-8" />
    <META http-equiv="X-UA-Compatible" content="IE=edge" />
    <META name="viewport" content="width=device-width, initial-scale=1.0" />
    <TITLE>Site marchand - commande</TITLE>
  </HEAD>
  <BODY>
    <H1>Paiement réussi</H1>
    <P>Merci pour votre commande</P>
  </BODY>
</HTML>

Warning

Attention la page s'affichera dans l'iframe ! En effet, quand la requête de paiement s'effectue depuis l'iframe, la réponse du serveur est aussi renvoyée dans l'iframe.

Dans notre cas, on aura donc 2 pages du site marchand qui seront affichées, la page de paiement qui insére l'iframe et la page de succès afficher dans l'iframe.

Il est donc nécessaire de mettre en place la redirection permettant d'afficher la page de succès ou d'échec à la place de l'iframe.

Mise en place de la redirection en JavaScript

Si on souhaite rediriger l'utilisateur sur une page du site marchand affichée à la place de l'iframe, il faudra prévoir une page de redirection. Modifier dans un premier temps les paramètres URLSuccess et URLFailure pour les faire pointer vers ces pages de redirection

URLSuccess : https://mon-site.com/redirect-success
URLFailure : https://mon-site.com/redirect-failure

Ensuite, il s'agira de créer Le marchand créé ces pages qui seront affichées lors de la redirection du porteur.

Chacune exécutera un script qui redirigera l'utilisateur vers la page en succès ou en erreur de paiement. Mais cette fois elles ne s'afficheront plus dans l'iframe mais bien dans la fenêtre principale.

La mise en place de ce script est indiqué dans la section suivante.

Mise en place de la redirection en JavaScript

Intégration de la méthode `postMessage` dans `redirect-success` et `redirect-failure`

La solution postMessage qui "permet une communication inter-domaine en toute sécurité".

Plutôt que de modifier directement l'URL depuis la page chargée dans l'iframe, il s'agit L'objectif est de "communiquer" avec la page parente. Cette communication se fera grâce à un événement de type MessageEvent

Code Block

language	xml
theme	Eclipse
title	Code de la page de redirection redirect-success
linenumbers	true

<!DOCTYPE html>
<HTML lang="en">
  <HEAD>
    <META charset="UTF-8" />
    <META http-equiv="X-UA-Compatible" content="IE=edge" />
    <META name="viewport" content="width=device-width, initial-scale=1.0" />
    <TITLE>Site marchand - redirection</TITLE>
  </HEAD>
  <BODY>
    <SCRIPT>
      function sendMessage() {
        // on cible la page parente avec window.parent
        // et on lui envoie un postMessage
        window.parent.postMessage(
          // message en chaîne de caractère
          "payment success",
          // on précise l'origin de ce message
          "https://mon-site.com"
        );
      }

      sendMessage();
    </SCRIPT>
  </BODY>
</HTML>

Tip
La page d'échec est également à créer.

Intégration de l'écouteur d'évenement (Event Listener) dans la page de paiement

Dans la page qui contient l'iframe, on va mettre en place un écouteur d'événement. Celui-ci sera chargé d'exécuter une fonction quand il recevra un évenement événement de type message.

Code Block

language	xml
theme	Eclipse
title	Modification du code de la page qui intégre l'iframe - Ajout EventListener
linenumbers	true

<!DOCTYPE html>
<HTML lang="en">
  <HEAD>
    <META charset="UTF-8" />
    <META http-equiv="X-UA-Compatible" content="IE=edge" />
    <META name="viewport" content="width=device-width, initial-scale=1.0" />
    <TITLE>Site marchand - commande</TITLE>
  </HEAD>
  <BODY>
    <SCRIPT>
      // sur la page courante
      // on place un écouteur avec la méthode addEventListener
      window.addEventListener(
        // type d'évenement à écouter
        "message",
        // fonction de retour (callback) qui sera exécutée
        // quand un évenement de type "message" sera émis
        (event) => {
          // Si l'origin n'est pas la même que celle placée dans le message
          // on arrête l'exécution de la fonction
          if (event.origin !== "https://mon-site.com") return;

          // on redirige l'utilisateur sur la page souhaitée
          window.location.href = "https://mon-site.com/payment-success";
        }
      );
    </SCRIPT>
    ...
    <IFRAME
      src="https://paymentpage.axepta.bnpparibas/payssl.aspx?MerchantID=YourMID&Len=123&Data=AGSDJ…ASDF&CustomField14=iframe"
    />
    ...
  </BODY>
</HTML>

Warning

Attention la page s'affichera dans l'iframe ! En effet, quand la requête de paiement s'effectue depuis l'iframe, la réponse du serveur est aussi renvoyée dans l'iframe.

Dans notre cas, on aura donc 2 pages du site marchand qui seront affichées, la page de paiement qui insére l'iframe et la page de succès afficher dans l'iframe.

Il est donc nécessaire de mettre en place la redirection permettant d'afficher la page de succès ou d'échec à la place de l'iframe.

Page tree

Versions Compared

Old Version 1

New Version 2

Key

Synthèse de la mise en place de l'iframe

Mise en place de l'iframe et configuration de l'URL passée à l'atttribut src

Balise iframe & customField14

Réglages

Hauteur et largeur

Création des pages 'Succès' et 'Échec'

Paramètres

Mise en place de la redirection en JavaScript

Mise en place de la redirection en JavaScript

Intégration de la méthode `postMessage` dans `redirect-success` et `redirect-failure`

Intégration de l'écouteur d'évenement (Event Listener) dans la page de paiement

Help

Intranet Tools

Page tree

Page History

Versions Compared

Old Version 1

New Version 2

Key

Synthèse de la mise en place de l'iframe

Mise en place de l'iframe et configuration de l'URL passée à l'atttribut src

Balise iframe & customField14

Réglages

Hauteur et largeur

Création des pages 'Succès' et 'Échec'

Paramètres

Mise en place de la redirection en JavaScript

Mise en place de la redirection en JavaScript

Intégration de la méthode postMessage dans redirect-success et redirect-failure

Intégration de l'écouteur d'évenement (Event Listener) dans la page de paiement

Intégration de la méthode `postMessage` dans `redirect-success` et `redirect-failure`