products array. Make the account
selectable when it contains payment. For an American
Express Account with payment in{" "}
restricted_products, launch Opal Account Verification
and check the Account again. Keep accounts without payment
capability in a collapsed group.
,
demo: "capability-check",
apis: [{
label: "Account products",
href: "/reference/accounts/products/overview"
}, {
label: "Opal account verification",
href: "/opal/account_verification/overview"
}]
}, {
title: "Lead with active liabilities",
description: <>
Group selectable accounts by liability type. Within each group,
put accounts with recent activity first and keep less likely
destinations in a collapsed list.
,
apis: [{
label: "Accounts",
href: "/reference/accounts/overview"
}, {
label: "Account updates",
href: "/reference/accounts/updates/overview"
}]
}, {
title: "Make every liability recognizable",
description: <>
Show the product name, current balance, and last four digits when
available. Use Card Brand art for credit cards and the Method
Merchant logo for non-card liabilities. Keep the balance date
inside the payment editor.
,
apis: [{
label: "Retrieve an account",
href: "/reference/accounts/retrieve"
}, {
label: "Card brands",
href: "/reference/accounts/card-brands/overview"
}, {
label: "Retrieve a merchant",
href: "/reference/merchants/retrieve"
}, {
label: "Account updates",
href: "/reference/accounts/updates/overview"
}]
}, {
title: "Collapse longer account groups",
description: <>
Lead with the most likely destinations, then keep additional
eligible accounts in a collapsed group. Expanded accounts must
keep the same add action. Label joint or authorized-user accounts
when needed. Read usage_pattern to identify cards
without recent activity. When the value is dormant,
keep the card in the secondary group.
,
demo: "other-accounts",
apis: [{
label: "Account attributes",
href: "/reference/accounts/attributes/overview"
}, {
label: "Account updates",
href: "/reference/accounts/updates/overview"
}]
}, {
title: "Separate accounts that cannot be paid",
description: <>
Put closed and payment-unsupported accounts in a separate
collapsed group. State the exact reason that an account cannot
receive funds. A zero balance is a warning state, not proof that
the account is unavailable.
,
demo: "unavailable-accounts",
apis: [{
label: "Account lifecycle",
href: "/guides/accounts/lifecycle"
}, {
label: "Account products",
href: "/reference/accounts/products/overview"
}, {
label: "Account updates",
href: "/reference/accounts/updates/overview"
}]
}]
}, {
key: "account",
number: "02",
title: "Make a payment",
description: "Open one focused editor for the selected destination, amount, and payment timing.",
items: [{
title: "Keep the loan context behind the editor",
description: <>
Preserve the loan total, remaining amount, and list position. The
payment editor is a detail view of the allocation, not a separate
flow.
}, {
title: "Repeat useful account identity",
description: <>
Repeat the product name, card art or brand, and last four digits.
Show “Authorized user” or “Joint” only when it applies; do not
label a default individual account.
,
apis: [{
label: "Retrieve an account",
href: "/reference/accounts/retrieve"
}]
}, {
title: "Show the balance date and amount choices",
description: <>
Label the value as “Balance as of [date].” Offer the full balance
or a custom amount and keep the minimum payment amount explicit.
,
apis: [{
label: "Create an account update",
href: "/reference/accounts/updates/create"
}]
}, {
title: "Warn when an amount exceeds the balance",
description: <>
Compare the custom amount with the latest balance. State the
excess and require an explicit confirmation before the user can
save it.
,
demo: "payment-warning",
apis: [{
label: "Create a payment",
href: "/reference/payments/create"
}, {
label: "Account balances",
href: "/reference/accounts/balances/overview"
}]
}, {
title: "Warn on payments to accounts with no balance",
description: <>
Warn that a payment to an account with a $0 balance can fail at
the creditor or create a credit. Let the user confirm and continue
when the program permits it.
,
demo: "zero-payment",
apis: [{
label: "Create a payment",
href: "/reference/payments/create"
}, {
label: "Create an account update",
href: "/reference/accounts/updates/create"
}]
}, {
title: "Keep balances current with Update subscriptions",
description: <>
Enroll eligible accounts in the update subscription.
Process the update.create and{" "}
update.update webhook events. Use the latest
completed Update and its data_as_of value in the
payment editor.
,
apis: [{
label: "Update subscriptions",
href: "/guides/updates/subscriptions"
}, {
label: "Webhooks",
href: "/reference/webhooks/overview"
}]
}, {
title: "Preview posting timing before saving",
description: <>
Create a dry-run payment for the selected amount. Show the
estimated posting date before the user saves the allocation.
,
apis: [{
label: "Create a payment",
href: "/reference/payments/create"
}, {
label: "Payment fields",
href: "/reference/payments/overview"
}]
}, {
title: "Compare the posting estimate with the due date",
description: <>
Put the estimated posting date next to the account due date. Warn
when the payment may post after the due date so the user can
choose another amount or payment option.
,
apis: [{
label: "Account updates",
href: "/reference/accounts/updates/overview"
}, {
label: "Payment fields",
href: "/reference/payments/overview"
}]
}]
}, {
key: "review",
number: "03",
title: "Review and submit",
description: "Reconcile the loan and show the expected posting date for every destination.",
items: [{
title: "Reconcile the full loan in one list",
description: <>
Show creditor payments and cash to the borrower together. The
destination amounts must add up to the approved loan amount, and
any lender minimum must be met before submission.
,
apis: [{
label: "Balance Transfer sessions",
href: "/reference/elements/sessions/overview"
}]
}, {
title: "Run a payment dry run",
description: <>
Immediately before submission, create a dry-run Payment for every
creditor. Confirm payability and show the expected posting date.
Refresh all dry runs when a destination or amount changes.
,
apis: [{
label: "Create a payment",
href: "/reference/payments/create"
}, {
label: "Payment delivery",
href: "/reference/payments/overview"
}]
}]
}, {
key: "receipt",
number: "04",
title: "Confirm and track",
description: "Keep every creditor payment and the borrower deposit in one receipt.",
items: [{
title: "Show every destination in one receipt",
description: <>
Put creditor payments and cash to the borrower in one list. Repeat
the destination, last four digits, amount, and expected date for
each row. Show the delivery method only when it changes what the
borrower should expect, such as a paper check.
}, {
title: "Call out paper-check delivery",
description: <>
Make a paper check explicit because its timing and status differ
from electronic delivery. Continue to show its expected date and
later whether the check was cashed.
,
apis: [{
label: "Payment delivery",
href: "/reference/payments/overview"
}]
}, {
title: "Track the same details after submission",
description: <>
Keep the receipt consistent with payment status updates. Send the
same details by email and update the product when a payment posts,
a check is cashed, or a payment is returned.
,
apis: [{
label: "Payment lifecycle",
href: "/guides/payments/overview"
}, {
label: "Payment webhooks",
href: "/reference/webhooks/overview"
}]
}]
}];
const renderCard = (variant = "sapphire", stateClass = "") => {
const cardLabels = {
sapphire: "Chase Sapphire Reserve card",
united: "United Explorer card",
"credit-one": "Credit One Bank Platinum Visa card"
};
return ;
};
const renderLoanSummary = (state = "progress") => {group.description}