Accessible payment page

Jan 14, 2025

1 Key Features
2 Accessibility Enhancements
- 2.1 Adjustable Text Size
- 2.2 Lexend Fonts
- 2.3 Letter Spacing Adjustments
- 2.4 High Contrast Mode
3 Accessibility Compliance
- 3.1 WCAG 2.1
- 3.2 RGAA
4 Design and Layout
5 Security Measures

The new payment page introduces a modern, accessible, and user-friendly interface, enhancing both User Experience (UX) and User Interface (UI). This page is designed to meet the needs of a diverse global audience, offering seamless integration with multiple payment options.

Key Features

Feature	Description

Feature	Description
Payment Options	Credit Card: Enter card details (name, number, expiry, CVC). WeChat & Alipay: Alternative payment methods.
Cobadge Selection	For users with cobadge cards, we provide the ability to choose their preferred payment scheme.
Customization	Merchants can replace the default top-left logo with their own company logo for brand alignment.
Dark and Light Mode	The page automatically detects the user’s Operating System theme and applies the corresponding dark or light mode.
Order Information	Displays invoice and billing address to ensure transparency.
Cart Details	An optional sidebar showing subtotal and total amounts for clarity.

ℹ️ Note: The Cart Details sidebar can be toggled on or off by merchants, depending on their specific needs.

Accessibility Enhancements

This page is compliant with WCAG 2.1 and RGAA standards, offering the following accessibility features:

Adjustable Text Size

Users can select from three text sizes:

Small (Aa): Standard size for most users.
Medium (Aa): Increased size for better readability.
Large (Aa): Optimized for users with visual impairments.

💡 Example Use Case: A user with low vision can increase the text size and enable high-contrast mode for easier navigation.

Lexend Fonts

We utilize Lexend fonts, specifically designed to reduce visual stress and improve reading performance. While initially intended for users with dyslexia and struggling readers, these fonts are also beneficial for everyone, enhancing overall readability.

Letter Spacing Adjustments

Three levels of spacing to suit user preferences:

Default (Aa).
Moderate (Aa).
Wide (Aa).

High Contrast Mode

Toggle to improve text visibility against the background for users with low vision or specific visual conditions.

⚠️ Warning: Users with complex visual impairments may need additional assistive tools for optimal functionality.

Accessibility Compliance

WCAG 2.1

The page aligns with key principles:

Perceivable: Adjustable visual settings make content accessible.
Operable: Intuitive design allows seamless navigation.
Understandable: Clear labels and error messages enhance usability.
Robust: Compatibility with assistive technologies ensures broad access.

✅ Success: The payment page passed internal accessibility audits, confirming its compliance with WCAG 2.1 standards.

RGAA

We are committed to continuously upgrading our accessibility compliance based on RGAA standards.

Our progress in RGAA compliance is documented in our self-assessment report.
This demonstrates our commitment to ensuring accessibility for all users.

ℹ️ Note: Regular updates are planned to improve accessibility scores and maintain compliance with RGAA standards.

Design and Layout

Element	Description

Element	Description
Language Options	Supports English, Français, Español, Deutsch, Italiano, 繁體中文.
Form Validation	Real-time error messages guide users to fix mistakes for seamless input.
Responsive Design	Optimized for desktops, tablets, and mobile devices to provide a consistent experience.

Security Measures

Ensuring secure transactions and data privacy:

Secure Payment Processing: Compliant with industry-standard protocols.
Privacy and Policies: Clear links to the Privacy Policy, Terms & Conditions, Cookies Policy, and Complaints for user trust.