Onboarding Web-Component

You can utilize our onboarding form component by specifying the payment-platform web component with type boarding and other necessary properties.

<payment-platform id="pf-boarding" 
    type="boarding" 
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045">
</payment-platform>

For a walkthrough integration example of this component. You can read more about the Platform web-component on https://docs.payengine.co/merchant-onboarding/introduction

Properties and Styling

Properties

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:

<payment-platform id="pf-boarding" 
    type="boarding"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>

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 or css-override	<Style> HTML element id, or URL of CSS file (see Styling specs for this component)

Styling

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 (or alternatively css-override). Simply embed a style element within your html file with all your customizations, and pass the id of this element to our web-component.

<style id="custom-boarding-style">
.pf-field {
  border: none;
  background: rgba(215, 224, 235, 0.18);
  height: 40px;
  line-height: normal;
  padding: 0 10px;
  color: white;
  font-size: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  letter-spacing: .7px;
}
.pf-field::placeholder {
  color: white;
  font-size: 12px;
  opacity: .5;
}
</style>
<payment-platform id="pf-boarding" 
    type="boarding"
    css="#custom-boarding-style"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>

Additionally, you can also pass an external stylesheet URL to the css prop, like so:

<payment-platform id="pf-dashboard" 
    type="boarding"
    css="https://mysite.com/custom-boarding-style.css"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>

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

<payment-platform id="onboarding" merchant-id="ea0e0ae6-aa42-48da-b801-0106facf1e37" type="boarding"></payment-platform>

<script type="text/babel">
    document.getElementById('onboarding').addEventListener('stepChange', function(e) {
        console.log(e.detail)
    })
    document.getElementById('onboarding').addEventListener('submitted', function(e) {
        console.log(e.detail)
    })
</script>

stepChange

Execute event while user navigates through onboarding steps

Example payload on stepChange event:

{
    "step": "BusinessDetails",
    "data": {
        ...
    }
}

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:

{
    "submitted": true,
    "data": {
        ...
    }
}