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.

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

• ILLICADO
• CARTE CADEAU YVES ROCHER 

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
• Carte Cadeau Yves Rocher (qui sera l'onglet groupé)
• ILLICADO (qui sera l'onglet groupé)

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, Carte Yves Rocher, Illicado. 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(['CarteYR', 'ILLICADO'], 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">

Logo

Vous devez personnaliser le logo avec l'url du logo à placer dans l'onglet du premier moyen de paiement à regrouper : 
Par exemple :  var newLogoUrl = 'regroup.png';

Template

Voici un exemple pour l'environnement d'homologation : TemplateV10.html