Onboarding Web-Component

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

Note: Refer to this doc for guidance on implementing embedded web components. PayEngine now uses MerchantSession to enable embedded web components.

If you're currently using HMAC-based security, please note that it has been deprecated and will continue to be supported for backward compatibility. However, we strongly recommend migrating to MerchantSession for improved security and future support.

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

Refer to this doc for a walkthrough integration example of this component

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:

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

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

Events

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

<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": {
        ...
    }
}