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)

Syntaxes

$(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”

Options

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
btnSaveText	Text for button saving and closing the application. Default: “Save and Complete Later”
btnContinueText	Text for button saving and not closing the application. Default: “Save and Continue”
btnNextText	Text for button navigating the steps of the application. Default: “Next”
btnSubmitText	Text for button submitting the application. Default: “Submit”
SavedMsg	Custom message to show when the application is saved to complete later.
SubmittedMsg	Custom message to show when the application is submitted.
sendParentNotificationEmail	Set 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.
Example:
fields: JSON.stringify([{ dbaname: "xyz", ro: true }, { website: "zzz.com", 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.
Example:
#template_dbaname : { display:none;} in a css file will hide the field dbaname from the form to the user.

Fields

Field	Description
dbaname	Business DBA Name
legalname	Business Legal name
website	Business website name (not protocol in text: http/https)
ein	Business EIN or TAX ID
taxfilename	Business name in Tax document
license	Business License
licstate	State emitting the License
startdate	Business start date
phonenumber	Business phone number
baddress	Business address
bcity	Business city
bstate	Business state
bzip	Business zip code
bcountry	Business country
maddress	Business mail address
mcity	Business mail city
mstate	Business mail state
mzip	Business mail zip
mcountry	Business mail country
ownername	Owner Name
ownertitle	Owner Title
ownerpercent	Percent of ownership
ownerssn	Owner SSN
ownerdob	Owner Date of Birth
ownerphone1	Owner Phone 1
ownerphone2	Owner Phone 2
ownerdriver	Owner Driver’s License
odriverstate	Owner Driver’s License State
oaddress	Owner address
ostate	Owner address state
ocountry	Owner address country
ocity	Owner address city
ozip	Owner address zip
mcc	Business MCC code
bsummary	Summary about business
binperson	percent processed in person
binphone	percent processed by phone
binweb	percent processed on web
avgmonthly	average monthly amount
ticketamt	average ticket amount
bnkdep	name of bank for deposit account
ababnkdep	routing number of deposit bank account
accbnkdep	account number for deposit bank account
typebnkdep	type of account: Checking/Savings
bnkwith	name of bank for withdrawal bank account
ababnkwith	routing number for withdrawal bank account
accbnkwith	account number for withdrawal bank account
typebnkwith	type of account: Checking/Savings

Example using the JS component

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            iframe {min-width:100%;min-height:500px;}
        </style>
    </head>
    <body>
        <div id="test"></div>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://<Payabli Environment URL>/Scripts/payablibrd.js"></script>
        <script>
            $(document).ready(function () {
                
    
                window.addEventListener('message', function (e) {
                    // message that was passed from iframe page
                    let iframe = document.querySelector("#payabliContainer");
                    let message = e.data;
    
                    iframe.style.height = message.height + 'px';
                    iframe.style.width = message.width + 'px';
                }, false);
    
                $("#test").brd({
                    token: "<Insert API token provided by Payabli>",
                    fields: JSON.stringify([{ dbaname: "xyz", ro: true }, { website: "zzz.com" }])
                });
            });
        </script>
    </body>
    </html>

Quick Navigation