# Customizing Pay Connect Flows
source: https://developer.mastercard.com/ob-accept-payments/documentation/customization/index.md

Payers authorize payments or mandates using the Mastercard Pay Connect user experience.

Mastercard Open Finance Pay enables you to customize the Pay Connect flow using the [Theming API](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/). You can configure the Pay Connect experience for each merchant to match their brand.

This enables you to offer enhanced branding consistency, improved consumer experience and easy theme management for Pay Connect flows.

The API is embedded directly into your platform's backend, enabling you to customize and control the look and feel of any user journey, without needing to handle complex UI design.

## Example of Payment Screens After Customization {#example-of-payment-screens-after-customization}

This Figma diagram shows sample payment screens after customization:

For the best viewing experience, click the **full screen** option.

<br />

Refer to the [Theming API Documentation](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/) to learn how to create themes that can be applied to Pay Connect flows.

## Theming Flow Overview {#theming-flow-overview}

This section gives a high-level overview of how to customize your Pay Connect flows.

### Step 1 - Create a Theme {#step-1---create-a-theme}

* You can create a theme that can be used to customize Pay Connect flows using the Theming API's [Create theme](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/api-reference/#tag/Theming/operation/createTheme) endpoint.
* When creating a new theme you can choose to modify the following aspects of the Pay Connect user experience:
  * **Primary Color**: the primary color that will be applied to calls to action (CTAs) in the flow. Here you can choose a colour that aligns with the merchant's website to maintain a consistent user experience throughout the user journey.
  * **Logo**: the logo passed in while creating a theme will appear on the Pay Connect screens. Here you can use the merchant's logo. This will make users feel more comfortable when being redirected from the merchant site to Pay Connect.
  * **Font**: the font that will be applied to text on the Pay Connect screens. Choose a font that aligns with the Merchant's website to maintain a consistent user experience throughout the user journey.
  * **Secondary CTA Color**: border and text color of the secondary CTA button in the flows -- such as the "back" or "decline" button.
  * **Border Radius**: curvature of corners of various screen elements in the flows -- for example, buttons, info boxes, and input fields.
  * **Title Color**: color of title text in the flow.
* Once you have successfully created a new theme, the Theming API returns a `themeId`.

### Step 2 - Create a Payment With the Customization Defined in the Creation of a Theme {#step-2---create-a-payment-with-the-customization-defined-in-the-creation-of-a-theme}

* Create a new payment request as normal. For more information on how to create a payment, refer to [Single Immediate Payments](https://developer.mastercard.com/ob-accept-payments/documentation/payments/single-immediate-payments/single-immediate-payments/index.md).
* When creating the new payment request, use the `themeId` that was returned by the Theming API.
* You may have many merchants that use different themes. To offer a customized flow for each merchant, create a theme for each merchant and use the `themeId` associated with the merchant in each payment request.

### Step 3 - Manage Your Themes {#step-3---manage-your-themes}

The Theming API offers several endpoints that can be used to manage your themes.

* **Get themes** - The [Get themes](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/api-reference/#tag/Theming/operation/getThemes) endpoint can be used to fetch details of all of the themes that you have previously created.
* **Get theme** - The [Get theme](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/api-reference/#tag/Theming/operation/getTheme) endpoint can be used to fetch the details of a specific theme by passing in a `themeId`.
* **Update theme** - The [Update theme](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/api-reference/#tag/Theming/operation/updateTheme) endpoint can be used to update a previously created theme by passing in the `themeId` and specifying the new theme in the request body.
* **Delete theme** - The [Delete theme](https://developer.mastercard.com/mastercard-open-banking-theming-api/documentation/api-reference/#tag/Theming/operation/deleteTheme) endpoint can be used to delete a previously created theme by passing in the `themeId`. Once a theme has been deleted, it cannot be used again.