# Customize the Payment Experience
source: https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/customizing-the-checkout/customizing-the-payment-experience/index.md

If you are using Hosted Checkout, you can change how the payment page looks so it fits your business and gives the payer a better experience. The customizations are defined in the **INITIATE CHECKOUT** operation.

You can customize the payment experience with the following options:

* ***Display brand information*** : You can display your logo and contact details by using the corresponding fields within the `interaction.merchant` object.

  Warning: The fields provided in the `interaction.merchant` object are displayed on the receipt page for payment page integrations only, not for Embedded Page.

  <br />

* **Manage the display of payer billing and email addresses** : After collecting billing and email addresses from your payer, you can display them and control the way they can be edited by setting the `interaction.displayControl.billingAddress` and `interaction.displayControl.customerEmail` fields to one of the following values:

  * HIDE: Do not display the address.
  * MANDATORY: Display the address element and make data entry compulsory for the payer.
  * OPTIONAL: Display the address element but allow the payer to opt out of entering data into it.
  * READ_ONLY: Display the address, but do not allow the payer to edit it.
* **Manage the display of shipping details** : After collecting shipping details from your payer, you can control their display by setting the `interaction.displayControl.shipping` field to one of the following values:

  * HIDE: Do not display the shipping details.
  * READ_ONLY: Display the shipping details, but do not allow the payer to edit them.

Alert:
* The payer cannot edit any of the shipping details previously provided.
* The functionality of the same as shipping check box is not available if the required shipping details have not been supplied.

* ***Manage language***: By default, the language displayed on the Hosted Payment Page is determined from the payer's browser. However, you can override this behavior by specifying a language identifier or Internet Engineering Task Force (IETF) language tag in the locale field; for example, en_US, es, or fr_CA. If the language you specify is not supported by the gateway, the page is displayed in the best matching language.
* ***Order ID*** : Include `order.id` in your request to identify a payment initiated from Hosted Checkout. You can use an identifier generated by your shopping cart or supply your own. Just make sure that it is unique.

For more information about the individual fields, see [INITIATE CHECKOUT](https://developer.mastercard.com/mastercard-gateway/documentation/api-reference/v100/rest/api-ops/index.md#hosted-checkout.md).

## Initiate checkout request example with customized details {#initiate-checkout-request-example-with-customized-details}

| HTTP Method |                                  URL                                  |
|-------------|-----------------------------------------------------------------------|
| POST        | https://{{host}}/api/rest/version/100/merchant/{{merchantId}}/session |

[Click here to download the Postman Collection](https://www.postman.com/mastercard/mastercard-developers/collection/4fakvrd/mastercard-gateway-api) - the path to this operation is **/Hosted Checkout/Initial Transactions/INITIATE CHECKOUT for AUTHORIZE**

```json
{
  "apiOperation": "INITIATE_CHECKOUT",
  "checkoutMode": "WEBSITE",
  "interaction": {
    "operation": "AUTHORIZE",
    "merchant": {
      "name": "<your_merchant_name> ",
      "url": "<website_url>"
    },
    "returnUrl": "https://www.your.site.url.com"
  },
  "order": {
    "currency": "{{currency}}",
    "amount": "250.00",
    "id": "{{orderId}}",
    "description": "Goods and Services"
  }
}
```

## Customize the Payment method list {#customize-the-payment-method-list}

You can choose the sequence in which payment methods display in a list on the Hosted Checkout page. The default sequence of payment methods displays if you have not set up the payment order, that is, you have both the options, either have the default sequence of payment methods or configure the same. This option is available to users who are enabled for Hosted Checkout.
Note: **APM SPI position** : The *spiProducts* component, which represents alternative payment methods integrated through the Alternative Payment Methods (APM) Service Provider Integration (SPI) framework, is always positioned at the bottom of the payment method list in the default Hosted Checkout template. This placement is fixed and cannot be changed, even if you customize the order of other payment methods. If you choose not to define a custom payment method order, the default sequence is used where *spiProducts* also appears at the end. As a result, this limitation primarily affects merchants who want complete control over payment method positioning, in which APM SPI options remain anchored to the bottom regardless of other configurations.

## Frequently asked questions {#frequently-asked-questions}

There are no restrictions on the file size or logo width. The logo height should be at least 144 px. Yes, you can host your logo image on any provider, as long as the URL is secure (HTTPS). If you are looking for a provider that can offer free HTTPS hosting, see [secure image hosting providers](https://www.google.com/search?q=secure+image+hosting+providers&safe=active&ssui=on).