Onboarding Web-Component

You can utilize our onboarding form component by specifying the pay-engine web component with type boarding and other necessary properties. 
1
<pay-engine id="pf-boarding" 
2
    type="boarding" 
3
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
4
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045">
5
</pay-engine>
Copied!
For a walkthrough integration example of this component. You can read more about the PayEngine web-component on https://docs.payengine.co/merchant-onboarding/introduction​
Properties and Styling
Properties
Styling
Following are properties that can be set on this web-component. You can set the property via a Javascript object reference, or directly inline as an HTML tag attribute. See the example below:
1
<pay-engine id="pf-boarding" 
2
    type="boarding"
3
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
4
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
Following is a list of applicable properties.
Class 
Description
merchant-id
Merchant ID (generated by using create merchant API call) 
hash
HMAC generated from merchant-id (see securing embedded UIs section)
css
<Style> HTML element id, or URL of CSS file (see Styling specs for this component)
​
Styling
As you build and improve your website, it's important that our UI elements work well with, and similar to, your own user interface. To make the building and programming process easier, we put in work to make our component as flexible and user-friendly as possible for you.
Therefore, we added a customization option with a property called css , simply embed a style element within your html file with all your customizations, and pass the id of this element to our web-component.  
1
<style id="custom-boarding-style">
2
.pf-field {
3
  border: none;
4
  background: rgba(215, 224, 235, 0.18);
5
  height: 40px;
6
  line-height: normal;
7
  padding: 0 10px;
8
  color: white;
9
  font-size: 12px;
10
  box-sizing: border-box;
11
  border-radius: 4px;
12
  letter-spacing: .7px;
13
}
14
.pf-field::placeholder {
15
  color: white;
16
  font-size: 12px;
17
  opacity: .5;
18
}
19
</style>
20
<pay-engine id="pf-boarding" 
21
    type="boarding"
22
    css="#custom-boarding-style"
23
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
24
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
Additionally, you can also pass an external stylesheet URL to the css prop, like so:
1
<pay-engine id="pf-dashboard" 
2
    type="boarding"
3
    css="https://mysite.com/custom-boarding-style.css"
4
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
5
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
Here you can find a list of customizable classes within the "boarding" web-component.
Class 
Description
pf-field
This class applies to most form controls such as text, number, select, etc.
pf-field-text
This class applies to the textarea
pf-field-radio
This class applies to the fields that are of type radio
pf-field-checkbox
This class applies to the fields that are of type checkbox
pf-button
This class applies to most buttons
pf-button-add
This class applies to the buttons that add new sections
pf-button-back
This class  applies to the buttons that go to the previous step
pf-button-next
This class  applies to the buttons that go to the next step
pf-button-validate
This class applies to the button that validate all filled information
pf-button-transmit
This class applies to the button that transmit an application
pf-button-gateway
This class applies to the button that complete the gateway account
pf-button-gateway.disabled
This class applies to the button that complete the gateway account, but disabled
pf-title
This class applies to all titles
pf-label
This class applies to all labels
pf-text
This class applies to most text parts
pf-text-danger
This class applies to text parts, that make some warnings
pf-text-bold
This class applies to text parts, that bolder
​
​
Events
1
<pay-engine id="onboarding" merchant-id="ea0e0ae6-aa42-48da-b801-0106facf1e37" type="boarding"></pay-engine>
2
​
3
<script type="text/babel">
4
    document.getElementById('onboarding').addEventListener('stepChange', function(e) {
5
        console.log(e.detail)
6
    })
7
    document.getElementById('onboarding').addEventListener('submitted', function(e) {
8
        console.log(e.detail)
9
    })
10
</script>
Copied!
​
stepChange
Execute event while user navigates through onboarding steps
Example payload on stepChange event:
1
{
2
    "step": "BusinessDetails",
3
    "data": {
4
        ...
5
    }
6
}
Copied!
Possible step names:
BusinessType
BusinessDetails
YourDetails
CreditCardProcessing
ACHProcessing
BankDetails
DocumentAttachments
Submission
submitted
This event is triggered when user submits the application for review
Example payload on submitted event:
1
{
2
    "submitted": true,
3
    "data": {
4
        ...
5
    }
6
}
Copied!

JS Client Library Properties & Styling - Previous

SecureFields JS

Next - JS Client Library Properties & Styling

Transactions Web-Component

Last modified 3mo ago

Copy link

Contents

Properties and Styling

Events