Arborescence des pages

Vous regardez une version antérieure (v. /display/DT/PW+-+Personnalisation+du+widget+%3A+Fonction+CallBack) de cette page.

afficher les différences afficher l'historique de la page

« Afficher la version précédente Vous regardez la version actuelle de cette page. (v. 9) afficher la version suivante »

Callback du cycle de vie

Les fonctions de personnalisation du Widget en mode lightbox et en mode in-shop (tab/colonne).

Pour que le commerçant puisse suivre l'évolution du widget dans sa page, Payline propose des Callback. Ces Callback seront appelées par le widget au fil de son exécution de manière synchrone.

Pour utiliser ces Callback, le marchant utilise le mécanisme habituel de paramétrage du widget, les attributs data-* dans la div PaylineWidget. La valeur passée doit correspondre à une fonction JavaScript classique, déclarée dans le scope Window, comme dans l'exemple suivant :

<html>
	<head>
		<!-- Import du widget, etc. -->
		<script>
			function maFonction() {
				// Actions à réaliser
			}
		</script>
	</head>
	<body>
		<div id="PaylineWidget" data-token="123" data-event-nomdeletape="maFonction"/>
	</body>
</html>

Dans l'exemple précédent, la fonction "maFonction" sera appelée lorsque le cycle de vie du widget aura atteint l'étape "nomdeletape".


Les étapes pour lesquelles il est possible de spécifier un Callback sont les suivantes :

Identifiant de la callbackDescriptionInformations passéesRetour possibleDepuis
data-event-willinitLe widget s'est chargé sur le navigateur et s'apprête à s'initialiser.AucuneNon4.46.1
data-event-willshowLe widget a réalisé sa première initialisation et s'apprête à s'afficher. Cet événement survient avant que le widget ait récupéré son état auprès du serveur.AucuneNon4.46.1
data-event-finalstatehasbeenreachedLe widget va afficher à l'utilisateur un état final (où plus aucune interaction n'est possible) à l'acheteur.

Le nom de l'état atteint.

Exemple d'objet passé:

{
	state: "PAYMENT_SUCCESS"
}

Voir § suivant pour toutes les valeurs possibles

Oui.

Si la callback du marchand retourne

false

alors le widget ne gérera pas le nouvel état.

4.46.1
data-event-didshowstateLe widget a récupéré son état auprès du serveur et a affiché le résultat.

Le nom de l'état qui s'est affiché

Exemple d'objet passé:

{
	state: "PAYMENT_METHODS_LIST"
}

Voir § suivant pour toutes les valeurs possibles

Non4.49
data-event-willdisplaymessageGestion de l'affichage du message

La callback pourra prendre en argument un objet complexe de la forme :

{ id: [l'id du champ message], type: [le type de message (voir les 
valeurs possibles), key: [la clé du message à afficher (voir les valeurs
 possibles)], message: [le message] }

Valeurs possibles pour le "type" :
success, info, error, warn.

  • TRUE : le comportement du widget n'est pas modifié, i.e. le widget affichera quand même le message
  • FALSE : le comportement du widget est impacté, le widget n'affichera pas le message
4.50
data-event-willremovemessageGestion du retrait du message

La callback pourra prendre en argument un objet complexe de la forme :

{ id: [l'id du champ message] }
  • TRUE : le comportement du widget n'est pas modifié, i.e. le widget retirera quand même le message ;
  • FALSE : le comportement du widget est impacté, le widget ne retirera pas le message.
4.50
data-event-beforepayment

Événement lors du clic sur le bouton Payer, après la validation des données et avant que Payline réalise la transaction.

Ensuite Payline déclenche l'évènement finalStateHasBeenReached ?

L’événement pourra être déclenché plusieurs fois lors d'une session de paiement, par exemple lorsque l'acheteur clique sur le Wallet et qu'il doit de saisir le CVV et ensuite il clique une seconde fois sur Payer. Alors l'événement aura été déclenché deux fois. Le marchand doit donc pouvoir gérer l'idempotency de cet événement.

L'événement n'est pas déclenché lors d'un appel à Payline.Api.finalizeShortcut()

<div id="PaylineWidget"
    data-token="1fe9zY4eaJo0VPJSM1571456927334471"
    data-template="lightbox"
    data-event-beforepayment="myBusinessFunction">
</div>
<script>
    function myBusinessFunction()
{    -- Check values         
     -- Provisioning         
     -- If Provisioning OK return true         
     -- Return false     }
</script>
Non4.54.1
Valeurs possible pour "state"

L'ensemble des valeurs possibles pour la propriété "state" des objets passés en paramètre par les callback :

Identifiant de l'étatDescriptionFinalRelease
PAYMENT_METHODS_LISTLa session de paiement est valide et la liste des moyens de paiement est affiché.Non
PAYMENT_CANCELEDLa session a été invalidée à la demande du commerçant et un message d'échec est affiché.Oui
PAYMENT_SUCCESSLa session de paiement est terminée et un ticket est affiché.Oui
PAYMENT_FAILURELa session de paiement est terminée et un message d'échec est affiché.Oui
PAYMENT_FAILURE_WITH_RETRYLa session de paiement est terminée, un message d'échec est affiché accompagné d'un bouton proposant d'utiliser un autre moyen de paiement.Non
TOKEN_EXPIREDLa session de paiement est terminée, un message d'échec est affiché indiquant l'expiration de la session de paiement.Oui
BROWSER_NOT_SUPPORTEDLe navigateur est détecté comme incompatible, un écran propose à l'acheteur de basculer sur les pages de paiement classiques.Oui
PAYMENT_METHOD_NEEDS_MORE_INFOSLe moyen de paiement sélectionné par l’utilisateur indique qu’il faut confirmer des informations (cvv pour wallet, validation de dossier de crédit etc..).Non

PAYMENT_REDIRECT_NO_RESPONSE

La demande de paiement aboutie en demande de redirection (authentification 3DS, partenaire tel que Paypal).Non
MANAGE_WEB_WALLETÉquivalent PAYMENT_METHOD_LIST mais pour la gestion des portefeuilles.Non

ACTIVE_WAITING

Un paiement a été commencé et on attend de nouvelles informations pour continuer

Non

4.51

PAYMENT_CANCELED_WITH_RETRY

L'acheteur a annulé son paiement, soit via nos pages, soit via les pages d'un partenaire sur lequel il était redirigé  mais il a la possibilité de choisir un nouveau moyen de paiement

Non

4.51

PAYMENT_ONHOLD_PARTNER

Le moyen de paiement nous répondra plus tard, on indique à l'acheteur qu'il obtiendra la réponse de la part du commerçant

Oui

4.51

PAYMENT_SUCCESS_FORCE_TICKET_DISPLAY

L'acheteur a terminé son paiement avec succès, et la redircetion automatique est désactivée(affichage du ticket)

Oui

4.51

PAYMENT_METHODS_LIST_SHORTCUT

L'acheteur est sur la liste des MDP compatibles shortcut

Non

4.51

PAYMENT_TRANSITIONAL_SHORTCUT

L'état intermédiaire après une demande de shortcut (obtention des données acheteurs : buyer, shippingAddress, billingAddress via API JS)

Non

4.51

  • Aucune étiquette