# Customize your Hosted Payment Page

Customize the look of your Hosted Payment Page to match the look and feel of your website.

**Prerequisites:** [Authentication](/api/authentication)

You can change the appearance of the Hosted Payment Page to match the styling of your integration. Use the Self-Care Portal to create or edit an existing template, and choose which template you display to users on different devices.

When you apply a template, it shows on all Hosted Payment Pages that you've integrated with, for example, if you've extended your integration to run a pre-authorization or to set up subscriptions.

**Note:** You can't edit the validation error messages that we display on the Hosted Payment Page.

To edit the appearance of the Hosted Payment Page and display it to a user, complete the following steps:

1. Customize a template.
2. Apply the template.

<a id="step-1-customize-a-template"></a>
## Step 1. Customize a template

1. Log in to the Self-Care Portal:

- Test: [https://payments.uat.payroc.com/merchant/selfcare/](https://payments.uat.payroc.com/merchant/selfcare/)
- Production: [https://payments.payroc.com/merchant/selfcare/](https://payments.payroc.com/merchant/selfcare/).

2. From the navigation menu, select **Settings**, and then select **Pay Pages**.
3. Select **Add Template** to create a new template, or select **Edit** to make changes to an existing template.
4. Select your editor mode:- Basic – Style the page using the editor.
   - Advanced – Edit the CSS directly.
5. Use the editor to configure the template.
6. (Optional) If you have extended your integration to run pre-authorizations, tokenize payment details, or set up subscriptions, use the **Preview** dropdown menu to preview your changes for each type of Hosted Payment Page.
7. (Optional) If your account uses Level 3 enhanced data, enable **Display Enhanced Data** to show itemized transaction details on the payment page.
8. Select **Save Changes**.

<a id="step-2-apply-the-template"></a>
## Step 2. Apply the template

After you create a template, you must indicate if it is the default. You can also specify if you want to apply the template only on a specific device type, for example, when a user accesses the Hosted Payment Page from a mobile device.

<a id="set-the-template-as-the-default"></a>
### Set the template as the default

You can set only one template as the default. When you load the Hosted Payment Page, we display the default template automatically unless you apply settings for specific device types.

To set the template as the default, select the radio button in the **Default** column.

<a id="apply-the-template-for-specific-device-types"></a>
### Apply the template for specific device types

You can also specify which Hosted Payment Page template displays on a specific device type. If a user accesses the Hosted Payment Page from a device that matches the criteria you set, this overrides the default.

To apply the template for specific device types, select from the following checkboxes under the **Use for Internet** column:

- **Mobile** – We display the template to users who access the Hosted Payment Page on a mobile device.
- **Tablet** – We display the template to users who access the Hosted Payment Page on a tablet device.
- **Other** – We display the template to users who access the Hosted Payment Page on a device that is not a tablet or mobile device, for example, a desktop computer.

**Note:** The **Use for MOTO** column doesn't apply to your integration.