Online Payments

Stylebook

How we designed our payment UI.

Stylebook

This stylebook describes the visual design, interaction patterns, and accessibility principles used in the payment UI.

It is intended for stores, partners, and developers who integrate with us and want their user interface to visually align with the payment UI.

The purpose of this stylebook is to support visual consistency and accessible user experiences, not to define payment logic or business rules.


Scope

This stylebook covers:

  • Design foundations such as color usage, surfaces, and spacing
  • Typography and icon usage
  • UI components and interaction states
  • Accessibility requirements in accordance with WCAG 2.2 AA

Accessibility

All UI patterns described in this stylebook are designed to comply with WCAG 2.2 AA.

Accessibility requirements are defined centrally in Design Foundations and applied consistently across components, states, and form fields.

The Accessibility Checklist provides a practical verification guide and can be used to review implementations and ensure that accessibility requirements have been met.


How to use this stylebook

Use this stylebook as a reference when styling user interfaces that appear before or after the payment UI, or when embedding the payment UI in a broader user journey.

  • Start with Design Foundations to understand the core visual principles.
  • Follow Typography and Icons for consistent text and icon usage.
  • Use Components and Form Fields for concrete implementation guidance.
  • Refer to States to ensure consistent interaction behavior.
  • Review Examples for illustrations of how the components and interaction patterns are used together.

Contents