Personalizar el botón "Pagar
El botón de pago se agrega automáticamente a su formulario a partir del siguiente código:
<!-- 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:
Personalizar la etiqueta
Si desea administrar la etiqueta del botón usted mismo, solo agréguelo de la siguiente manera:
<button class="kr-payment-button">Custom label</button>
También puede insertar una variable que represente el monto y la moneda. El cliente JavaScript cancelará automáticamente el reemplazo:
<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>
Personalizar el color
El botón “Pagar” se encuentra en el contenedor 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.
He aquí 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/classic-reset.min.css">
<script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js"></script>
<!-- Overrride payment button background color -->
<style type="text/css">
.kr-embedded .kr-payment-button {
background-color: #00D152 !important;
}
</style>
</head>
<body>
...
</body>