> ## Documentation Index
> Fetch the complete documentation index at: https://developers.staging01.melio.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# UI requirements

During the beta you build your own UI for onboarding, accounts, and payments. A few screens carry requirements that Melio's risk and liability coverage depends on. This page lists them.

## Screens and what each needs

| Screen                      | Requirements                                                                                                                   |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Entity onboarding           | Capture Terms of Service acceptance. Embed the Sonar SDK.                                                                      |
| Account creation            | Embed the Sonar SDK.                                                                                                           |
| Funding source verification | Host the Melio-hosted verification page (the link returned by the account link and verify endpoints). Embed the Sonar SDK.     |
| Payment initiation          | Show the fee and the estimated delivery date. Show the goods-received checkbox for payments over \$3,000. Embed the Sonar SDK. |

## Mandatory Disclosures

### At Sign Up

On the entity onboarding screen, display the following text clearly, close to the Sign Up CTA:

> *By continuing, you accept Melio's [Terms of Service](https://melio.com/terms-of-service/) and [Privacy Policy](https://melio.com/privacy-policy/). Payment services provided by [Melio Solutions Inc.](https://melio.com/licenses/) (NMLS ID 2376858)*

1. All hyperlinks are mandatory.
2. Checkbox is not mandatory.
3. Users' first acceptance of our TOS and Privacy Policy must be sent to Melio on an ongoing basis via API.
4. Acceptance and disclosure cannot be handled by Partner on behalf of its customers. Payor must be present for acceptance.

### At Payment Submission

Display the following text clearly, close to the Payment Submission CTA:

> *Payment services provided by [Melio Solutions Inc.](https://melio.com/licenses/) (NMLS ID 2376858). [Terms of Service](https://melio.com/terms-of-service/) | [Privacy Policy](https://melio.com/privacy-policy/)*

1. All hyperlinks are mandatory.
2. Payment ETA must be pulled from Melio via API and clearly displayed to the Payor.
3. Fees must be pulled from Melio via API and clearly displayed to the Payor, separate from the Transaction Volume (for example, a card payment of $100 for which the fee is 2.9% - The UI shall clearly indicate separately: a. $100 payment, b. $2.9 fee, and c. $102.9 total).

### Receipt after Payment

1. Melio's standard receipt must be issued directly to the Payor against every payment.
2. Melio must issue the receipt to ensure it was properly sent and confirm compliance with MTL requirements.

## Sonar SDK

Every screen above leads to a write call, so each one must mint a Sonar session and forward the token. See the Sonar session token page for how to embed it.

<Note>
  Funding source verification, entity onboarding, account creation, and payment initiation all need Sonar. Skipping it on a required screen can affect liability coverage.
</Note>

## Payment screen

Before the user confirms a payment, the screen must show:

<CardGroup cols={3}>
  <Card title="Fee" icon="receipt">
    Call `POST /tools/fee-calculator` (accounts, delivery preference, amount) and display the returned fee.
  </Card>

  <Card title="Estimated delivery date" icon="calendar">
    Call `POST /tools/delivery-eta` (accounts, amount) and show the estimate for the chosen delivery preference.
  </Card>

  <Card title="Goods received" icon="circle-check">
    For card-funded payments over \$3,000, show a checkbox confirming the goods or services were received.
  </Card>
</CardGroup>

The goods-received checkbox sets `compliance.goodsReceived: true`, which the API requires when the amount is over \$3,000 (`amount` greater than `300000` cents).

<Note>
  Card-funded payments also require `compliance.merchantCategoryCode` (the payee's four-digit MCC). Collect it on the payment screen.
</Note>

## Checklist

* Terms of Service presented and accepted on entity onboarding, linking to [https://melio.com/terms-of-service/](https://melio.com/terms-of-service/).
* Sonar SDK embedded on onboarding, account creation, funding source verification, and payment initiation.
* Funding source verification hosts the Melio-hosted verification page.
* Payment screen shows the fee (/tools/fee-calculator) and estimated delivery date (/tools/delivery-eta).
* Goods-received checkbox shown, and compliance.goodsReceived sent, for payments over \$3,000.