Interim UX guidelines for EEA program for alternative billing without user choice

Note: Google is sunsetting manual implementation of the interim UX guidelines. Learn more about migration deadlines here. If you are offering user choice billing through alternative billing APIs, you can meet the user experience requirements by integrating with and using the client-side APIs. In this case, you don't need to separately follow the interim user experience guidelines outlined in this topic.

Overview

These guidelines are provided for developers participating in our program for offering users in the European Economic Area (EEA) an alternative billing to Google Play’s billing system without user choice. Developers with users in the EEA who are participating in the user choice billing pilot and offering an alternative billing system alongside Google Play’s billing system should use the user choice billing UX guidelines. These UX guidelines aim to maintain a consistent user experience by requiring developers to display an information screen to each user the first time the user initiates a purchase. The user-facing messages and UI specifications for the information screen should be implemented according to the following guidelines.

Developer app

Information screen for users

Select language

Select the language of your users to view the corresponding UI text strings in the design specifications below.

Show all languages Select a language Bulgarian Catalan Croatian Czech Danish Dutch English Estonian Finnish French German Greek Hungarian Icelandic Italian Latvian Lithuanian Norwegian Polish Portuguese (Brazilian) Portuguese (European) Romanian Slovak Slovenian Spanish Swedish

Select an optionSelect a language

• Show all languages
• Select a language
• Bulgarian
• Catalan
• Croatian
• Czech
• Danish
• Dutch
• English
• Estonian
• Finnish
• French
• German
• Greek
• Hungarian
• Icelandic
• Italian
• Latvian
• Lithuanian
• Norwegian
• Polish
• Portuguese (Brazilian)
• Portuguese (European)
• Romanian
• Slovak
• Slovenian
• Spanish
• Swedish

Information for users

The information screen helps users understand the impact of the change.

When to display

The information screen must be shown to users at the start of their first purchase. This message does not need to be displayed on subsequent purchases by the same user. Display the information screen immediately after a user has taken explicit action to initiate a purchase.

When to display price

The purchase price should be visible and obvious to users before they are shown the information screen.

How to display

The information screen must be displayed in a modal bottom sheet. A modal bottom sheet is similar to a modal dialog that animates up from the bottom of the screen and stays pinned to the bottom. It is elevated above all UI elements on the underlying screen. The underlying screen is obscured behind a dark scrim to indicate that it will not respond to user interaction.

Refer to Google Material Design for more information on the design and implementation of modal bottom sheets.

User actions

The bottom sheet must be triggered when a user taps on a button or other UI element in your app that initiates a purchase. The user can take two possible actions from the information screen:

Got it

Tapping the “Got it” button dismisses the information screen and launches the next screen in your payment flow.

Learn more

Tapping the “Learn more” button launches a Google Help Center article in a web browser.

Dismiss

If users want to dismiss the bottom sheet and return to the underlying screen, they can dismiss the bottom sheet by:

• Tapping outside of the bottom sheet container
• Tapping the Android system "Back" button

The information screen does not need to be displayed again after it has been dismissed or after the user has tapped “Got it”.

Example: When the user taps to purchase in your app, the button will trigger the information screen.

Design specifications

The information screen is divided into three components: title, message, and buttons. All three components are required and must contain the exact text and UI elements defined in these guidelines. Do not include any additional text or imagery on this screen, but you are free to include additional text and imagery on other screens.

1. Title
2. Text 1
3. Text 2
4. Buttons
5. Bottom sheet
6. Background scrim

Title

Text	Select language
Font	Roboto (apply to all fonts)
Font size	18sp
Font color	#202124

Text 1

Used to highlight key points that are considered critical information.

Text	Select language
Font size	14sp
Line height	20
Font color	#5F6368

Text 2

Used for secondary information that is of lower priority.

Text	Select language
Font size	12sp
Line height	16
Font color	#5F6368

Button 1

Text	Select language
Text alignment	Centered
Font size	14sp
Font weight	Medium
Font color	#01875F
Background color	#FFFFFF
Dimensions	Height:36, Width: scale to container
Corner radius	4dp
Outline	1dp, #DADCE0
Link	Links to Google Play help article

Button 2

Text	Select language
Text alignment	Centered
Font size	14sp
Font weight	Medium
Font color	#FFFFFF
Background color	#01875F
Dimensions	Height:36, Width: scale to container
Corner radius	4dp
Link	Links to next screen in your payment flow

Bottom sheet

Dimensions	Height: variable, Width: 100%
Corner radius	8dp, 8dp, 0, 0
Background	#FFFFFF
Inner padding	Left: 24dp, Right: 24dp, Top: 32dp, Bottom: 24dp
Elevation	8dp

Landscape

In landscape view, the bottom sheet is wider than in portrait view, but otherwise follows the same design specifications and functionality.

Bottom sheet	Width: 500dp maximum, Inner padding: 24dp
Title	Same as portrait view
Message	Same as portrait view
Buttons	Height:36, Width: scale to container

For additional details on the EEA program for alternative billing without user choice and frequently asked questions, please visit our Help Center.