Personalization of payment buttons.

Le bouton : "Payer"

The payment button is automatically added to your form using the following code:

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>

There are numerous benefits to using our payment button:

The labels are translated automatically.
The amount is automatically formatted and updated.
We handle the pending transition animation for you
The button automatically changes to read-only mode if necessary.

It is possible to override the payment button by proceeding to the:

Name personalization

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

You can also insert a variable that represents the amount and the currency.

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

Color customization

The style of the "Pay" button is defined by the kr-payment-button class.

To override the color of the "Pay" button, it is recommended to set the new style in the <HEAD> tag of your payment page, right after the theme and Javascript code are loaded.

Here is an example using the css rule !important.

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

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

Buttons for compatible payment methods

Customize the name and the icon of the buttons for compatible payment methods, using the code below:

<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).

Integrate the following data:

Attribute	Description	FORMAT
"[NAME]"	Sélectionne le moyen de paiement ( lien vers le tableau des moyens de paiement)	String of characters.
"[CUSTOM_NAME]"	Change the label of the payment method	String of characters.
"[SRC_PICTURE]"	Change the payment method icon	Image encoded in base64, in png, jpg, svg or an external CDN link.

Illustration for personalizing the SEPA Credit Transfer payment method

Use the valueIP_WIREwith the attributepaymentMethodsto choose the payment method.SEPA Credit Transfer.
Change the name to Payment by bank transfer.
Change the icon with an external CDN link.

. Code sample:

<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>