# Configuring the Transition Page

By default, after processing a transaction based on the data entered on the payment page, Hyp will display a transition page before [redirecting](/enterprise/payment-page-integration/integrating-hyps-payment-page-and-accepting-payment.md#handle-payment-completion-redirect) the customer back to the merchant's website.

In case of an error, such as a credit card decline or invalid CVV, the transition page allows the customer to reopen the payment page with their previously entered payment details pre-filled so they can modify the details and retry. The customer is given 3 retries.

![Payment failed](/files/HcOKtCO0OPi2ZKwIAbSI)

If a transaction was successful, the transition page notifies the customer, then redirects to your merchant website's success page:

![Payment successful](/files/ShRbTSd1o8lL8tbsWFCj)

If you prefer to fully handle success and error responses on your merchant website, you can opt out of the transition page. For example, you may want to provide custom error messages on your merchant website's error page and allow the customer to open the payment page anew. This approach gives you more control over error handling, but the customer will re-enter their payment details for every attempt.

Inside `uiCustomData`, there are two properties that determine how and if the transition page is displayed: `disableTxnRedirectPopup` and `disableRetryOnFailure`.

```json
<paymentPageData>
    <ppsJSONConfig>
        {
          "uiCustomData": {
            "disableTxnRedirectPopup": true,
            "disableRetryOnFailure": true
          }
        }
    </ppsJSONConfig>
</paymentPageData>
```

Both of these properties are set to `false` by default.

Here's how the behavior changes depending on the combination of the two properties:

* `disableTxnRedirectPopup: false` (default), `disableRetryOnFailure: false` (default):
  * On success, the transition page displays, then redirects to the merchant website's success page.
  * On error, the transition page displays, allowing the customer to retry the transaction up to 3 times.
* `disableTxnRedirectPopup: true`, `disableRetryOnFailure: false` (default):
  * On success, instead of the transition page, a loading animation is displayed before redirecting the customer to your merchant website's success page.
  * On error, the transition page displays, allowing the customer to retry the transaction up to 3 times.
* `disableTxnRedirectPopup: false` (default), `disableRetryOnFailure: true`:
  * On success, the transition page displays, then redirects to the merchant website's success page.
  * On error, the transition page displays without an option to retry, then redirects to your merchant website's error page.
* `disableTxnRedirectPopup: true`, `disableRetryOnFailure: true`. On both success and error, the transition page is skipped. A loading animation is shown before redirecting to your merchant website’s success or error page.

In addition to configuring the transition page's behavior, you can also [provide custom styles](/enterprise/changing-the-default-payment-page-appearance/modifying-the-default-styles.md) for it using the `customStyle` property, or even [hide some of its elements](/enterprise/changing-the-default-payment-page-appearance/hiding-other-elements-from-the-page.md) altogether:

```json
<paymentPageData>
    <ppsJSONConfig>
        {
          "uiCustomData": {
            "customStyle": "#cg-popup-anim{display:none}#cg-popup-wrapper{width:100%;height:100vh;background:radial-gradient(#ccc 1px,transparent 1px),radial-gradient(#ccc 1px,transparent 1px);background-position:0 0,10px 10px;background-size:20px 20px}"
          }
        }
    </ppsJSONConfig>
</paymentPageData>
```

Here's a list of IDs for some of the elements of the transition page that you can target in your custom CSS:

* `#cg-popup-wrapper`: page wrapper.
* `#cg-popup-content`: page content container.
* `#cg-popup-anim`: animation container.
* `#cg-popup-title`: page title.
* `#cg-popup-p`: regular paragraph text.
* `#cg-popup-button`: redirect button.
* `#cg-popup-cancel`: cancel transaction button (if available).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.hyp.co.il/enterprise/changing-the-default-payment-page-appearance/configuring-the-transition-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
