> For the complete documentation index, see [llms.txt](https://docs.calypso.money/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.calypso.money/acquiring/invoices/accept-payments-via-api/how-to-embed-invoice-data-to-your-payment-page.md).

# How to embed invoice data to your payment page

## Introduction

If you already have a checkout page in your application it's can be useful to embed invoice data to checkout page with all needed for client payment data. Embedding invoice data on your checkout page can provide several benefits for your business and your customers:

* By including all the necessary information for payment on one page, it makes the process of making a payment in cryptocurrency more streamlined and efficient.
* Customers will not need to leave your website to complete their payment and this can increase payment conversion.
* Additionally, it can also improve the overall user experience by making the payment process more user-friendly and intuitive.

<br>

In this guide we consider how to embed [Limited Invoice](https://docs.calypso.money/acquiring/invoices) to your web page.

We also have some detailed guides on how to create and track limited fiat invoices via API:

[How to create a Limited Fiat Invoice via API](https://docs.calypso.money/api-reference/invoice-api#post-api-v1-invoice-single-fiat-create)

**Limited Fiat invoice** - the amount to pay is issued in fiat currency but converted to crypto currency at current exchange rate.

For detailed information about managing invoices read these guides first. Here we will go through the general flow.

## Steps to embed invoice

To embed Calypso invoice data to your web page, you can follow these steps:

1. Place the HTML code in your web page's code, wherever you want the invoice to appear:

HTML

```html
  <div class="invoice">
    <h4 class="full-currency">Tether USD (TRC-20)</h4>
    <h4 class="rate"><span class="amount">1800</span> <span class="currency">USDT</span> = <span class="fiat-amount">1801.1</span> <span class="fiat-currency">USD</span></h4>
    <p><span class="amount" id="amount">1800</span> <span class="currency">USDT</span></p>
    <button onclick="copyText('amount')">Copy Amount</button>
    <p class="wallet-address" id="wallet-address">TEoZ53apYcxrJspfCCb7PGh5CJKMiRrAMX</p>
    <button onclick="copyText('wallet-address')">Copy Address</button>
    <br>
    <hr>
    <p>or scan QR code</p>
    <img class="qr-code" src="https://api.qrserver.com/v1/create-qr-code/?data=TEoZ53apYcxrJspfCCb7PGh5CJKMiRrAMX&size=150x150"
      alt="QR Code">
  </div>
```

2. Send API request to create invoice (API description: [New Single Fiat Invoice](https://docs.calypso.money/api-reference/invoice-api#post-api-v1-invoice-single-fiat-create)):

cURL

```curl
curl --location --request POST 'https://api.calypso.money/api/v1/invoice/create' \
--header 'Key: <your_api_key>' \
--header 'Sign: <your_sign>' \
--header 'Content-Type: application/json' \
--data-raw '
{
    "timestamp": 13292792792,
    "account": "0xc195df92dd9db2a8f28e597981f113d6e7582f8b",
    "payload": {
        "type": "SINGLE_FIAT",
        "currency": "USDC",
        "description": "invoice for client 1",
        "idempotencyKey": "1be6a518-6dcd-477d-96af-dd914b1300ce",
        "fiatAmount": 1000,
        "fiatCurrency": "EUR"
    }
}'
```

3. Get invoice data in response

JSON

```json
{
    "id": "d9732536-acdd-41bd-87c3-ec40aeeb6a37",
    "invoiceAddress": "0xc23670524181205cdddef7a7e471674779b20797",
    "type": "SINGLE_FIAT",
    "totalDebitAmount": 0,
    "amount": 980,
    "currency": "USDC",
    "state": "PENDING_PAYMENT",
    "description": "invoice for client 1",
    "createdDate": "2022-09-05T06:54:41.421731",
    "idempotencyKey": "d7067648-cf1f-4d95-afd1-3f7228992671",
    "expiration": "2022-10-05T06:54:41.421458",
    "fiatAmount": 1000,
    "fiatCurrency": "EUR",
    "isInterventionResolved": true,
    "subscriptionEnabled": false
}
```

4. Replace the placeholder data within the code (such as the currency, amount, and wallet address) with the actual invoice data that you receive in response:

| Class in HTML file | Field in response                                                                                                                                                                                                                                                                  |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| full-currency      | <p>get value from <code>currency</code> and make mapping for user-friendly text.<br>Example, USDT\_TRX -> Tether USD (TRC-20)</p>                                                                                                                                                  |
| amount             | `amount`                                                                                                                                                                                                                                                                           |
| currency           | get value from `currency`, split it by the symbol "\_". and take first element. Example, USDT\_TRX -> USDT                                                                                                                                                                         |
| fiat-amount        | `fiatAmount`                                                                                                                                                                                                                                                                       |
| fiat-currency      | `fiatCurrency`                                                                                                                                                                                                                                                                     |
| wallet-address     | `invoiceAddress`                                                                                                                                                                                                                                                                   |
| qr-code            | link on image with QR-code where encoded `invoiceAddress`. You can use service [***https://api.qrserver.com/v1/create-qr-code/?data={InvoiceAddress}\&size=150x150***](https://api.qrserver.com/v1/create-qr-code/?data=%7BInvoiceAddress%7D\&size=150x150) or encode by yourself. |

4. If you have a CSS file in your web page, you can add the CSS styles for the HTML code.
5. Add the copyText() function to your Javascript file and make sure it is correctly referenced in the HTML code.

HTML

```html
  <script>
    function copyText(elementId) {
      var copyText = document.getElementById(elementId);
      var textArea = document.createElement("textarea");
      textArea.value = copyText.innerText;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      textArea.remove();
    }
  </script>
```

6. Test the invoice on your web page, to make sure that it looks good and that all the data is correct. Your ready invoice form with CSS styles can be looked like this:

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.calypso.money/acquiring/invoices/accept-payments-via-api/how-to-embed-invoice-data-to-your-payment-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.