Sommaire | ||||
---|---|---|---|---|
|
Présentation
Avec de mode d'intégration, les commerçants peuvent intégrer le bouton directement sur le panier lors de la première étape de paiement 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.
Le parcours avec le FCO :
Le parcours normal sans FCO :
Les moyens de paiement disponibles sont : VisaCheckOut, PayPal, 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é.
Vous Ensuite vous devez intégrer le mode widget sur la page du panier :
Initialisation1. 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.
Ajout2. 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 :
Payline va se servir de
Avec cette balise
Payline affiche le bouton
FCOFast CheckOut du moyen de paiement avec le widget en data-template="fastcheckout".
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
<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"> |
initFastCheckout ?
3. 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.
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
<script>
function widgetStateCallback(state) {
if (state.state === "PAYMENT_TRANSITIONAL_FAST_CHECKOUT") {
window.location.href="./paiementfastcheckout.php?token=" + Payline.Api.getToken();
}
}
</script> |
Le data-token est le jeton d'authentification obtenu dans la réponse à la demande d'initialisation d'un paiement (doWebPayment).
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
<div id="PaylineWidget" data-token="1Z5N4rzFZtqbBar9l2741507110660880" 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"> |
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
<img id="pl-pm-vcofc_3-v-button" class="v-button" role="button" alt="Visa Checkout" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png?locale=fr&size=154&color=standard&cobrand=false&animation=false" style="cursor: pointer; transition-property: filter; transition-duration: 0.25s; filter: brightness(1);" tabindex="0" data-src="https: |
//sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png?locale=fr&size=154&color=standard&cobrand=false&animation=false"> |
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
<div id="PaylineWidget" data-template="fastcheckout"
data-token=""
data-auto-init="false"
data-event-didshowstate="widgetStateCallback">
</div> |
Récupération de l'adresse de livraison et des données acheteur via Payline.Api.getBuyerFastCheckout();
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
Potentiellement afficher ces adresses pour proposer à l'utilisateur de les modifier / de choisir un mode de livraison
Une fois les adresses modifiées etc... Soit l'utilisateur doit renseigner une donnée (ex. CVV pour VCO) soit il valide le paiement => appel à la fonction Payline.Api.finalizeFastCheckout(); (si le commerçant cache le bouton) ou l'utilisateur peut cliquer sur le bouton payer. Payline.