Présentation

Cette fonctionnalité n'est disponible qu'en mode onglet (le data-template="tab") en version 4.57.1
Le script ci-dessous permet de regrouper des moyens de paiement dans un même onglet, simplement en citant leur numéro de contrat.

Le message "Veuillez sélectionner le moyen de paiement souhaité" a été ajouté afin d'indiquer à l'utilisateur quoi faire. Ce message est personnalisable et se trouve dans le javascript fourni plus bas.

Capture d'écran sur mobile  :

Dans notre exemple nous avons regroupé les 3 contrats suivants :

• ILLICADO
• CHANEL (qui correspond au moyen de paiement CADEAU_CHANEL)
• CADEAU-CARREFOUR-V2 (qui correspond au moyen de paiement CARREFOUR_CADEAU

L'ordre des onglets dépend de l'ordre du doWebPayment, et de l'ordre dans la configuration de la variable ci-dessus.
Le premier contrat qui sera cité dans la variable sera celui qui contiendra tous les moyens de paiement cités. Il faut donc le placer dans un ordre précis dans le DoWebPayment.

Dans notre exemple l'ordre dans le doWebPayment est le suivant :

• CB
• ILLICADO (qui sera l'onglet groupé)
• PAYPAL

Comment mettre en place la solution ?

Pour l'onglet qui contient les moyens de paiement regroupés, il faut définir un logo par le biais de 3 arguments : l'url, la largeur et la hauteur.
Il faut importer un javascript supplémentaire dans votre page (ou dans votre template pour les intégrations en Mode Redirection - Page Web de Paiement Version 2) :

Lors du doWebPayment, il vous suffit d'alimenter la balise SelectContractList avec les contrat CB, Paypal, Illicado, Chanel, CadeauCarrefour. La fonction de regroupement se chargera de les regrouper dans le même onglet.

Ce javascript est un plugin qui expose une fonction "regroup" qui permet de regrouper des onglets ou des encarts  de moyen de paiement, ici, il faut surveiller l'état du Widget et donc appeler la fonction lorsqu'on est dans un état "PAYMENT_METHODS_LIST" (voir la callback data-event-didshowstate dans PW - Intégration Widget) :

// Dans la callback de changement d'état, on appelle la fonction regroup quand on est dans un état PAYMENT_METHODS_LIST
function customPaymentMethodList(state) {
	if (state.state === "PAYMENT_METHODS_LIST" || state.state === "PAYMENT_NEEDS_MORE_INFOS" || state.state === "FRAGMENTED_PAYMENT_IN_PROGRESS") {
		Payline.Plugins.Regroup.regroup(['ILLICADO', 'CHANEL', 'CADEAU-CARREFOUR-V2'], regroup.png, 40, 25);
	}
}

Ensuite il faut citer cette callback customPaymentMethodList dans la déclaration de votre div PaylineWidget :

<div id="PaylineWidget" data-template="tab" data-event-didshowstate="customPaymentMethodList">

Exemple de page web

Voici le résultat final :