Añadir campos personalizados a su formulario

Para insertar un campo personalizado en formulario de pago, simplemente agregue las etiquetas HTML estándar en la div kr-embedded:

  <!-- 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 directivas de validación HTML5 a su campo personalizado:

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

  • las validaciones se aplican localmente,
  • los errores se muestran en el área de error del formulario,
  • se admite el callback de control de errores definido a partir de KR.onError(),
  • el tema se aplica automáticamente.

Hasta la fecha, las directivas compatibles con HTML5 son:

Directive Descripción
required El campo es obligatorio.

Cuando un campo requerido 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:

   <!-- 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 agregar íconos personalizados en campos adicionales utilizando el parámetro kr-icon:

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

Los íconos de Font-Awesome también son compatibles. Primero debe cargar la biblioteca en la sección de su página:

  <!-- 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 añadiendo 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>