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

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

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

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

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>