Adding custom fields to your form

In order to insert a custom field to the payment form, all you need to do is add standard HTML tags to the kr-embedded div:

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>

This sample code will insert:

The e-mail field must be the 1st field of the form.
A mandatory checkbox at the end of the form.
a hidden field

Once the payment is made, the custom fields will be added in the POST parameters transmitted to the Merchant:

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

HTML5 validation

You can add HTML5 validation directives to your custom field:

Validation errors are processed in the same way as form field errors:

Validations will be applied locally.
The errors will appear in the error area of the form.
The error handling callback defined via KR.onError() is taken into account.
The theme will be applied automatically.

Currently, the supported HTML5 directives are:

Directive	Description
required	This field is mandatory.

When a mandatory field is submitted empty, the JavaScript library raises a CLIENT_304 type error.

Themes and CSS

Additional fields use default CSS on your website. It is possible to automatically apply the payment form theme by adding the kr-theme class to the element:

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

Adding kr-theme allows to automatically apply:

The current theme of the payment form,
Error handling (animations, colors) for the field.

Custom icons

You can add custom icons in additional fields using the kr-icon parameter:

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

Icons from Font-Awesome are also supported. You must first load the library in the <head> section of your page:

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

Other libraries will be added in upcoming versions.

Tabbing

You can also set the tab order by adding the kr-tab-order parameter:

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

This parameter is only necessary when an additional field is present.

Default value.

You can also set the default value by adding the value html attribute:

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