# Service Payment Footer
## 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
{% tabs %}
{% tab title="Vanilla Js" %}
```jsx
```
{% endtab %}
{% tab title="React" %}
```jsx
```
{% endtab %}
{% tab title="Vue" %}
```jsx
```
{% endtab %}
{% tab title="Angular" %}
```jsx
```
{% endtab %}
{% endtabs %}
### Properties
| Property | Type |
| ------------------ | -------- |
| `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
| Dos | 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. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://designsystem.dubai.ae/components/footers/service-payment-footer.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.