Display Card and Account Details
Overview
Virtual cards can be displayed in your application or website so the account holder can use their card or view their card information.
Prerequisites
Display a card
Use the following options for displaying a virtual card:
- For web-based applications that want to show the full card information, including card number and expiration, use the Card Viewer SDK.
- For native iOS and Android-based integrations, and non-native PCI-compliant environments, securely retrieve and display card details from the API with a Client Token.
Use the following ViewPaymentCard query to display a payment card:
ViewPaymentCard
Query
query ViewPaymentCard($id: ID!) {
node(id: $id) {
... on PaymentCard {
id
bin
last4
expirationDate
restrictedDetails {
... on PaymentCardRestrictedDetails {
number
cvv
}
}
}
}
}
Variables
{
"id": "PAYMENT_CARD_ID"
}
Result
{
"data": {
"node": {
"id": "PAYMENT_CARD_ID",
"bin": "411111",
"last4": "1111",
"expirationDate": "2026-01-01T23:59:59Z",
"restrictedDetails": {
"number": "4111111111111111",
"cvv": "222"
}
}
},
"extensions": {
"requestId": "REQUEST_ID"
}
}
Display a balance
Balances are held in a financial account's ledgers. You can display different ledger balances on your website or application so the account holder can monitor their account balance(s).
To display balances, you can use a FindAccount query to retrieve all ledgers on a financial account. Using the data returned from this query, use the AVAILABLE_CASH or AVAILABLE_CREDIT ledgers to display the financial account's balance.
Use the following query to find a financial account and display a balance:
FindAccount
Query
query FindAccount($id: ID!) {
node(id: $id) {
... on FinancialAccount {
id
accountStatus
name
ledgers {
id
name
normalBalance
debitBalance {
value
currencyCode
}
creditBalance {
value
currencyCode
}
}
}
}
}
Variables
{
"id": "FINANCIAL_ACCOUNT_ID"
}
Result
{
"data": {
"node": {
"id": "FINANCIAL_ACCOUNT_ID",
"status": "ACTIVE",
"name": "John Doe - Account",
"ledgers": [
{
"id": "LEDGER_ID",
"name": "CASH",
"normalBalance": "DEBIT",
"debitBalance": {
"value": 0,
"currency": "USD"
},
"creditBalance": {
"value": 0,
"currency": "USD"
}
},
{
"id": "LEDGER_ID",
"name": "ADVANCE_PAYABLE",
"normalBalance": "CREDIT",
"debitBalance": {
"value": 0,
"currency": "USD"
},
"creditBalance": {
"value": 0,
"currency": "USD"
}
}
]
}
}
}
Display account and routing number
Prepaid cards have the DIRECT_DEPOSIT feature enabled by default. Financial accounts with the DIRECT_DEPOSIT feature have an associated account and routing number that can be used to transfer funds into the account from outside Highnote.
To display the account and routing number in your website or application, you can fetch them from the API by generating a Client Token and using that token to view the restricted details. The following graphic shows an example of what fetching an account and routing number looks like:
Use the following query to view direct deposit information:
ViewDirectDepositDetails
Query
query ViewDirectDepositDetails($id: ID!) {
node(id: $id) {
... on FinancialAccount {
directDepositDetails {
id
restrictedDetails {
__typename
... on DirectDepositDetailRestrictedDetails {
number
routingNumber
}
}
}
}
}
}
Variables
{
"id": "FINANCIAL_ACCOUNT_ID"
}
Result
{
"data": {
"node": {
"__typename": "ExternalBankAccountDetail",
"id": "FINANCIAL_ACCOUNT_ID",
"last4": "2730",
"type": "CHECKING",
"restrictedDetails": {
"number": "0493712730",
"routingNumber": "89703965"
}
}
},
"extensions": {
"requestId": "REQUEST_ID"
}
}