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 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

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

Payment successful

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.

<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 for it using the customStyle property, or even hide some of its elements altogether:

<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).