Payabli
Instructions to use the Payabli Boarding embedded component.
$(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 |
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. |
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.
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 |
<!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>