Personalización de los botones de pago

Le bouton : "Payer"

El botón de pago se agrega automáticamente a su formulario a partir del siguiente código:

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

Hay varias ventajas al usar nuestro botón de pago:

Las etiquetas se traducen automáticamente
El monto se formatea y actualiza automáticamente
Nos encargamos de la animación de espera en su lugar
El botón cambia automáticamente a solo lectura (read-only) si es necesario.

Puede sobrescribir el botón de pago procediendo a la:

Personalización de la etiqueta

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

También puede insertar una variable que represente el monto y la moneda.

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

Personalización del color

El estilo del botón “Pagar” está definido por la clase kr-payment-button.

Para sobrescribir el color del botón "Pagar" se recomienda definir el nuevo estilo en la etiqueta <HEAD> de su página de pago inmediatamente después de cargar el tema y el código JavaScript.

Se adjunta un ejemplo usando la regla CSS !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>

Botones para métodos de pago compatibles

Personalice la etiqueta y el ícono de los botones de los medios de pago compatibles con el siguiente código:

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

Integra los siguientes datos:

Atributo	Descripción	Formato
"[NAME]"	Selecciona el modo de pago (enlace a la tabla de modos de pago )	Cadena de caracteres.
"[CUSTOM_NAME]"	Cambiar la etiqueta del método de pago	Cadena de caracteres.
"[SRC_PICTURE]"	Cambiar el ícono del método de pago	Imagen codificada en base64, en png, jpg, svg o un enlace CDN externo.

Ilustración para personalizar el modo de pago por Transferencia SEPA

Utilice el valorIP_WIREcon el atributopaymentMethodspara elegir un modo de pago.Transferencia SEPA.
Cambie la etiqueta a Payment by bank transfer.
Cambie el ícono por un enlace CDN externo.

. Ejemplo de código:

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