This section describes how to customize the Default UI to match the visual identity of your brand. The figures shown here include labeled examples of some style elements. Not all style elements are shown. A description of the style elements follows the figures.

Figure:

PAX All-in-One Default UI Style Elements
PAX All-in-One Default UI Style Elements 1

Figure:

PAX All-in-One Default UI Style Elements
PAX All-in-One Default UI Style Elements 2

Figure:

PAX All-in-One Default UI Style Elements
PAX All-in-One Default UI Style Elements 3
This list describes the style elements that you can customize in the Default UI:
animationStrokeColor
Stroke or outline color for animations.
approvedStateColor
Indicator color that appears for the approved transaction badge and animation.
cardPresentAnimationStrokeColor
Overrides the
animationStrokeColor
 style element in the card reader drawing on present-card animations. By default, this element is the same color as the
animationStrokeColor
 style element.
colorControlActivated
Color applied to switch controls in their active state.
colorOnPrimary
Primary color that appears for the filled button text and animation details.
colorOnSurface
Color for text that appears over the content view, transaction status badges text, and outlined button stroke.
colorPrimary
Primary color that appears for the filled buttons and animations.
colorSurface
Background color that appears for the content view.
colorSurfaceOnSurface
Background color for displayed lists such as transaction history.
contactlessStateActiveColor
Active indicator color that appears when the contactless interface is ready or when a payment card is tapped on the device.
contactlessStateErrorColor
Error indicator color that appears when a problem occurs when the device attempts to read a card on the contactless interface.
contactlessStateInactiveColor
Inactive indicator color that appears when the contactless interface is not active.
declinedErrorStateColor
Indicator color that appears for these elements:
  • Declined transaction badges and animation
  • Error transaction badges and animation
  • Error dialog boxes
  • Input field error messages
notificationColor
Alert notification color that appears with
Poor connection
 and
Low battery
 notifications. The default color is yellow.
preAuthorizedStateColor
Indicator color that appears for the pre-authorized transaction badge.
smallComponentCornerSize
Defines the corner radius of the buttons and transaction status badge. Set this element to
0dp
 for square corners,
4dp
 for slightly square corners (default), or
32dp
 for round corners.
toolBarLogo
A drawable image used for the merchant's company logo. The logo appears during the transaction.