Service Payment Footer
The service footer streamlines transactions with payment details, security prompts, and actions, ensuring trust and usability.
Overview
Usage
When to use this component?
The service payment footer should be included on all payment-related pages to provide users with essential transaction details, security confirmations, and necessary actions. It ensures a smooth and trustworthy payment experience by displaying relevant information such as accepted payment methods, terms of service, and security notices.
How it works
The service payment footer is designed to enhance security, clarity, and ease of use during transactions. It includes informational links to terms of service, privacy policies, and support resources, ensuring transparency. Interactive elements such as tooltips provide additional security explanations, while icons indicate accepted payment methods and authentication options. Action controls guide users through the final steps, allowing them to confirm details, proceed with payments, or navigate securely. This structured approach reinforces trust and ensures a seamless transaction experience.
Code
Properties
copyrightText
string
description
string
footerSections
string
footerTitle
string
loginButtonText
string
logoAlt
string
logoSrc
string
signUpButtonText
string
socialIcons
string
Anatomy
Information Icon: A small icon providing additional details or security notices related to the transaction.
Consent Text: Displays a message informing users that proceeding confirms their agreement to share the provided information.
Card Type Icon: Represents the selected payment method (e.g., Mastercard) for quick recognition.
Masked Card Number: Shows only the last four digits of the card number for security while maintaining user identification.
Dropdown Arrow: Allows users to expand or change their payment method if multiple options are available.
CCV Input Field: A designated input box for entering the card’s security code (CCV) to verify the transaction.
Tertiary Button: A low-emphasis button, typically for optional or less critical actions.
Secondary Button: A medium-emphasis button, offering an alternative action that is not the primary focus.
Primary Button: A high-emphasis, visually distinct button guiding users to complete the payment or proceed to the next step.
Responsive Behavior
The header component turns to mobile view @ the 1024 breakpoint
Dos and Don'ts
Use clear and concise consent text to inform users about sharing their payment details.
Don’t use vague or misleading consent text that may confuse users.
Display card type icons to help users quickly identify their selected payment method.
Don’t use low-resolution or unclear card icons that make identification difficult.
Mask card numbers, showing only the last four digits for security.
Don’t display the full card number or sensitive information in the footer.
Include tooltips to provide additional security explanations or contextual information.
Don’t overload the footer with unnecessary text, making it cluttered.
Use a structured button hierarchy with clear primary, secondary, and tertiary actions.
Don’t use identical styling for all buttons, as it can confuse users about the primary action.
Ensure the CCV input field is clearly labeled and positioned for ease of use.
Don’t place the CCV field in an unclear location that disrupts the flow of the transaction.
Maintain proper spacing and alignment for a clean, user-friendly layout.
Don’t overcrowd the footer with too many elements, reducing readability and usability.
Last updated