Présentation

Avec de mode d'intégration, les commerçants peuvent intégrer le bouton Payer en amont du parcours d'achat, directement sur le catalogue ou le panier au lieu de mettre en bouton sur la dernière étape de paiement.

Avec ce moyen de paiement, le consommateur évite les étapes de login/création de compte, choix de l’adresse de livraison, choix et saisie des informations carte de paiement.

Payline récupère les données du partenaire fast CheckOut et les transmets au commerçant.

Le parcours normal sans FCO :

Le parcours avec le FCO :

Les moyens de paiement disponibles sont : VisaCheckOut, PayPal Express CheckOut, et bientot ApplePay, AndroidPay et AmazonPay.

Intégration

Pour intégrer ce mode de paiement, vous devez vérifier si le contrat est bien enrollé chez l'acquéreur et configuré.

Ensuite vous devez intégrer le mode widget sur la page du panier :

  1. Initialisation du paiement : depuis votre SI vous devez utiliser la fonction doWebPayment de l'API Web Payment pour initialiser un paiement sur les pages de paiement Payline.
      Vous devez récupérer le jeton de session dans le paramètre tokenpayline de l'url de retour Payline.

  2. Sur la page de paiement : ajouter d'un script widget-min.js et d'une balise <DIV> avec le paramètre fastcheckout dans le corps de votre page web :
      Avec cette balise Payline affiche le bouton Fast CheckOut du moyen de paiement avec le widget en data-template="fastcheckout".

<script src="https://homologation-payment.payline.com/scripts/widget-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://homologation-payment.payline.com/styles/widget-min.css" charset="utf-8">

     Rajouter le div fastcheckout de Payline avec le data-token est le jeton de session obtenu dans la réponse à la demande d'initialisation d'un paiement (doWebPayment).

<div id="PaylineWidget" data-token="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 
                        data-template="fastcheckout" 
                        data-event-didshowstate="widgetStateCallback" 
                        data-embeddedredirectionallowed="true" style="float: right; display: block;"
                        class="PaylineWidget pl-layout-inline pl-container-default">

<div id="pl-container-default-view" class="pl-container-view">

  3. Sur la page de paiement, A l'affichage d'un contexte PAYMENT_TRANSITIONAL_FAST_CHECKOUT via le callback data-event-didshowstate du payload.
      Le widget a récupéré son état auprès du serveur et a affiché le résultat.

<script>
   function widgetStateCallback(state) {
      if (state.state === "PAYMENT_TRANSITIONAL_FAST_CHECKOUT") {
         window.location.href="./paiementfastcheckout.php?token=" + Payline.Api.getToken();
      }
   }
</script>

  4. Le SI Commerçant récupère l'adresse de livraison et des données acheteur via Payline.Api.getBuyerFastCheckout()

      Ces informations pourront être afficher pour proposer à l'utilisateur de les modifier / de choisir un mode de livraison

      Puis l'utilisateur doit renseigner une donnée (ex. CVV pour VCO) ou il valide le paiement en utilisant le bouton Payer de Payline.

      Si le commerçant propose VisaCheckOut et Paypal CheckOut alors il est nécessaire de delocaliser le bouton Payer en le masquant alors le SI Commerçant appelle la fonction Payline.Api.finalizeFastCheckout()