# UI/UX Best Practices
source: https://developer.mastercard.com/mastercard-checkout-solutions/tutorial/first_time_ui/best-practices/index.md

The user experience (UX) requirements and recommended best practices provided here are to assist participants in implementing a seamless Click to Pay checkout experience.

| \[*R* \] or \[*BP*\] |  **Meaning**  |
|----------------------|---------------|
| **R**                | Requirement   |
| **BP**               | Best Practice |

### New user enrollment when DCF is suppressed \[R\] {#new-user-enrollment-when-dcf-is-suppressed-r}

![DCF suppressed](https://static.developer.mastercard.com/content/mastercard-checkout-solutions/documentation/tutorials-and-guides/ui-guide/img/fuu-img/UX_1.12.png)

<br />

<br />

* For Mastercard, enroll the consumer into Mastercard Click to Pay at the time of card entry or selection.
* Display "Remember Me" checkbox on the card selection screen.

Warning: Due to the regulatory requirements in certain countries, Mastercard recommends that integrators should get an explicit opt-in from consumers before Click to Pay checkout can be initiated. These countries include:   

1. Canada
2. New Zealand
3. Singapore
4. Hong Kong
5. Thailand
6. Malaysia
7. Germany   

Mastercard advises partners to provide their own legal assessment in regards to data privacy applicable rules and regulations.

### PII Collection \[R\] {#pii-collection-r}

![PII collection](https://static.developer.mastercard.com/content/mastercard-checkout-solutions/documentation/tutorials-and-guides/ui-guide/img/fuu-img/UX_3.png)

<br />

* Integrators should collect the minimum required fields (i.e. email and mobile number) to create a Click to Pay profile and initiate the checkout.

### User's consent agreement for PII data share \[R\] {#users-consent-agreement-for-pii-data-share-r}

![Single order](https://static.developer.mastercard.com/content/mastercard-checkout-solutions/documentation/tutorials-and-guides/ui-guide/img/fuu-img/UX_5.png)

<br />

* The payment page must provide a disclaimer that indicates the user's consent agreement to share personal data with a Click to Pay network.

Warning: Depending on local privacy regulations, position this option as unchecked option so users can opt-in (e.g. EU markets) or pre-checked so users can opt out (e.g. US market.)   

Mastercard advises partners to provide their own legal assessment in regard to data privacy applicable rules and regulations.

### Single order confirmation page \[R\] {#single-order-confirmation-page-r}

![Single order](https://static.developer.mastercard.com/content/mastercard-checkout-solutions/documentation/tutorials-and-guides/ui-guide/img/fuu-img/UX_4.png)

<br />

* Order review page must not be repeated/duplicated.
* It should be displayed only once either by partner or provided by Mastercard DCF.

### Consent for enrollment and legal text {#consent-for-enrollment-and-legal-text}

![Payment page options](https://static.developer.mastercard.com/content/mastercard-checkout-solutions/documentation/tutorials-and-guides/ui-guide/img/fuu-img/UX_8.1.png)

<br />

<br />

#### 1. Consumer's choice {#1-consumers-choice}

**\[R\]**

* Provide an option to consumers to not save their information with Mastercard.

**\[BP\]**

* Present user enrollment as a checkbox or CTA button.
* Display clear action labels on CTA button to indicate the consumer's choice of saving or not saving information with Mastercard Click to Pay.

#### 2. Market-specific consent {#2-market-specific-consent}

**\[R\]**

* Present Click to Pay enrollment in compliance with opt-in/out market specifications.
* Use a consistent interaction style within the existing user interface.

<br />

#### 3. Legal text {#3-legal-text}

**\[R\]**

* The content highlighted in the image is required when Mastercard Click to Pay enrollment is offered to consumers

<br />

### Data sharing and UI branding {#data-sharing-and-ui-branding}

![Payment page options](https://static.developer.mastercard.com/content/mastercard-checkout-solutions/documentation/tutorials-and-guides/ui-guide/img/fuu-img/UX_8.2.png)

<br />

<br />

#### 1. Header \& Descriptor content {#1-header--descriptor-content}

**\[R\]**

* Clearly state what the user is agreeing to, who is saving their information, and what their information will be used for.
* Display a link (e.g. 'Learn More') only once during enrollment to enlist the benefits of Click to Pay.
* Be specific about Mastercard Click to Pay to prevent confusion between merchant card on file and merchant account creation.

**\[BP\]**

* We recommend to use the text highlighted in the image when asking users to proceed with saving their information with Mastercard.

#### 2. UI Branding {#2-ui-branding}

**\[BP\]**

* Reinforce trust by displaying the Click to Pay icon and network brand logo of the card used in checkout.