• Francia
Back Office Vendedor
asistencia
FAQcontacte el soporte tecnico
Buscar
Categoria
Tags
Colombia
Colombia
Página principal
Casos de uso
Crear un pago
Crear un pago en cuotas
Crear un pago por token
Crear un enlace de pago
Crear una suscripción
Gestione sus suscripciones
Gestione sus transacciones
Analizar los diarios
Docs API
Formulario incrustado
API REST
API REST PCI-DSS
Formulario en redirección
Pago móvil
Intercambio de ficheros
Ejemplo de código
Medios de pago
Módulos de pago
Guías Back Office

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
  • Personalización del color

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.payty.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
        kr-public-key="75139133:testpublickey_ZuDr19h0oFCU0zZWEGhXogkqn5JOBC3sgzU17FRCTz2OH:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5">
    </script>

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.payty.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
    <script type="text/javascript" src="https://static.payty.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>
© 2025 Todos los derechos reservados de Payty
25.17-1.11