Principe

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 un bouton sur la dernière étape de paiement.

Avec ce type d'intégration, 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 ShortCut et les transmets transmet au commerçant.

Le parcours normal sans FCO :

Le parcours avec le FCO :

Les moyens de paiement disponibles sont : VisaCheckOut, PayPal Express CheckOut ShortCut, ApplePay et bientôt AndroidPay et AmazonPay.

Intégration

Pour intégrer ce mode de paiement, vous devez vérifier si le contrat est bien enrôlé 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. Cet appel ne doit comporter que des moyens de paiement compatibles ShortCut
      Vous devez récupérer le jeton de session dans le paramètre tokenpayline de l'url de retour Paylinenommé token dans la réponse du service comme une intégration Widget classique.

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

<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 la div PaylineWidget en template shortcut avec le jeton de session (data-token) obtenu dans la réponse à la demande d'initialisation d'un paiement (doWebPayment).

     Cette balise doit comporter la référence à la fonction callBack de gestion des états du widget, pour plus d'informations, voir la documentation API Callback. 

<div id="PaylineWidget" data-token="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 
                        data-template="fastcheckoutshortcut" 
                        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.Widget, il sera possible de récupérer les données acheteur (nom, prénom, adresse mail, ...) ainsi qu'à minima, son adresse de livraison.

Script à placer dans le panier :

<script>
   function widgetStateCallback(state) {
      if (state.state === "PAYMENT_TRANSITIONAL_FAST_CHECKOUT") {
		 <!-- on cache le widget -->
		 Payline.Api.hide();
		 <!-- redirection vers une page gérant l'édition d'adresse de livraison, le choix du mode livraison ...-->
         window.location.href="./paiementfastcheckout.php?token=" + Payline.Api.getToken();
      }
   }
</script>

      HTML et Script à placer dans dans la page "paiementfastcheckout" vers laquelle on a redirigé l'utilisateur précédemment :

<div id="paylineToReplace" class="pl-top">
	<h2 class="BdCn">> Modifier mes adresses</h2>
	<span>Prénom : #firstName#</span>
	<span>Nom : #lastName#</span>
	<span>Mail : #email#</span>
	<div class="pl-left">
		<h3>Adresse de facturation</h3>
		<div>
			<span>Adresse : #billingStreet1#</span>
			<span>Code postal : #billingZipCode#</span>
			<span>Ville : #billingCityName#</span>
			<span>Pays : #billingCountry#</span>
			<a href="#">Editer</a>
		</div>
	</div>
	<div class="pl-right">
		<h3>Adresse de livraison</h3>
		<div>
			<span>Adresse : #street1#</span>
			<span>Code postal : #zipCode#</span>
			<span>Ville : #cityName#</span>
			<span>Pays : #country#</span>		
			<a href="#">Editer</a>					
		</div>
	</div>
</div>

			<script>
			// Fonction parsant toutes les chaînes contenues entre des caractères #
			function parse(str) {
				return str.match(/#([^#]*)#/g);
			}
			
			// Fonction remplaçant toutes les chaines
			function replace(blockId) {
				// Récupération du tableau de toutes les chaines à remplacer de la div "main"
				var block = Payline.jQuery('#' + blockId);
				var stringArrayToReplace = parse(block.text());
				// Pour chaque élément du tableau on remplace avec les données fournies par le Widget
				var result = block.html();
				var buyerFCO = Payline.Api.getBuyerFastCheckout();
				for (i = 0; i < stringArrayToReplace.length; i++) {
					var hashedKey = stringArrayToReplace[i];
					var key = hashedKey.substring(1, hashedKey.length-1);
					result = result.replace(hashedKey,buyerFCO[key]);
				}
				block.html(result);
				block.show();
			}

			function widgetStateCallback(state) {
				if (state.state === "PAYMENT_TRANSITIONAL_FAST_CHECKOUT") {
					replace("paylineToReplace");
				}
			}
			</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 affichées pour proposer à l'utilisateur de les modifier / de choisir un mode de livraison

      L'utilisateur peut éventuellement être amené à renseigner une donnée (ex. CVV pour VCO) puis il valide le paiement en utilisant le bouton Payer de Payline.

      Si le commerçant propose VisaCheckOut avec d'autres moyens de paiement alors il est préconisé de délocaliser le bouton Payer en le masquant alors le SI Commerçant appelle la fonction Payline.Api.finalizeFastCheckout()

Feuille de style

Vous pouvez personnaliser la page de la même manière que le mode widget.