# Banking App Transaction Receipt: Back to the Card Source: https://www.jvds.cn/en/share/ui-design/wbank-card-receipt-u080 Language: en Published: 2026-10-17 Author: JVDS Design Studio After a transfer, people often want more than success: which card paid, where the money went and where to find the record later. This banking app transaction receipt keeps a large amount, card suffixes and follow-up actions in one white panel. Their relationships matter more to us than the green check alone. ## Key takeaways - The home page places cards beside common actions, keeping account objects and operation entries together. - The success receipt moves from green status and amount to card suffixes and time, then separates template saving from completion. - Bank and chat notifications distinguish sources through icons and words, with separate roles from in-app records. ## The card area establishes the object of an action Avatar and name appear at the top, with settings on the right. Finance and Crypto share a segmented container, with selected Finance white and blue. Cards run horizontally below: one shows suffix 4578 and balance, another VISA card is partly visible to the right, and an add-card icon sits left. Partial visibility suggests multiple accounts. Add funds, Send money and Pay now are equal-width white buttons below the cards, with icons above words. They stand out against deep blue and stay close to the card. Seeing identity before available actions creates a smooth structure. Actual use still needs an explicit current card, especially after horizontal switching. A crossed-eye icon offers a recognizable balance-visibility control, while Virtual runs vertically on the edge. Suffix, card type and currency distinguish cards together. The purple friend invitation banner occupies a separate lower area, keeping promotion away from common account buttons. ![Blue banking home page with card suffix, balance and three white common-action buttons](https://www.jvds.cn/upload/2026/1008/d187-tp/u080-i1.webp) Card identity sits beside common actions, with promotion in a separate area. ## The receipt confirms completion, then keeps verification cues A phone in a dining scene shows a white receipt, with a green circular check and Paid successfully above large dark -634.00. Transfer to card and suffix 4242 follow, then date and time. Status, amount, object and time unfold in order, separated from the home page by the white panel. Details below show 4578 and 4242 and dividers, while a finger hides some left labels. This makes labels’ importance apparent: two numbers alone do not immediately distinguish payer account from recipient. JVDS favors grouped verification cues, with card name, suffix and field label supplementing each other so people need not guess from memory. Save as template is blue-outlined and Done solid blue. Brief viewers see the completion action, while repeated transfers to one recipient can be saved. This [restrained hierarchy](https://www.jvds.cn/en/share/website-design/cta-button-design-conversion-guide) still needs an explanation of what a template stores and how to edit it, plus a connection from completion to transaction history. ![White receipt with green success mark, amount and two bottom buttons](https://www.jvds.cn/upload/2026/1008/d187-tp/u080-i2.webp) Success is followed by object checks and next actions, rather than a checkmark alone. ## Notifications show source and summary at a glance The lock screen displays two messages: a bank icon beside You received a payment and a 634 BYN summary, followed by a person’s avatar asking whether the transfer arrived. Similar containers make source icons, sender and copy essential to distinguishing system feedback from chat. [Bank notifications](https://www.jvds.cn/en/share/ui-design/notification-toast-banner-inbox-ux) quickly explain what occurred; full objects and records remain in the app. The pair feels familiar: a sender may ask first, then the bank supplies a receipt summary. A chat claim of having sent money cannot replace account records. We would check currency, amount direction and source name before deciding how much detail belongs on the lock screen. ![Lock-screen bank payment summary and chat inquiry notifications](https://www.jvds.cn/upload/2026/1008/d187-tp/u080-i3.webp) Similar notification containers distinguish message types through source icons and wording. ## Frequently asked questions ### Why does a receipt need card suffixes? Suffixes connect back to home-page cards, ideally with field labels and account names. People need to identify the objects involved rather than guess between several suffixes. ## Design review checklist - After card switching, check the current account’s relationship to common actions. - Retain receipt status, amount, object, time and access to a traceable record. - Check page states after saving templates, exiting completion and opening notifications. ## Design a banking or payment product If your product involves multiple accounts, transfers or receipts, connect card choice, verification and later record lookup to give interface decisions a clear basis. Existing pages can also reveal where information breaks along the flow. JVDS provides UI/UX design and website design and development, helping organize financial product hierarchies, interaction states and introductory websites. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)