Personnalisation des boutons de paiement

Le bouton : "Payer"

Le bouton de paiement est automatiquement ajouté dans votre formulaire à partir du code suivant :

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L78-L79

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

1. Personnalisation du label

Choisissez le label de votre choix.

Dans cet exemple, le bouton se nomme Custom label

<button class="kr-payment-button">Custom label</button>

Vous pouvez également insérer une variable pour afficher le montant et la devise.

<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>

2. Personnalisation de la couleur

Pour surcharger la couleur du bouton Payer, il est recommandé de définir le nouveau style dans la balise HEAD de votre page de paiement.

Insérez votre code juste après le chargement du thème et du code JavaScript.

Utilisez la règle css !important.

Exemple de code

<head>
    <!-- Javascript library. Should be loaded in head section -->
    <script type="text/javascript"
        src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon.js"></script>
    
    <!-- Overrride payment button background green color -->
    <style type="text/css">
      .kr-smart-form .kr-payment-button {
     background-color: #00D152 !important; 
      } 
    </style>
</head>
<body>
    ...
</body>

Les boutons des moyens de paiement compatibles

1. Personnalisation de la couleur

Utilisez le DOM pour connaître la classe du moyen de paiement à personnaliser.

Pour Apple Pay

La classe à surcharger est la suivante : .kr-smart-form .kr-apple_pay

Utilisez à la règle css !important.

<head>
    <!-- Javascript library. Should be loaded in head section -->
    <script type="text/javascript"
        src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon.js"></script>
    
    <!-- Overrride Apple Pay button background color -->
    <style type="text/css">
      .kr-smart-form .kr-apple_pay  {
     background-color: #00D152 !important; 
      } 
    </style>
</head>
<body>
    ...
</body>

Pour PayPal

La classe à surcharger est la suivante : .kr-smart-form .kr-paypal

Utilisez la règle css !important.

<head>
    <!-- Javascript library. Should be loaded in head section -->
    <script type="text/javascript"
        src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon.js"></script>
    
    <!-- Overrride PayPal button background color -->
    <style type="text/css">
      .kr-smart-form .kr-paypal  {
     background-color: #00D152 !important; 
      } 
    </style>
</head>
<body>
    ...
</body>

2. Personnalisation du label et de l'icône

Personnalisez le label et l'icône des boutons de moyens de paiement compatibles, grâce au code suivant :

<script type="text/javascript">
  KR.onFormReady(function () {
         KR.setFormConfig({
          smartForm: {
              paymentMethods: {
                  "[NAME]": {
                      label: "[CUSTOM_NAME]",
                      icon : "[SRC_PICTURE]",
                  }
              }
        },
        });
      });
</script>

Utilisez les méthodes KR.onFormReady et KR.setFormConfig, dans le header de votre page de paiement (pour plus de détails, consultez les fonctions JS).

Intégrez les données suivantes :

Attribut	Description	Format
"[NAME]"	Sélectionne le moyen de paiement ( lien vers le tableau des moyens de paiement)	Chaîne de caractères.
"[CUSTOM_NAME]"	Change le label du moyen de paiement	Chaîne de caractères.
"[SRC_PICTURE]"	Change l'icône du moyen de paiement	Image encodée en base64, en png, jpg, svg (URL absolue) ou un lien externe CDN.

Illustration pour personnaliser le moyen de paiement Virement SEPA

Utilisez la valeur IP_WIRE avec l'attribut paymentMethods pour choisir le moyen de paiement Virement SEPA.
Modifiez le label par Payment by bank transfer.
Changez l'icône par un lien externe CDN.

Exemple de code :

<script type="text/javascript">
  KR.onFormReady(function () {
         KR.setFormConfig({
          language:'en',
          smartForm: {
              paymentMethods: {
                  "IP_WIRE": {
                      label: "Payment by bank transfer",
                      icon : "https://img.icons8.com/external-wanicon-lineal-wanicon/64/null/external-bank-money-exchange-wanicon-lineal-wanicon.png",
                  },
              }
        },
        });
      });
</script>

Catégories

Tags