PW - Ajout d'un moyen de paiement non géré par Payline

Vous souhaitez proposer à vos clients un moyen de paiement que vous gérez vous même, par exemple une carte de fidélité propre à votre enseigne.

L'attribut additionnel data-custompm que vous pouvez utiliser dans la balise <div> permet de personnaliser l'affichage du formulaire.
Par exemple, si vous ne souhaitez pas que le formulaire de paiement s'affiche automatiquement lors de l'affichage de votre page :

Paramètre	Description	Exemple
data-custompm	Le nom de la fonction javascript qui va générer le formulaire du moyen de paiement non géré par Payline	maFonctionJavascript

Cette fonction est appelée durant le processus d’initialisation du Widget, donc soit au onload du body, soit à l’appel de Payline.Api.init() si data-auto-init="false" a été spécifié.

La fonction doit retourner un tableau d’objet, chacun de ces objets représentant un moyen de paiement.
Dans chacun de ces objets, on doit retrouver les attributs obligatoires suivants :

paymentMethodId : chaine de caractère destinée à identifier le moyen de paiement. Cette chaine, après avoir subi un lowercase, sera utilisée concaténée dans des id HTML, et doit donc respecter les normes associées. Utile pour appliquer du CSS à votre
html : chaine de caractère qui sera injecté dans le formulaire. Libre à vous de réutiliser ou non la structure HTML et les classes CSS que nous utilisons pour les moyens de paiement gérés par l’API.

Un attribut facultatif index (type numérique) peut aussi être spécifié pour insérer votre moyen de paiement au sein de la liste qui a été donnée lors du doWebPayment. Si index est absent, le moyen de paiement sera rajouté à la fin de la liste de moyens de paiement existante.

Par exemple, la fonction JavaScript suivante va ajouter un moyen de paiement personnalisé dont le formulaire sera composé d'un input simple ainsi que d'un bouton.

[id*="mycustompm"] span.pl-card-logo {
	background:none; width: auto;
}
[id*="mycustompm"] span.pl-card-logo::before {
	content:"Mon moyen de paiement";
}

Pour personnaliser le logo qui sera généré automatiquement par le script Payline, vous pouvez utiliser du CSS. Parce que le script Payline utilise le champ paymentMethodId de votre moyen de paiement personnalisé pour construire les identifiant HTML des éléments qui composeront votre moyen de paiement personnalisé, il est facile de cibler le logo avec des sélecteurs CSS.

Exemple de fonction addPaymentMethod() permettant d'ajouter un moyen de propre au commerçant :

<!DOCTYPE html>
<html>
<head>

<script>
function addPaymentMethod() {
            return [
                    {
                    "index": 2, // Index of the payment method in the list
                    "paymentMethodId":"myCustomPaymentMethod", // CSS classes ID (mandatory and unique) 
                    "html":'<div id="pl-pmLayout-column-pmForm-custom-2" class="pl-pmForm" style="display: block;">
                            <div id="pl-pm-custom_5-view" class="pl-paymentMethod-view pl-clear-after">
                            <p id="pl-pm-custom_5-message" class="pl-message"/><div id="pl-pm-custom_5-formContainer" class="pl-form-container pl-hide-labels">
                            <div id="pl-pm-custom_5-accountContainer" class="pl-form-group pl-has-feedback pl-accountContainer pl-clear-after">
                            <p id="pl-pm-custom_5-account_message" class="pl-message"/>
                            <div class="pl-input-group-container">
                            <div class="pl-input-group pl-input-container">
                            <input id="pl-pm-custom_5-account" class="pl-input" placeholder="Numéro de carte">
                            <span id="pl-pm-custom_5-feedbackAccount" class="pl-glyphicon pl-input-feedback" aria-hidden="true"/>
                            </div>
                            <span class="pl-form-control-addon pl-icon-credit-card"/>
                            </div> 
                            </div><button id="pl-pm-custom_5-payBtn" class="pl-pay-btn" type="button" onclick="customPayment()">Payer</button>
                            </div></div></div>' 
                            // HTML code of your payment method (mandatory)
                    }
                ];
        }
</script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">

    <script src="https://webpayment.dev.payline.com/payline-widget/scripts/widget-min.js" charset="utf-8"></script>
    <link type="text/css" rel="stylesheet" href="https://webpayment.dev.payline.com/payline-widget/styles/widget-min.css">

</head>
  <body>
  <img src="http://www..../.../Pictuer.jpg"/>
      <div id="PaylineWidget" data-token="1NwjfdazLge56S9879879879759911945" 
	  data-custompm="addPaymentMethod"
  	  data-template=""<!-- column, lightbox ou tab -->  
	  />
	     
  </body>
</html>

Arborescence des pages

PW - Ajout d'un moyen de paiement non géré par Payline