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.

In this guide we consider how to embed Limited Invoice 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

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:

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

  <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>

Send API request to create invoice (API description: New Single Fiat Invoice):

curl --location --request POST '<<baseUrl2>>/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"
    }
}'

Get invoice data in response

{
    "id": 1373,
    "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
}

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	get value from `currency` and make mapping for user-friendly text: Currency Mapping. Example, USDT_TRX -> Tether USD (TRC-20)
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 or encode by yourself.

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

  <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>

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:

Or you can check the real example here.