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

# Create Payment Link

<Note>
  **Disclaimer: This article contains AI translations and should only be used as reference.** Contact Cobo's support team through [help@cobo.com](mailto:help@cobo.com) if you have any questions.
</Note>

If you choose to collect payments via the order mode and want to save development time on your own payment page, you can call the [Create order link](/payments/en/api-references/payment/create-order-link) API to create an order payment link.

* When the payment link is opened, the payer will be directed to a payment page hosted by Cobo. On this page, the payer can view order details and complete the payment, so you do not need to develop the frontend interaction flow yourself. You can also embed the payment page into your website or application using an iFrame.
* The payment link is compatible with both desktop and mobile devices and allows payers to initiate payments with local third-party wallet apps or extensions. For details about supported third-party wallets, refer to [Third-party Wallet App Support](/payments/en/guides/third-party-wallet-support).
* The standard format of an order payment link is: `https://payment-link.dev.cobo.com/payment?token=<token>`, where `<token>` is a unique identifier generated by Cobo — each token corresponds to an order.

## Payment Page Showcase

### On Mobile

The diagram below shows the interaction process of the order payment page on mobile devices (taking third-party wallet connection as an example):

1. The payer selects a token and chain.
2. They confirm the order information and choose to pay with a third-party wallet.
3. They select the wallet from the list and complete the payment.
4. The page will automatically redirect to the payment success page.

<img src="https://mintcdn.com/mcpnow/_W10-4f6PrKVgg4o/payments/en/images/payments/payment-link-mobile.png?fit=max&auto=format&n=_W10-4f6PrKVgg4o&q=85&s=9f572a81341f23d4cdca349eb1e84532" className="screenshot_full_screen" alt="Mobile Payment Link Page" width="3384" height="1960" data-path="payments/en/images/payments/payment-link-mobile.png" />

### On Desktop

The diagram below shows the interaction process of the order payment page on desktop (again with third-party wallet connection as an example):

1. The payer selects a token and chain.
2. They confirm the order information and choose to pay with a third-party wallet.
3. They select the wallet from the list and complete the payment.
4. The page will automatically redirect to the payment success page.

<img src="https://mintcdn.com/mcpnow/_W10-4f6PrKVgg4o/payments/en/images/payments/payment-link-desktop.png?fit=max&auto=format&n=_W10-4f6PrKVgg4o&q=85&s=a656657beb617d2f12e4f769a0f78fdb" className="screenshot_full_screen" alt="PC Payment Link Page" width="5978" height="3844" data-path="payments/en/images/payments/payment-link-desktop.png" />

## Example Project

We provide a [complete demo project](https://github.com/CoboGlobal/cobo-payment-link-demo) for integrating order payment links. The project contains both frontend and backend source code (implemented in JavaScript), which can help you quickly experience and reference the integration process.

* The main frontend code is in `src/main.ts`, responsible for page display and triggering the payment process.
* The backend code is in `server.js`, handling communication with the Payments API and generating order payment links.

<img src="https://mintcdn.com/mcpnow/u3HuKP_5zzCerg5C/payments/cn/images/payments/payment-link-demo-page.png?fit=max&auto=format&n=u3HuKP_5zzCerg5C&q=85&s=dac9e280d4ddbd1af80b3a7bdf2c7c76" className="screenshot_full_screen" alt="Payment Link Demo Page" width="1700" height="532" data-path="payments/cn/images/payments/payment-link-demo-page.png" />

The example project includes two integration methods: clicking **Pay Now (By New Window)** opens the payment page in a new tab, and clicking **Pay Now (By iframe)** embeds the payment page in the current page via iframe.

The interaction process between frontend and backend in this demo is as follows:

1. When the payer clicks the **Pay Now** button, the frontend sends a request to the backend to create an order payment link.
2. The backend receives the request and calls the [Create order link](/payments/en/api-references/payment/create-order-link) API to generate the payment link.
3. The backend returns the payment link to the frontend. The frontend then opens a new window or embeds the payment page in an iframe using the returned link, where the payer can complete the payment.

You can open your browser’s developer tools to see details of the network requests:

<img src="https://mintcdn.com/mcpnow/u3HuKP_5zzCerg5C/payments/cn/images/payments/payment-link-request.png?fit=max&auto=format&n=u3HuKP_5zzCerg5C&q=85&s=37ea664ca6079e01abcf50fc433ff8d9" className="screenshot_full_screen" alt="Payment Link Preorder Request" width="1828" height="258" data-path="payments/cn/images/payments/payment-link-request.png" />

## Integration Steps

You can call the [Create order link](/payments/en/api-references/payment/create-order-link) API to create an order payment link.

### Interaction Flow

The diagram below shows the complete interaction flow between the payer, your application’s frontend and backend, and Cobo:

<div style={{ maxWidth:"800px",margin:"0 auto" }}>
  ```mermaid theme={null}
  sequenceDiagram
      participant Payer
      participant Your Frontend
      participant Your Backend
      participant Cobo
      participant Payment Link
      participant Third-party Wallet
      Payer ->> Your Frontend: Choose to pay with cryptocurrency
      Your Frontend ->> Your Backend: Request order payment link
      Your Backend ->> Cobo: Call API to create order payment link
      Cobo -->> Your Backend: Return payment link
      Your Backend -->> Your Frontend: Return payment link
      Payer ->> Your Frontend: Click button to open payment link
      Your Frontend ->> Payment Link: Open payment link (redirect/iframe)
      Payer ->> Payment Link: Select token and chain, confirm order
      Payment Link ->> Third-party Wallet: Connect wallet / scan to pay
      Cobo ->> Cobo: Monitor on-chain result
      Payer ->> Third-party Wallet: Complete payment
      Cobo -->> Your Backend: Webhook notifies order status update
      Your Backend -->> Your Frontend: Notify payment result
  ```
</div>

### Payable Amount Calculation

When creating an order payment link, you must specify the pricing amount, developer fee, and other essential parameters. Once the payer enters the payment page, they can choose the currency and blockchain for payment. The system will automatically calculate the payable amount based on your configuration and the payer's selection, displaying it in real time on the UI. You can also directly specify the payable amounts for supported cryptocurrencies.

* **Pricing amount** (`pricing_amount`): The base amount of the order, excluding the developer fee.
  * If `pricing_currency` is set, the order amount is denominated in that fiat currency.
  * If `pricing_currency` is not set, the order amount is denominated in the cryptocurrency specified by `payable_currency`.
* **Developer fee** (`fee_amount`): If you are a platform serving multiple downstream merchants and need to split revenue, you can set this field accordingly. The ratio of developer fee to pricing amount determines your revenue sharing ratio with your downstream merchants. For more information, see [Amounts and Balance Management](/payments/en/guides/amounts-and-balances).

  <Info>If you are a merchant (serving payers directly), you usually do not need to set a developer fee.</Info>
* **Payable amounts** (`payable_amounts`): The actual cryptocurrency amounts to be paid by the payer for each supported currency. This allows you to directly specify the payable amount for each cryptocurrency. This field is optional:
  * If you specify `payable_amounts`, these values are used directly as the amounts the payer needs to pay for each currency.
  * If you do not specify `payable_amounts`, the system calculates the payable amount using the real-time exchange rate: **Payable Amount = (Pricing Amount + Developer Fee) / Exchange Rate**. The exchange rate is based on the rate returned by [Get exchange rate](/payments/en/api-references/payment/get-exchange-rate) at the time the order is created.

The following table shows how the system calculates the payable amount in four different setups:

|                         | Scenario 1                                                                                        | Scenario 2                                                                               | Scenario 3                                                                       | Scenario 4                                                                                 |
| :---------------------- | :------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- |
| Description             | - Pricing amount in fiat currency<br />- No developer fee<br />- System calculates payable amount | - Pricing amount in USDT<br />- No developer fee<br />- System calculates payable amount | - Pricing amount in fiat<br />- With developer fee<br />- Custom payable amounts | - Pricing amount in USDC<br />- With developer fee<br />- System calculates payable amount |
| `pricing_amount`        | `"100"`                                                                                           | `"100"`                                                                                  | `"100"`                                                                          | `"100"`                                                                                    |
| `fee_amount`            | `"0"` or not set                                                                                  | `"0"` or not set                                                                         | `"2"`                                                                            | `"2"`                                                                                      |
| `pricing_currency`      | `"USD"`                                                                                           | `"USDT"`                                                                                 | `"USD"`                                                                          | `"USDC"`                                                                                   |
| Payer's token choice    | `"ETH_USDT"`                                                                                      | `"ETH_USDT"`                                                                             | `"ETH_USDT"`                                                                     | `"ETH_USDT"`                                                                               |
| `payable_amounts`       | Not set                                                                                           | Not set                                                                                  | `[{"payable_currency": "ETH_USDT", "payable_amount": "104.08"}]`                 | Not set                                                                                    |
| Real-time exchange rate | 0.99                                                                                              | 1                                                                                        | N/A (custom payable amount used)                                                 | 1                                                                                          |
| Calculation             | (100 + 0) / 0.99                                                                                  | (100 + 0) / 1                                                                            | Directly uses specified payable\_amounts                                         | (100 + 2) / 1                                                                              |
| Final payable amount    | `"101.01"`                                                                                        | `"100.00"`                                                                               | `"104.08"`                                                                       | `"102.00"`                                                                                 |