> For the complete documentation index, see [llms.txt](https://docs.payengine.co/payengine-api-v2.5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payengine.co/payengine-api-v2.5/ui-styleguide-specs/onboarding-web-component.md).

# Onboarding Web-Component

![](/files/GlmtRp24zP51QNrBBTTo)

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

{% hint style="warning" %}
**Note:** Refer to [this doc](https://docs.payengine.co/developer-docs-v2.5/getting-started-1/securing-embedded-uis-merchant-session) for guidance on implementing embedded web components. Platform 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.
{% endhint %}

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

{% hint style="info" %}
Refer to this [doc](https://docs.payengine.co/developer-docs-v2.5/merchant-onboarding/introduction) for a walkthrough integration example of this component
{% endhint %}

### Properties and Styling

{% tabs %}
{% tab title="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:

```html
<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](/payengine-api-v2.5/onboarding/create-a-merchant.md) API call)                                                                                        |
| `hash`                  | HMAC generated from `merchant-id` (see [securing embedded UIs](https://docs.payengine.co/developer-docs-v2.5/getting-started-1/securing-embedded-uis-merchant-session/securing-embeddable-uis) section) |
| `css` or `css-override` | \<Style> HTML element id, or URL of CSS file (see Styling specs for this component)                                                                                                                     |
| {% endtab %}            |                                                                                                                                                                                                         |

{% tab title="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.

```html
<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:

```html
<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>
```

![](/files/j7s8sKppRD6SHFgTgVzK)

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                                    |
| {% endtab %}                 |                                                                                  |
| {% endtabs %}                |                                                                                  |

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