Añadir campos personalizados a su formulario

Para insertar un campo personalizado al formulario de pago, solo agregue las etiquetas HTML estándar en la 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 ejemplo de código insertará:

un campo e-mail obligatorio como primer campo del formulario
una casilla de verificación obligatoria al final del formulario
un campo oculto

Cuando se realice el pago, se agregarán estos campos personalizados a los parámetros POST enviados al vendedor:

{
  "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"
}

Validación HTML5

Puede agregar pautas de validación HTML5 a su campo personalizado:

Los errores de validación se manejan de la misma manera que los errores de los campos del formulario:

las validaciones se aplicarán localmente,
los errores se muestran en el área de error del formulario,
se admite la devolución de llamada para el manejo de errores definida en base a KR.onError(),
el tema se aplicará automáticamente.

Hasta la fecha, las pautas compatibles con HTML5 son:

Directiva	Descripción
required	El campo es obligatorio.

Cuando un campo obligatorio se envía vacío, la biblioteca de JavaScript arroja un error de tipo CLIENT_304.

Temas y CSS

Los campos adicionales utilizan el CSS predeterminado de su sitio. Es posible aplicar automáticamente el tema del formulario de pago agregando la clase kr-theme al 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/>

Agregar kr-theme le permite aplicar automáticamente:

el tema actual del formulario de pago
el manejo de errores (animaciones, colores) en el campo.

Íconos personalizados

Puede añadir íconos personalizados en los campos adicionales mediante el 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/>

También se admiten los íconos de Font-Awesome. Primero debe cargar la biblioteca en el head de su 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">

Se agregarán otras bibliotecas en versiones futuras.

Tabulación

También puede controlar el orden de las tabulaciones al añadir el 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 solo es necesario cuando existe un campo adicional.

Valor predeterminado.

También puede definir el valor predeterminado añadiendo el 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>