Personalización del botón "Pagar"
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
<!-- payment form submit button -->
<button class="kr-payment-button"></button> <!-- payment form submit button -->
<button class="kr-payment-button"></button>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-embedded .kr-payment-button {
background-color: #00D152 !important;
}
</style>
</head>
<body>
...
</body>