Invoices in cashier
Last updated
Last updated
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.
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:
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.
