Personalização dos botões de pagamento

Le bouton : "Payer"

O botão de pagamento é automaticamente adicionado no seu formulário a partir do código seguinte:

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>

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 :

Personalização do ícone

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

Você pode também inserir uma variável que representa o valor e a moeda.

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

Personalização da cor

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 que usa 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/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>

Botões para métodos de pagamento compatíveis

Personalize o ícone dos botões de meios de pagamento compatíveis com o código seguinte:

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

Integre os seguintes dados:

Atributo	Descrição	FORMATO
"[NAME]"	Sélectionne le moyen de paiement ( lien vers le tableau des moyens de paiement)	String de caracteres.
"[CUSTOM_NAME]"	Muda o label do meio de pagamento	String de caracteres.
"[SRC_PICTURE]"	Muda o ícone do meio de pagamento	Imagem codificada em base64 em png, jpg, svg ou um link CDN externo.

Ilustração para personalizar o meio de pagamento por Transferência SEPA

Use o valorIP_WIREcom o atributopaymentMethodspara escolher o meio de pagamento.Transferência SEPA.
Altere o label para Payment by bank transfer.
Troca o 'ícone para um link CDN externo.

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