Invoices in cashier

The visual representation of invoice details is very important from the customer experience perspective. Displaying the right details in the right place and in the right way can significantly increase payment conversion in your cashier. Conversely, representing invoice details in your cashier in a wrong or inconvenient way for the end user can dramatically drop your conversion rate.

We have included some visuals and quick tips below to help you get a better idea of how invoice details in your cashier should look, and to save you from unnecessary struggles and back-and-forths during your customers' payment experience.

Visual representation

Invoice details page	QR code

All invoice details shown in the image above are returned in the API response when creating invoices.

Taking a look at the visual example, from top to bottom:

Visual element	Description	Invoice attribute	Best practice
Amount	This is the invoice amount in fiat.	data.attributes.amountBilled data.attributes.billedCurrency	Keep the invoice amount visible throughout the checkout process in your cashier, so users don't have to backtrack to double-check.
Send exact amount	This is the exact amount of cryptocurrency required to complete a payment.	data.attributes.amountCharged data.attributes.chargedCurrency	Make it copyable to avoid customers manually typing it into their wallet. With cryptocurrencies, up to 8 decimal places can be involved, making manual entry tedious for customers.
To this address	This is the invoice receiving address.	data.included[].attrbutes.value	Make the address copyable. Ideally, your customers should be able to see the full address to verify it after copying and pasting it into their wallet.
Network	This is the blockchain network through which a payment should be made.	data.attributes.networkName	The network name must be visible next to the receiving address. Using the wrong network may result in lost and unrecoverable funds.
Show QR code	This QR code represents the invoice receive address and can be scanned by end users with their wallet application.	data.included[].attrbutes.value >>> Look for "type": "addresses" <<<	The QR code is generated on your server-side frontend. It simplifies populating the destination address field in the customer's wallet application.
Network type disclaimer	A disclaimer/warning message for end users the ensure they send funds via the right network.	No ready-to-go message supplied by the API. You can put something like this: "Only deposit <data.attributes.chargedCurrency> from the <data.attributes.networkName> network. Deposits from other networks are not supported and will be lost."	A disclaimer or warning message for end users to ensure they send funds via the correct network.
Exchange rate	This is the exchange rate provided by Txn.	data.attributes.exchangeRate	This is the exchange rate locked in for 20 minutes. It is recommended to include a countdown timer on the page.
Reference	This is the invoice reference ID.	data.attributes.reference	Making the reference copyable is beneficial if your customers need to contact your customer support team.
Invoice epxires in	This is the duration for which the invoice remains valid.	data.attributes.createdAt data.attributes.expiresAt	Inform your customers about the timeframe they have to make their payment while the provided exchange rate is still guaranteed. This helps reduce the number of late payments.