• France
état des services
démonstrations
assistance
FAQContacter le support
Video tutorials
Rechercher
Catégories
Tags
Français
Français
Anglais
Accueil
Cas d'usage
Créer un paiement
Créer un paiement en plusieurs fois
Proposer un paiement complémentaire
Créer un paiement par alias (token)
Créer un lien de paiement
Créer un paiement à l'expédition
Créer un abonnement
Gérer vos abonnements
Gérer vos transactions (rembourser,...)
Analyser vos journaux
Docs API
Formulaire embarqué
API REST
Formulaire en redirection
Intégration mobile
Échange de fichiers
Exemples de code
Moyens de paiement
Modules de paiement
Guides
Back Office Marchand
Guides fonctionnels

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.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="42229744:testpublickey_tPXxrUVsoGkggk9LuO8o0PBRdWg8jWUhWmYMURwCbc8ap:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.scelliuspaiement.labanquepostale.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.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="42229744:testpublickey_tPXxrUVsoGkggk9LuO8o0PBRdWg8jWUhWmYMURwCbc8ap:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.scelliuspaiement.labanquepostale.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.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="42229744:testpublickey_tPXxrUVsoGkggk9LuO8o0PBRdWg8jWUhWmYMURwCbc8ap:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.scelliuspaiement.labanquepostale.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>
© 2025 Tous droits réservés à Scellius
25.18-1.11