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. |
| 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. |
| 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. |
| 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. |
Last updated