Adicionar campos personalizados ao seu formulário

Para inserir um campo personalizado no formulário de pagamento, basta adicionar os tags HTML padrões na div kr-embedded :

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.custom.fields.php#L75-L97

  <!-- payment form -->
  <div class="kr-embedded" kr-form-token="<?php echo $formToken;?>">

   <!-- custom text field -->
   <input type="text"
          name="acme-email"
          placeholder="email"
          class="kr-theme"
          kr-icon="fas fa-envelope"
          required/>

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>  

    <!-- custom checkbox field -->
    <input type='checkbox'
           name='acme-terms'
           label="add me to your mailing list" 
           class="kr-theme"
           required/>

    <!-- custom hidden field -->
    <input type='hidden'
           name='acme-hidden'
           value='my hidden value'/>

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>  
</body>
</html>

Este exemplo de código vai inserir :

um campo email obrigatório como 1° campo do formulário
uma caixa para assinalar obrigatória no final do formulário
um campo oculto

Quando realizar o pagamento, estes campos personalizados serão adicionados nos parâmetros POST enviados ao Estabelecimento Comercial:

{
  "kr-hash": "a8bbe12b1562696677a2bd93ce04d676e4aba47e538cb97abb8b8ad2b418cb08",
  "kr-hash-algorithm": "sha256_hmac",
  "kr-answer-type": "V4\/Payment",
  "kr-answer": "{...}",
  "acme-email": "hello@email.acme",
  "acme-terms": "true",
  "acme-hidden": "my hidden value"
}

Validação HTML5

Você pode adicionar as diretivas de validação de HTML5 ao seu campo personalizado:

Os erros de validação são tratados da mesma forma que os erros dos campos de formulário:

as validações serão aplicadas localmente,
os erros serão exibidos na área de erro do formulário,
o callback de gerenciamento de erro definido a partir de KR.onError() é compatível,
o tema será aplicado automaticamente.

Até o momento, as diretivas de HTML5 compatíveis são:

Diretiva	Descrição
required	O campo é obrigatório.

Quando um campo obrigatório for enviado vazio, a biblioteca JavaScript determina um erro de tipo CLIENT_304.

Temas e CSS

Os campos adicionais usam os CSS padrões do seu site. Pode-se aplicar automaticamente o tema do fomulário de pagamento adicionando a classe kr-theme ao elemento:

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.custom.fields.php#L79-L85

   <!-- custom text field -->
   <input type="text"
          name="acme-email"
          placeholder="email"
          class="kr-theme"
          kr-icon="fas fa-envelope"
          required/>

A adição de kr-theme permite aplicar automaticamente:

o tema padrão do formulário de pagamento
o gerenciamento dos erros (animações, cores) no campo.

Ícones personalizados

Você pode adicionar ícones personalizados nos campos adicionais graças ao parâmetro kr-icon :

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.custom.fields.php#L79-L85

   <!-- custom text field -->
   <input type="text"
          name="acme-email"
          placeholder="email"
          class="kr-theme"
          kr-icon="fas fa-envelope"
          required/>

Ícones Font-Awesome também são suportados. Você deve baixar previamente a biblioteca no seção da sua página:

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.custom.fields.php#L68-L71

  <!-- include font awesome for custom fields icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
        crossorigin="anonymous">

Outras bibliotecas serão adicionadas nas versões futuras.

Tabulação

Você pode também controlar a ordem das tabulções adicionando o parâmetro kr-tab-order :

<div class="kr-embedded" kr-form-token="<?php echo $formToken;?>">

        <!-- custom fields -->
        <input type="text"
                name="acme-email"
                placeholder="email"
                class="kr-theme"
                kr-icon="fas fa-envelope"
                kr-tab-order="1"
                required/>

        <!-- payment form fields -->
        <div class="kr-pan" kr-tab-order="2"></div>
        <div class="kr-expiry" kr-tab-order="3"></div>
        <div class="kr-security-code" kr-tab-order="4"></div>

        <!-- payment form submit button -->
        <button class="kr-payment-button"></button>

        <!-- error zone -->
        <div class="kr-form-error"></div>
</div>

Este parâmetro não é necessário quando um campo adicional estiver presente.

Valor por défault

Você pode também definir o valor por default ao adicionar o atributo html value :

<div class="kr-embedded" kr-form-token="<?php echo $formToken;?>">

        <!-- custom fields -->
        <input type="text"
                name="acme-email"
                placeholder="email"
                class="kr-theme"
                kr-icon="fas fa-envelope"
                value="mail@example.com"
                required/>

        <!-- payment form fields -->
        <div class="kr-pan" kr-tab-order="2"></div>
        <div class="kr-expiry" kr-tab-order="3"></div>
        <div class="kr-security-code" kr-tab-order="4"></div>

        <!-- payment form submit button -->
        <button class="kr-payment-button"></button>

        <!-- error zone -->
        <div class="kr-form-error"></div>
</div>