Embedded Component

Instructions to use the Payabli Boarding embedded component.

  • the component requires you to load the JS payablibrd.js located on our servers. DO NOT copy the js to the application server because the script url is used to validate and load the component.
  • the JS requires jquery to execute, so you will need to load jquery 1.3x within your web application before executing any call to the component plugin.
  • the JS creates in target an iframe containing the boarding page. To facilitate the adjustment of the iframe height the content sends a “message” every 500 ms to the parent page with the child width and height (see the example below)

$(selector for target).brd({options});
The plugin creates an iframe within the target containing the view for the boarding application. When the iframe is loaded the identifier for the current application (boardingId) is stored in the iframe attribute “data-id”

token: Unique identifier provided by Payabli to connect to a specific application (required)
css: Url to optional css to be loaded in the application view. The boarding app uses Bootstrap 4 standard classes.
fields: JSON string containing array of fields descriptors and/or attributes – see list of fields below
boardingId: Optional identifier to re-load an existing incomplete application, the identifier is created by the component if the boardingId is not provided and stored in the attribute “data-id” of the iframe.
postUrl: Optional url to a “webhook” receiving the status for a boarding application when saved or submitted. The Url indicated in this parameter will receive a HTTP POST with the following values:

boardingId: Identifier for the saved or submitted boarding application

action: Text indicating the finished operation – Updated/Submitted

status: Numeric code indicating the application status – 99 (Incomplete) 55 (Submitted/Pending)

options: JSON string containing array of options descriptors and/or attributes – see list of accepted options below
List of options accepted
Option Description
btnSaveTextText for button saving and closing the application. Default: “Save and Complete Later”
btnContinueTextText for button saving and not closing the application. Default: “Save and Continue”
btnNextTextText for button navigating the steps of the application. Default: “Next”
btnSubmitTextText for button submitting the application. Default: “Submit”
SavedMsgCustom message to show when the application is saved to complete later.
SubmittedMsgCustom message to show when the application is submitted.
sendParentNotificationEmailSet to True for the parent company to receive a notification email when an application is submitted.
List of fields accepted

The option “field” is an array of objects containing the field name, value to show in the field and optional attribute to make it readonly.
fields: JSON.stringify([{ dbaname: "xyz", ro: true }, { website: "", label:"Url" }]) – here the application will show with the value “xyz” in the dbaname field and mark it as “readonly” avoiding any modification by the user. At the same time we are showing the custom label “Url” for the field website.

If you want to make reference in a custom CSS file to a particular field just add “template_” before the field name to create the identifier.
#template_dbaname : { display:none;} in a css file will hide the field dbaname from the form to the user.

Field Description
dbanameBusiness DBA Name
legalnameBusiness Legal name
websiteBusiness website name (not protocol in text: http/https)
einBusiness EIN or TAX ID
taxfilenameBusiness name in Tax document
licenseBusiness License
licstateState emitting the License
startdateBusiness start date
phonenumberBusiness phone number
baddressBusiness address
bcityBusiness city
bstateBusiness state
bzipBusiness zip code
bcountryBusiness country
maddressBusiness mail address
mcityBusiness mail city
mstateBusiness mail state
mzipBusiness mail zip
mcountryBusiness mail country
ownernameOwner Name
ownertitleOwner Title
ownerpercentPercent of ownership
ownerssnOwner SSN
ownerdobOwner Date of Birth
ownerphone1Owner Phone 1
ownerphone2Owner Phone 2
ownerdriverOwner Driver’s License
odriverstateOwner Driver’s License State
oaddressOwner address
ostateOwner address state
ocountryOwner address country
ocityOwner address city
ozipOwner address zip
mccBusiness MCC code
bsummarySummary about business
binpersonpercent processed in person
binphonepercent processed by phone
binwebpercent processed on web
avgmonthlyaverage monthly amount
ticketamtaverage ticket amount
bnkdepname of bank for deposit account
ababnkdeprouting number of deposit bank account
accbnkdepaccount number for deposit bank account
typebnkdeptype of account: Checking/Savings
bnkwithname of bank for withdrawal bank account
ababnkwithrouting number for withdrawal bank account
accbnkwithaccount number for withdrawal bank account
typebnkwithtype of account: Checking/Savings
Example using the JS component
<!DOCTYPE html>
        <meta charset="utf-8" />
            iframe {min-width:100%;min-height:500px;}
        <div id="test"></div>
        <script src=""></script>
        <script src="https://<Payabli Environment URL>/Scripts/payablibrd.js"></script>
            $(document).ready(function () {
                window.addEventListener('message', function (e) {
                    // message that was passed from iframe page
                    let iframe = document.querySelector("#payabliContainer");
                    let message =;
           = message.height + 'px';
           = message.width + 'px';
                }, false);
                    token: "<Insert API token provided by Payabli>",
                    fields: JSON.stringify([{ dbaname: "xyz", ro: true }, { website: "" }])