# Integrate Hosted Checkout source: https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-hosted-checkout/index.md Follow these steps to set up the Hosted Checkout solution in your system. ## Prerequisites {#prerequisites} Before implementing a Hosted Checkout solution, check with your payment service provider to make sure you: * [Have a merchant account](https://developer.mastercard.com/mastercard-gateway/documentation/getting-started/accessing-the-api/index.md) and that your merchant profile is enabled for the Hosted Checkout service. * Select and set up your API authentication method. * Enable the Notifications service, if you want to be notified of successful payments. It allows the Mastercard Gateway to send email or [Webhook](https://developer.mastercard.com/mastercard-gateway/documentation/gateway-features/webhook-noti/index.md) notifications to you, and email notifications to the payer on your behalf. ## Implementing a Hosted Checkout solution {#implementing-a-hosted-checkout-solution} * The Hosted Checkout solution works through [REST Server API](https://developer.mastercard.com/mastercard-gateway/documentation/api-reference/v100/rest/index.md) operations (requests and responses), which are used to, for example, initiate or retrieve information about various payment transactions and store card details. * You also need the Checkout JavaScript library to implement the Hosted Payment Page in your app or web page, when payer participation is needed to gather payment details for a transaction. Warning: * To perform an operation, you must first have it enabled on your merchant profile by your payment service provider. To check which operations are available for you to use, contact your payment service provider. * The operations available to you are limited to the capability of the acquirers configured on your merchant profile with the Mastercard Gateway. If a functionality is not supported for the acquirer, any requests to execute that functionality are rejected for that acquirer. When payer participation is needed, Hosted Checkout usually consists of the following steps: 1. [Establishing a Checkout Session](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-hosted-checkout/establishing-a-session/index.md) Request a checkout session using the INITIATE CHECKOUT operation. 2. [Implement a Hosted Payment Page](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-hosted-checkout/implementing-the-hosted-payment-page/index.md) Show the payer either an Embedded Page or a Payment Page and start the payment process. Optionally, include callbacks for handling events that occur during the payment interaction, such as the payer canceling the payment, the session timing out, or redirecting the payer to another website to finish payment (such as when using [PayPal](https://developer.mastercard.com/mastercard-gateway/documentation/payment-methods/digital-wallets/paypal/index.md)). 3. [Interpret the Transaction Response](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-hosted-checkout/interpreting-the-response/index.md) Receive the results of the payment from the gateway and update your system with the payment details. Return the payer to your web site and display the payment receipt to them. For a collection of example requests covering the common transaction operation requests, download the [Postman collection](https://www.postman.com/mastercard/mastercard-developers/collection/4fakvrd/mastercard-gateway-api). Alert: The API request to establish the checkout session must be made from the merchant's backend server. Do not invoke any API operation directly from the payer's browser. After you have finished the basic integration and can process the first payment using the Hosted Payment Page, you can: 4. Determine any customizations that you need to make based on the specific [payment methods](https://developer.mastercard.com/mastercard-gateway/documentation/payment-methods/index.md) you want to support on the Hosted Payment Page. 5. Define any [customizations](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/customizing-the-checkout/index.md) that you want to use in the Hosted Payment PageCheckout. 6. Consider what kind of [security](https://developer.mastercard.com/mastercard-gateway/documentation/security-and-fraud/index.md) or other [additional features](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-gateway-features/index.md) that you want to offer or use in your integration. 7. Implement any [subsequent transactions](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-hosted-checkout/subsequent-operations/index.md) that you want to initiate from your backend server, such as CAPTURE or REFUND 8. [Test](https://developer.mastercard.com/mastercard-gateway/documentation/testing/test-your-int/hosted-checkout/index.md) your entire solution. Warning: Before you complete your integration, see the [Frequently asked questions](https://developer.mastercard.com/mastercard-gateway/documentation/integrations-types/hosted-checkout/integrate-hosted-checkout/index.md#frequently-asked-questions) section for answers to some common concerns and tips. ## Frequently asked questions {#frequently-asked-questions} Before you complete your integration, see the Frequently asked questions section for answers to some common concerns and tips. Yes, Microsoft Edge versions 113 and newer are supported. The Hosted Checkout model is secure as it requires you to authenticate to the gateway, and the payment details collected on the Hosted Payment Page are submitted directly from the payer's browser to the gateway. Warning: If you choose not to redirect the payer from the Hosted Payment Page back to your web site, check the notification email or log on to the Merchant Administration portal to ensure that the order details are correct before you ship the goods or services to the payer. If you want to offer your customers a good mobile experience for Hosted Checkout, add a meta tag named viewport to your site's page. ```html ``` Define the right viewport values for your pages and test your own site with them.