Pages de paiement intégrées

S’abonner

Les pages de paiement Payline sont la solution qu’il vous faut pour votre boutique en ligne. 

Elles permettent d'externaliser l’ensemble des fonctions relatives aux données de cartes vers Payline, ce qui vous permet de profiter d’un procédé très simplifié d’auto-déclaration PCI DSS (SAQ A).

Personnalisables selon la charte graphique de votre enseigne et adaptables en fonction de l'appareil du consommateur, elles intègrent l'ensemble des fonctionnalités visant à améliorer le taux de conversion tels que : le scan du numéro de carte sur un mobile, le paiement 1 clic, la suggestion d'un moyen de paiement en cas de refus, etc.

La cinématique de paiement

La cinématique de paiement est la même quelque soit l'expérience utilisateur souhaitée pour votre boutique.

  • Sur votre boutique, votre client remplit son panier et lorsqu'il est en prêt, clique sur le bouton "payer" pour procéder au paiement de sa commande.
  • Votre boutique contacte Payline pour initialiser un paiement et affiche le formulaire de paiement des pages Payline : affichage en lightbox, intégré ou redirection.

  • Votre client renseigne ses données de paiement en toute sécurité sur Payline. Puis, après validation, il consulte son justificatif de paiement.

  • Payline redirige votre client sur votre boutique pour finalisation de sa commande.

  • Votre boutique contacte Payline pour obtenir le détail du résultat du paiement.

Vous pouvez personnaliser l’expérience utilisateur en hébergeant sur votre boutique l'étape du choix des moyens de paiement, ou préférer un affichage "sur une seule page" des moyens de paiement proposés.

De même, l'affichage du ticket de paiement sur les pages Payline est facultatif. Une redirection automatique vers votre boutique en fin de paiement peut être réalisée.

Environnements de test et de production

Les URL de test et de production pour communiquer avec l'API Web Payment Payline sont synthétisées ci-après :

Homologation (Test Environment)

 

Production (Live Environment)

 

Mode d'intégration et expérience utilisateur

Trois types d'expérience utilisateur sont proposées pour votre boutique  :

  • mode redirection : le consommateur est redirigé de la boutique en ligne vers les pages de paiement externalisée Payline.
  • mode lightbox : la page de paiement s'affiche en sur-impression par un effet de calque au dessus de la boutique en ligne. Le consommateur n'a pas l'impression de quitter votre boutique même si les données de paiement qu'il saisit son renseignées directement sur les pages de paiement Payline via des iframes. 
  • mode intégré : le formulaire de paiement est inséré dans la boutique en ligne. Le consommateur ne quitte pas votre boutique. Les données de paiement sont renseignées directement sur les pages de paiement Payline via des iframes.

Mode redirection

Lorsque le Mode Redirection est utilisé, vous réalisez une redirection du consommateur (URL redirection) vers les pages de paiement Payline.

Le processus de paiement complet est géré par les serveurs sécurisés Payline.

Intégration

L'intégration, très facile, s'effectue en uniquement 3 étapes :

  1. Initialisation du paiement : vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement Payline.
  2. Redirection du consommateur vers les pages de paiement Payline : il s'agit de rediriger le consommateur vers l'URL retournée par la fonction doWebPayment.
  3. Résultat du paiement : vous devez utiliser la fonction getWebPaymentDetails de l'API Web Payment pour obtenir le résultat du paiement.


Cet exemple utilise la fonction PHP pour déclencher une redirection du navigateur.

header("location:".$doWebPaymentResponse['redirectURL']);

Personnalisation

Les pages de paiement Payline sont facilement personnalisables par CSS et Template HTML pour conserver le look and feel de votre boutique. Veuillez consulter le manuel de personnalisation disponible sur notre centre d'aide.

L'adresse Internet qui s'affiche dans le navigateur est l'URL sécurisé (TLS 1.2) des serveurs Payline. Si vous souhaitez la personnaliser pour conserver votre nom de domaine, veuillez contacter notre support technique.

Mode lightbox 

Le Mode Lightbox utilise des iframes pour afficher le formulaire de paiement en superposition (overlay) de votre boutique. Lorsque ce mode est utilisé, votre boutique est grisée et le formulaire de paiement apparaît flottant au dessus de votre boutique.

L'URL de votre boutique reste dans la barre d'adresse Internet du navigateur.

Intégration

L'intégration, extrêmement facile, s'effectue en uniquement 3 étapes :

  1. Initialisation du paiement : vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement Payline.
  2. Ajout d'un script et d'une balise <DIV> dans le corps de votre page web : Payline va se servir de cette balise pour afficher le formulaire de paiement.
  3. Résultat du paiement : vous devez utiliser la fonction getWebPaymentDetails de l'API Web Payment pour obtenir le résultat du paiement.

 

La page HTML minimale pour générer un formulaire de paiement est la suivante :

<html>
 <head>
 </head>
 <body>
 <div id="PaylineWidget" data-token="#paylineToken#" />
 </body>
</html>

Le #paylineToken# est le jeton d'authentification obtenu dans la réponse à la demande d'initialisation d'un paiement (doWebPayment). Afin d'éviter qu'une nouvelle initialisation soit réalisée lors de chaque actualisation de la page, vous devez soit utiliser une session sur votre serveur pour le stocker, ou alors vérifier si l’URL courante contient déjà un jeton de paiement dans un paramètre GET nommé paylinetoken. Voici un exemple pour réutiliser le jeton présent dans l'URL :

<? $paylineToken = (is_empty($_GET['paylinetoken'])) ? $_GET['paylinetoken'] : initPayment(); ?>

 

Pour obtenir la mise en forme du formulaire de paiement, vous devez intégrer la feuille de style CSS Payline en ajoutant la ligne suivante dans la balise <head> :

Les URLs du script et de la CSS sont différents entre les environnements de test et de production. Nous vous conseillons de les configurer dans des variables d'environnements.

Des attributs additionnels que vous pouvez utiliser dans la balise <div> permettent de personnaliser l'affichage du formulaire. Par exemple; si vous ne souhaitez pas que le formulaire de paiement s'affiche automatiquement lors de l'affichage de votre page :

 
data-auto-init Définit si le formulaire doit s’initialiser dès que la page web a fini de se charger (auto-init à « true »), ou s’il doit attendre un demande d’initialisation (auto-init à « false »)
  • true
  • false

API JavaScript

Afin d’interagir avec le formulaire de paiement, Payline propose une API en JavaScript pour que vous gardiez la main sur le formulaire. Les fonctions disponibles sont :

 

init()

demande d'initialisation du formulaire de paiement. Lors de l'initialisation, le widget Payline construit le formulaire en fonction du contexte de la demande de paiement: montant, moyen de paiement proposé, etc.

show() demande d'affichage du formulaire de paiement.
hide() demande de masquage du formulaire de paiement.

 

Exemple pour masquer, puis afficher le formulaire de paiement :

Payline.Api.hide(): void
Payline.Api.show(): void

Personnalisation

Personnaliser le style du formulaire de paiement est possible en surchargeant la feuille de style fournit par défaut par Payline. Les possibilités de personnalisation sont infinies, voici quelques exemples simples :

 

#PaylineWidget .pl-header-title-wrapper {
background-color: #ABCDEF;
}

la couleur du bandeau Enseigne

#PaylineWidget .pl-header-title-content h4 {
color: #ABCDEF;
}

la couleur du texte de l'Enseigne

#PaylineWidget .pl-header-title-content p {
color: #ABCDEF;
}

la couleur du texte du montant à payer

#PaylineWidget .pl-pay-btn {
background-color: #ABCDEF;
}

#PaylineWidget .pl-pay-btn:hover {
background-color: #ABCDEF;
}

la couleur du bouton de paiement

#PaylineWidget .pl-body {
background-color: #ABCDEF;
}

la couleur de fond du formulaire

#PaylineWidget .pl-pmContainer {
background-color: #ABCDEF;
border-color: #ABCDEF;
}

la couleur de la zone moyen de paiement

#PaylineWidget .pl-icon-close {
color: #ABCDEF;
}

la couleur du bouton fermer la lightbox

Mode intégré

Le Mode Intégré permet une intégration totale dans votre boutique. De ce fait, vous proposez à vos clients de choisir son moyen de paiement et de renseigner ses données de paiement directement dans votre boutique. Des iframes sont utilisées pour afficher le formulaire de paiement dans votre boutique. 

L'URL de votre boutique reste dans la barre d'adresse Internet du navigateur.

Intégration

L'intégration, extrêmement facile, s'effectue en uniquement 3 étapes :

  1. Initialisation du paiement : vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement Payline.
  2. Ajout d'un script et d'une balise <DIV> dans le corps de votre page web : Payline va se servir de cette balise pour afficher le formulaire de paiement.
  3. Résultat du paiement : vous devez utiliser la fonction getWebPaymentDetails de l'API Web Payment pour obtenir le résultat du paiement.

 

La page HTML minimale pour générer un formulaire de paiement est la suivante :

<html>
 <head>
 </head>
 <body>
 <div id="PaylineWidget" data-token="#paylineToken#" data-template="column"/>
 </body>
</html>

Le #paylineToken# est le jeton d'authentification obtenu dans la réponse à la demande d'initialisation d'un paiement (doWebPayment). Afin d'éviter qu'une nouvelle initialisation soit réalisée lors de chaque actualisation de la page, vous devez soit utiliser une session sur votre serveur pour le stocker, ou alors vérifier si l’URL courante contient déjà un jeton de paiement dans un paramètre GET nommé paylinetoken. Voici un exemple pour réutiliser le jeton présent dans l'URL :

<? $paylineToken = (is_empty($_GET['paylinetoken'])) ? $_GET['paylinetoken'] : initPayment(); ?>

 

Pour obtenir la mise en forme du formulaire de paiement, vous devez intégrer la feuille de style CSS Payline en ajoutant la ligne suivante dans la balise <head> :

Les URLs du script et de la CSS sont différents entre les environnements de test et de production. Nous vous conseillons de les configurer dans des variables d'environnements.

Des attributs additionnels que vous pouvez utiliser dans la balise <div> permettent de personnaliser l'affichage du formulaire. Par exemple; si vous ne souhaitez pas que le formulaire de paiement s'affiche automatiquement lors de l'affichage de votre page :

 
data-template Le nom du template à utiliser pour l'initialisation du formulaire.
  • tab
  • column
data-auto-init Définit si le formulaire doit s’initialiser dès que la page web a fini de se charger (auto-init à « true »), ou s’il doit attendre un demande d’initialisation (auto-init à « false »)
  • true
  • false

API JavaScript

Afin d’interagir avec le formulaire de paiement, Payline propose une API en JavaScript pour que vous gardiez la main sur le formulaire. Les fonctions disponibles sont :

 

init()

demande d'initialisation du formulaire de paiement. Lors de l'initialisation, le widget Payline construit le formulaire en fonction du contexte de la demande de paiement: montant, moyen de paiement proposé, etc.

show() demande d'affichage du formulaire de paiement.
hide() demande de masquage du formulaire de paiement.

 

Exemple pour masquer, puis afficher le formulaire de paiement :

Payline.Api.hide(): void
Payline.Api.show(): void

Personnalisation

Personnaliser le style du formulaire de paiement est possible en surchargeant la feuille de style fournit par défaut par Payline. Les possibilités de personnalisation sont infinies, voici quelques exemples simples :

 

#PaylineWidget .pl-pay-btn {
background-color: #ABCDEF;
}

#PaylineWidget .pl-pay-btn:hover {
background-color: #ABCDEF;
}

la couleur du bouton de paiement

#PaylineWidget .pl-body {
background-color: #ABCDEF;
}

la couleur de fond du formulaire

#PaylineWidget .pl-pmContainer {
background-color: #ABCDEF;
border-color: #ABCDEF;
}

la couleur de la zone moyen de paiement

Fonctionnalités avancées

Ajout d'un moyen de paiement non géré par Payline

Cette fonction n'est pas encore active. Elle sera disponible dans la version 4.46. Veuillez consulter le centre d'aide pour connaitre la date de livraison.

Vous souhaitez proposer à vos clients un moyen de paiement que vous gérez vous même, par exemple une carte de fidélité propre à votre enseigne.

L'attribut additionnel data-custompm que vous pouvez utiliser dans la balise <div> permet de personnaliser l'affichage du formulaire. Par exemple; si vous ne souhaitez pas que le formulaire de paiement s'affiche automatiquement lors de l'affichage de votre page :

 
data-custompm Le nom de la fonction javascript qui va générer le formulaire du moyen de paiement non géré par Payline

addPaymentMethod()

La fonction addPaymentMethod() est décrite dans l'exemple ci-dessous : 

<!-- This function is used for adding your own payment method into the Payline form -->
function addPaymentMethod() {
            return [
                    {
                    "index": 2, // Index of the payment method in the list
                    "paymentMethodId":"myCustomPaymentMethod", // CSS classes ID (mandatory and unique) 
                    "html":'<div id="pl-pmLayout-column-pmForm-custom-2" class="pl-pmForm" style="display: block;"><div id="pl-pm-custom_5-view" class="pl-paymentMethod-view pl-clear-after"><p id="pl-pm-custom_5-message" class="pl-message"/><div id="pl-pm-custom_5-formContainer" class="pl-form-container pl-hide-labels"><div id="pl-pm-custom_5-accountContainer" class="pl-form-group pl-has-feedback pl-accountContainer pl-clear-after"><p id="pl-pm-custom_5-account_message" class="pl-message"/><div class="pl-input-group-container"><div class="pl-input-group pl-input-container"><input id="pl-pm-custom_5-account" class="pl-input" placeholder="Numéro de carte"><span id="pl-pm-custom_5-feedbackAccount" class="pl-glyphicon pl-input-feedback" aria-hidden="true"/></div><span class="pl-form-control-addon pl-icon-credit-card"/></div>        </div><button id="pl-pm-custom_5-payBtn" class="pl-pay-btn" type="button" onclick="customPayment()">Payer</button></div></div></div>' // HTML code of your payment method (mandatory)
                    }
                ];
        }

 

Modifier le montant de la transaction entre l'initialisation et le paiement

Vous souhaitez améliorer l'expérience utilisateur, nous vous conseillons d'initialiser le paiement (via la fonction doWebPayment) le plus tôt possible dans le tunnel d'achat. Si possible, dès l'étape du choix du mode de livraison. En effet, vous gagnerez beaucoup lors du temps d'affichage de l'étape paiement. Cette façon de faire implique de pouvoir modifier le montant de la transaction après l'initialisation du paiement.

La modification du montant pourra alors être réalisée par un appel HTTP contenant une trame en JSON avec les données qui viendront écraser ce qui a pu être spécifié dans le doWebPayment.
L’URL à appeler sera :

La requête HTTP devra utiliser la méthode PUT, et devra spécifier dans son header le Content-Type : application/json ; le corps de la requête, lui, devra contenir les données à modifier formatées en JSON.
La structure de l’objet JSON à envoyer est décrite par le tableau qui suit. Aucun attribut de cet objet JSON n’est obligatoire, sauf exception explicitée dans le tableau. Il est donc possible de n’envoyer qu’une partie de la structure à votre convenance.

 

Objets niveau 1

Objet niveau 2

Objet niveau 3

Objet niveau 4

payment

amount

   

currency

   

order

amount

   

currency

   

taxes

   

deliveryTime

   

deliveryMode

   

deliveryExpectedDate

   

deliveryExpectedDelay

   

details

orderDetail

ref

price (obligatoire à l’envoi d’un order detail)

quantity

comment

category

brand

subcategory1

subcategory2

additionalData

taxRate

orderDetail

ref

buyer

shippingAddress

title

 
name  

lastName

 

firstName

 

street1

 

street2

 

cityName

 

zipCode

 

country

 

phone

 

state

 

county

 

phoneType

 

billingAddress

title

 

name

 

lastName

 

firstName

 

street1

 

street2

 

cityName

 

zipCode

 

country

 

phone

 

state

 

county

 

phoneType

 

 

 

Il est nécessaire de contrôler systématiquement le montant pris en compte pour la transaction.

Ce montant est disponible dans le champ payment.amount de la réponse à la fonction getWebPaymentDetails(). 

Par mesure de sécurité, cette fonction n'est pas activé par défaut. Si vous souhaitez l'activer, il vous faut cocher l'option J'accepte les mises à jour du contenu d'une commande, de l'adresse de facturation, de l'adresse de livraison et du montant du panier dans l'écran de configuration de votre point de vente, partie Canal Pages Web de Paiement.

Liste des navigateurs compatibles

Le tableau ci-dessous liste les navigateurs qui sont compatibles avec les modes Lightbox et Intégré. Si un navigateur avec une version inférieure est détectée, le mode redirection est automatiquement utilisé pour afficher la page de paiement au consommateur.

 
Chrome >=28
Chrome Mobile >=28
Firefox >=31
Firefox Mobile >=31
Internet Explorer >=9
Internet Explorer Mobile >=9
Safari >=6
Safari Mobile >=6
Opera >=24
Opera Mobile >=22
Android Browser >=4

Liste des moyens de paiement disponibles

Le tableau ci-dessous liste les moyens de paiements disponibles avec les modes Lightbox et Intégré. Tous les autres moyens de paiement sont disponibles avec le mode Redirection

CB Carte Bancaire, Visa, Mastercard  
MCVISA Visa, Mastercard  
AMEX American Express paiement comptant et en N fois
AMEX REC American Express Smartbill  
1EURO.COM 1EURO.COM  
3xCB 3xCB Cofidis  
3xONEY 3xCB Oney  
BCMC Bancontact Mistercard Cartes co-brandée Maestro et cartes domestiques
ELV ELV  
GIROPAY Giropay  
IDEAL IDEAL  
MAESTRO Maestro  
MASTERPASS Masterpass un problème est identifié sur ce moyen de paiement
PAYLIB Paylib  
PAYPAL PayPal  
POSTFINANCE Postfinance  
SOFORT Sofort  
JCB JCB sans le dispositif JSecure
CA_DO_CARTE CadoCarte  
CDGP CDGP Cofinoga  
COFINOGA Cofinoga  
CYRILLUS Carte Cyrillus Finaref  
DINERS Diners  
DISCOVER Discover  
FNAC Carte FNAC Finaref  
ILLICADO ILLICADO  
KANGOUROU Carte Kangourou Finaref  
KLARNA KLARNA invoice  
LEETCHI LEETCHI  
LYDIA LYDIA  
MONEYCLIC Moneyclic  
NEOSURF Neosurf  
NETELLER Neteller  
P24 Przelewy 24  
PAYSAFECARD Paysafecard  
PRINTEMPS Carte Printemps Finaref  
SDD SDD via Slimpay
SPIRIT_OF_CADEAU Spirit of Cadeau  
TICKETSURF TicketSurf  
TOTAL GR Carte Total GR  
YANDEX Yandex wallet  
SWITCH SWITCH  
BOLETO BOLETO BANCARIO  

 

Vous avez d’autres questions ? Envoyer une demande

Commentaires

  • Avatar
    Nicolas Mollet

    Les liens vers les images sont brisés, est-il possible de les réparer pour aider à la compréhension de ces fonctions ?
    Merci

  • Avatar
    Nicolas Guy

    Bonjour,

    Merci pour votre retour : les liens sont rétablis.

  • Avatar
    Nicolas Mollet

    Merci !

  • Avatar
    Nicolas Mollet

    Question : ce mode de paiement intégré est apparemment disponible dans le module Magento, est-il prévu pour les autres modules, par exemple Prestashop, Woocommerce ?

  • Avatar
    Nicolas Guy

    Bonjour,
    Pour les questions techniques, je vous invite à contacter le support en créant un ticket ou simplement en envoyant un e-mail à support@payline.com.

  • Avatar
    Benoit Basillais

    Bonjour,
    Lorsque j’intègre en mode Lightbox, une erreur intervient dans la fenêtre en superposition : "Une erreur est survenue, veuillez réessayer."
    Je suis en environnement de : Homologation. Dois-je modifier des paramètres dans mon environnement d'homologation? Merci pour vos réponses.

  • Avatar
    Nicolas Guy

    Bonjour,
    Je vous invite à transmettre au service support (support@payline.com) les éléments permettant de diagnostiquer le problème : identifiant commerçant, identifiant transaction, erreur rencontrée, etc.

  • Avatar
    Nicolas Mollet

    Le mode de paiement ApplePay est il compatible avec le paiement intégré ? Merci

Réalisé par Zendesk