> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/v-2024-05-25/payments/payment-web-component/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# Payment Web Component

## Overview

Monite provides an embeddable Payment component that allows our partners to build a custom invoice payment and BillPay experience into their applications or websites. The Payment component is an alternative to hosted payment pages, and allows users (entities or their counterparts) to make payments without leaving your application.

From an integration perspective, using the Payment component requires:

* **[Server side](../get-started/server-side):** to generate a payment link ID, receive [webhooks](../references/webhooks/index) about the payment status, and (optionally) customize the look and feel of the Payment component.
* **Client side:** the Payment component handles all necessary payment-related requests and validates the inputs.

![Monite Payment component](/_fern-img/577eb752106b8000d097176282586dd3d91a541de6b61ec5a501bf83e5be771e.webp)

## Payment methods

The payment methods displayed by the component are configured when you generate a payment link ID for this component, as explained below.

Additionally, the entity that will receive or make the payment:

* Must have the necessary [payment methods](./payment-methods) enabled. See [Enable payment methods for an entity](./onboarding/enable-payment-methods).
* Must have completed the [onboarding](./onboarding/index) (if any) required by those payment methods.

## Usage

Embedding the Payment component into your web page requires just two lines of code.

First, import the Payment component's module:

```html
<!-- Production only -->
<script type="module" src="https://pay.monite.com/drop-in/index.js"></script>

<!-- Sandbox only -->
<script type="module" src="https://pay.sandbox.monite.com/drop-in/index.js"></script>
```

Then initialize the Payment component:

```html
<monite-payment link-id="PAYMENT_LINK_ID" />
```

\


The `PAYMENT_LINK_ID` must be generated in advance by calling [`POST /payment_links`](/api/payment-links/post-payment-links) with your partner access token. Payment links can be created for Accounts Payable [invoices](../accounts-payable/payables/collect) (entity pays), Accounts Receivable [invoices](../accounts-receivable/invoices/create) (entity gets paid), or arbitrary monetary amounts (entity pays or gets paid). For more information, see [Payment links](./payment-links).

In the body of the `POST /payment_links` request, specify the [payment methods](./payment-methods) you want to display in the component (assuming these methods are already enabled for the entity).

The following example creates a payment link ID for an external invoice that an entity issued to its counterpart. The counterpart is supposed to use your payment page to make the payment to the entity.

```sh
curl -X POST 'https://api.sandbox.monite.com/v1/payment_links' \
     -H 'X-Monite-Version: 2024-05-25' \
     -H 'Authorization: Bearer YOUR_PARTNER_TOKEN' \
     -H 'Content-Type: application/json' \
     -d '{
       "payment_methods": [
         "card",
         "eps",
         "ideal",
         "sepa_credit",
         "sepa_debit"
       ],
       "recipient": {
         "id": "e575bbe2-38ef-48a4-b21a-b72801bd9d17",
         "type": "entity"
       },
       "return_url": "https://return.url.com",
       "amount": 1250,
       "currency": "EUR",
       "payment_reference": "Inv 102",
       "invoice": {
         "issue_date": "2024-04-18",
         "due_date": "2024-05-18"
       }
     }'
```

The response from `POST /payment_links` contains a unique `id`. This is the ID you need to pass to the Monite Payment component via the `<monite-payment link-id="PAYMENT_LINK_ID" />` tag on your payment page.

```json {2}
{
  "id": "8a3b5037-ae70-42c3-8cf1-c10b44e07a8c",
  "amount": 1250,
  "currency": "EUR",
  ...
}
```

## Customization

The look and feel of the payment component can be customized to match your branding. The colors and other styling options are controlled by the partner setting `payments.payment_page_theme`, which you can change by calling [`PATCH /settings`](/api/partner-settings/patch-settings). For details, see [Payment page customization](payment-page-customization).

> Learn how to integrate Monite's Payment component into your apps to provide smooth payment experience for your users.