# Overview When [integrating Hyp CreditGuard’s payment page](/creditguard/payment-page-integration/integrating-hyps-payment-page-and-accepting-payment.md), 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](/creditguard/payment-page-integration/full-page-redirect-vs-iframe-based-integration.md) integrations. {% hint style="info" %} You can only customize the appearance of the current payment page design, not the legacy design. {% endhint %} {% hint style="warning" %} Hyp's standard payment page design provides accessibility in compliance with [WCAG 2.1](https://www.w3.org/TR/WCAG21/) Level AA, as defined in Hyp's [accessibility statement](https://hyp.co.il/%D7%94%D7%A6%D7%94%D7%A8%D7%AA-%D7%A0%D7%92%D7%99%D7%A9%D7%95%D7%AA/). 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. {% endhint %} ## Interactive playground You can use the [Hyp playground](https://hyp-playground.netlify.app/) 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 `` 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: ```xml 2000 ENG doDeal {terminalNumber} ... { "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" } } } ``` 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](/creditguard/payment-page-integration/full-page-redirect-vs-iframe-based-integration.md) 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](/creditguard/changing-the-default-payment-page-appearance/adding-business-logo-and-custom-images.md). * `customStyle`: see [Modifying the Default Styles](/creditguard/changing-the-default-payment-page-appearance/modifying-the-default-styles.md) and [Hiding Other Elements From the Page](/creditguard/changing-the-default-payment-page-appearance/hiding-other-elements-from-the-page.md). * `customText`: see [Customizing the Default Text](/creditguard/changing-the-default-payment-page-appearance/customizing-the-default-text.md). * `disableBitRedirect`: see [Changing the Redirect Behavior When Using bit](/creditguard/changing-the-default-payment-page-appearance/changing-the-redirect-behavior-when-using-bit.md). * `disableRetryOnFailure`: see [Configuring the Transition Page](/creditguard/changing-the-default-payment-page-appearance/configuring-the-transition-page.md). * `disableTxnRedirectPopup`: see [Configuring the Transition Page](/creditguard/changing-the-default-payment-page-appearance/configuring-the-transition-page.md). * `inputLabelType`: see [Configuring Field Display Options](/creditguard/changing-the-default-payment-page-appearance/configuring-field-display-options.md). * `inputPlaceholder`: see [Configuring Field Display Options](/creditguard/changing-the-default-payment-page-appearance/configuring-field-display-options.md). * `keepCCDetails`: see [Suggesting To Save Credit Card Data](/creditguard/changing-the-default-payment-page-appearance/suggesting-to-save-credit-card-data.md). * `paymentMethods`: see [Showing Saved Credit Cards](/creditguard/changing-the-default-payment-page-appearance/showing-saved-credit-cards.md) and [Hiding Payment Methods](/creditguard/changing-the-default-payment-page-appearance/hiding-payment-methods.md). * `skipPaymentMethodsScreen`: see [Hiding Payment Methods](/creditguard/changing-the-default-payment-page-appearance/hiding-payment-methods.md). * `uiLang`: see [Changing the UI Language](/creditguard/changing-the-default-payment-page-appearance/changing-the-ui-language.md). * `userData`: see [Adding Custom Input Fields](/creditguard/changing-the-default-payment-page-appearance/adding-custom-input-fields.md). --- # 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/creditguard/changing-the-default-payment-page-appearance/overview.md?ask= ``` 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.