Overview

When integrating Hyp CreditGuard’s payment page, you often want to tailor the look and feel of the page to better match your merchant website's branding and create a smoother checkout experience. This is where ppsJSONConfig comes in — a configuration element that you can insert into your payment page requests. You can use ppsJSONConfig in both full-page and iframe-based integrations.

You can only customize the appearance of the current payment page design, not the legacy design.

Hyp's standard payment page design provides accessibility in compliance with WCAG 2.1 Level AA, as defined in Hyp's accessibility statement. Any customizations you make to the payment page design may not comply with the WCAG 2.1 standard, and it is your responsibility as a merchant to ensure that your customized payment page meets accessibility requirements.

Interactive playground

You can use the Hyp playground to experiment with various payment page settings and quickly see how they affect the page's look and behavior.

The playground allows you to define the payment page configuration with a UI builder, preview the resulting payment page, and use the API request view to copy the specific XML payload that generates the payment page you've constructed.

What is ppsJSONConfig

The ppsJSONConfig is an XML element inside the <paymentPageData> block of a doDeal request. It contains a JSON object with several configuration properties that you can use to control what various elements of your payment page look like, what elements to add or hide, and how to modify the default behavior. Among other things, this enables you to:

• Change the default UI language.

• Change the logo and text labels.

• Add custom fields, such as for collecting an email, address, etc., and supply validation rules.

• Configure payment methods displayed on the payment page.

• Provide custom CSS matching your brand style.

Here's a request with ppsJSONConfig containing most supported JSON properties with sample values:

<ashrait>
    <request>
        <version>2000</version>
        <language>ENG</language>
        <command>doDeal</command>
        <doDeal>
            <terminalNumber>{terminalNumber}</terminalNumber>
            ...
            <paymentPageData>
                <ppsJSONConfig>
                    {
                      "frameAncestorURLs": "https://your-merchant-website.com",
                      "uiCustomData": {
                        "businessLogoUrl": "logo.png",
                        "uiLang": "eng",
                        "keepCCDetails": true,
                        "skipPaymentMethodsScreen": true,
                        "paymentMethods": [
                          {
                            "type": "token",
                            "token": "1066083457795999",
                            "cardExpiration": "0130"
                          }
                        ],
                        "disableRetryOnFailure": true,
                        "disableTxnRedirectPopup": true,
                        "inputPlaceholder": true,
                        "inputLabelType": "DYNAMIC",
                        "userData": [
                          {
                            "id": 1,
                            "label": "Email Address",
                            "required": true,
                            "readonly": false,
                            "size": 100,
                            "minLength": 5,
                            "maxLength": 100
                          }
                        ],
                        "customStyle": "#logo-icon{display:none}#cg-submit-btn{height:40px;color:#28a745;border-radius:0.25rem;box-shadow:none}",
                        "customText": {
                          "cg-pd-title": "Tx detail title",
                          "cg-form-title": "Transaction form title",
                          "label-card-number": "Custom card number label",
                          "label-expYear": "Custom expiration year label",
                          "label-expMonth": "Custom expiration month label",
                          "label-cvv": "Custom CVV label",
                          "cg-submit-btn": "Custom submit button text"
                        }
                      }
                    }
                </ppsJSONConfig>
            </paymentPageData>
        </doDeal>
    </request>
</ashrait>

As you can see from the example, the JSON object inside ppsJSONConfig has two top-level properties: frameAncestorURLs and uiCustomData.

If you're using iframe-based integration of the payment page, you need to specify the frameAncestorURLs property and point it to your merchant website for the iframe integration to work properly.

All other ways to configure the look and feel of your payment page are contained inside the uiCustomData property. The following sections explain various tasks that you can perform using top-level properties of uiCustomData. Here's a reference that shows which section describes which uiCustomData property:

• businessLogoUrl: see Adding Business Logo and Custom Images.

• customStyle: see Modifying the Default Styles and Hiding Other Elements From the Page.

• customText: see Customizing the Default Text.

• disableBitRedirect: see Changing the Redirect Behavior When Using bit.

• disableRetryOnFailure: see Configuring the Transition Page.

• disableTxnRedirectPopup: see Configuring the Transition Page.

• inputLabelType: see Configuring Field Display Options.

• inputPlaceholder: see Configuring Field Display Options.

• keepCCDetails: see Suggesting To Save Credit Card Data.

• paymentMethods: see Showing Saved Credit Cards and Hiding Payment Methods.

• skipPaymentMethodsScreen: see Hiding Payment Methods.

• uiLang: see Changing the UI Language.

• userData: see Adding Custom Input Fields.