Personalizar o botão "Pagar"
O botão de pagamento é automaticamente adicionado no seu formulário a partir do código seguinte:
<!-- payment form submit button -->
<button class="kr-payment-button"></button> <!-- payment form submit button -->
<button class="kr-payment-button"></button>Há múltiplas vantagens em usar nosso botão de pagamento:
- Os labels são traduzidos automaticamente
- O valor é automaticamente formatado e atualizado
- PayZen gerencia a animação do aguarde
- O botão passa automaticamente em read-only se for necessário
É perfeitamente possível sobrescrever o botão de pagamento executando a :
Personalizar o ícone
Se você quiser gerenciar sozinho o label do botão, basta adicioná-lo da forma seguinte:
<button class="kr-payment-button">Custom label</button>
Você pode também inserir uma variável que representa o valor e a moeda. O cliente JavaScript realizará automaticamente a substituição:
<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>
Personalizar a cor
O botão "Pagar" está colocado no recipiente <div class="kr-embedded">. O estilo do botão "Pagar" é definido pela classe kr-payment-button.
Para substituir a cor do botão “Pagar”, recomendamos definir o novo estilo do tag <HEAD> da sua página de pagamento, logo depois do download do tema e do código Javascript.
Segue um exemplo usando a regra 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>