Disclaimer: This article contains AI translations and should only be used as reference. Contact Coboâs support team through [email protected] if you have any questions.
- 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.
- 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):- The payer selects a token and chain.
- They confirm the order information and choose to pay with a third-party wallet.
- They select the wallet from the list and complete the payment.
- The page will automatically redirect to the payment success page.
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):- The payer selects a token and chain.
- They confirm the order information and choose to pay with a third-party wallet.
- They select the wallet from the list and complete the payment.
- The page will automatically redirect to the payment success page.
Example Project
We provide a complete demo project 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.
- When the payer clicks the Pay Now button, the frontend sends a request to the backend to create an order payment link.
- The backend receives the request and calls the Create order link API to generate the payment link.
- 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.
Integration Steps
You can call the 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: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_currencyis set, the order amount is denominated in that fiat currency. - If
pricing_currencyis not set, the order amount is denominated in the cryptocurrency specified bypayable_currency.
- If
-
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.If you are a merchant (serving payers directly), you usually do not need to set a developer fee. -
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 at the time the order is created.
- If you specify
| Scenario 1 | Scenario 2 | Scenario 3 | Scenario 4 | |
|---|---|---|---|---|
| Description | - Pricing amount in fiat currency - No developer fee - System calculates payable amount | - Pricing amount in USDT - No developer fee - System calculates payable amount | - Pricing amount in fiat - With developer fee - Custom payable amounts | - Pricing amount in USDC - With developer fee - 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" |