Hiding Other Elements from the Page

As shown in Modifying the Default Styles, the customStyle property in the uiCustomData object allows you to modify the look of the payment page by passing custom CSS. Among other things, this can be used to hide elements from the page.

For example, if you want to make the payment page more minimalistic, you could remove the header, the form title, and some of the transaction detail elements by setting all of them to display: none;:

<paymentPageData>
    <ppsJSONConfig>
        {
          "uiCustomData": {
            "customStyle": "#cg-amount-title,#cg-form-title,#cg-pd-title,#cg-header{display:none}"
          }
        }
    </ppsJSONConfig>
</paymentPageData>

This would result in a payment page that looks like this:

A minimalistic payment page