Pay.js v2 Payment Check Entry Reference

Please Note: This page includes references to features that are still under development. For the currently-supported feature set, see the Pay.js v1 documentation (previously Client JS).

Config Options

The Pay.js v2 Payment Check Entry can be configured with a wide range of features that allow you to customize your integration and give your customers the best possible experience. None of these fields are required.

interface CheckConfig {
    styles?: Styles;
    placeholders?: Placeholders;
    dl_required?: boolean;
    hide_icon?: boolean;
}

CheckConfig

Property	Type	Description
styles	Styles	Customizes the appearance of the Payment Check Entry iframe.
placeholders	Placeholders	Customizes the placeholders of the inputs in the Payment Check Entry iframe.
dl_required	boolean	Determines whether or not to require the driver's license fields before getting the payment_key. Default is true.
hide_icon	boolean	Determines whether or not to hide the check icon in the Payment Check Entry iframe. Default is false.

Styles

There are 2 ways to include custom styling for the Payment Check Entry element:

Option 1

You can pass in an object that will be converted into CSS classes and applied to the element. Each element in the Payment Check Entry iframe has a custom class that can be targeted, along with a base class that is applied to all of the input elements and valid and invalid classes that are applied to inputs as they are validated. Referencing the HTML of the iframe below, any class proceeded by payjs- can be targeted this way. Valid options are: container, icon-container, form, section, input-icon, routing, account, account-verify, dl-num, dl-state, base, valid, invalid, and hidden. Styles should be included as an object of key/value pairs under each class name. See the example below for reference.

var payCheckConfig = {
    styles: {
        'container': {
            'background-color': '#f1f1f1'
        },
        'base': {
            'color': '#000000',
            'font-size': '12px',
            'height': '23px',
        }
    }
};

Option 2

You can pass in CSS as a sting and it will be added as the contents of a style element in the Payment Check Entry iframe. This allows for more complex styling such as :hover and @media. It also allows you to target elements using id and tag type instead of just class name. See the example below:

var payCheckConfig = {
    styles: `
        #payjs-input-icon:hover {
            height: 22px;
        }

        @media screen and (max-width: 400px) {
            .payjs-base {
                font-size: 10px;
            }
        }
    `
};

Payment Check Entry iFrame HTML

<div id="payjs-container" class="payjs-container payjs-hidden">
    <div id="payjs-icon-container" class="payjs-icon-container">
        <svg id="payjs-input-icon" class="payjs-input-icon payjs-base" xmlns="http://www.w3.org/2000/svg" width="16" height="20">
            <!-- svg code removed to save space -->
        </svg>
    </div>
    <div id="payjs-form" class="payjs-form">
        <div class="payjs-section">
            <input id="payjs-routing" class="payjs-routing payjs-base" type="text" maxlength=9 placeholder="Routing No." autocomplete="off">
            <input id="payjs-account" class="payjs-account payjs-base" type="text" maxlength=30 placeholder="Account No." autocomplete="off">
            <input id="payjs-account-verify" class="payjs-account-verify payjs-base" type="text" maxlength=30 placeholder="Verify Account No."
                autocomplete="off">
        </div>
        <hr>
        <div class="payjs-section">
            <input id="payjs-dl-num" class="payjs-dl-num payjs-base" type="text" maxlength=20 placeholder="Driver's License No."
                autocomplete="off">
            <input id="payjs-dl-state" class="payjs-dl-state payjs-base" type="text" maxlength=2 placeholder="DL State" autocomplete="off">
        </div>
    </div>
</div>

Placeholders

You can set custom placeholders for any of the fields in the Payment Check Entry iframe. This is a great way to support multiple languages. Simply include a placeholders object with routing, account, account-verify, dl-num, and/or dl-state fields set to the string value of the placeholder you wish to use for those inputs. See the example below.

var payCheckConfig = {
    placeholders: {
        'routing': 'rte #',
        'account': 'act #',
        'account-verify': 'act # (ver)',
        'dl-num': 'dl #',
        'dl-state': 'dl st',
    }
};