Custom form fields

You can add custom fields to the form using standard HTML tags.

Adding a field

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:

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

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 callback of error handling defined using 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.
pattern Not implemented at the moment.
min Not implemented at the moment.
max Not implemented at the moment.

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:

   <!-- 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 to additional fields using the kr-icon parameter:

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

            

We support Font-Awesome icons. You must first load the library in the <head> of your page:

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