Modifying the Default Styles
You can customize the visual appearance of the payment page by modifying its default CSS styles. This includes changing colors, fonts, and other visual elements to match your brand or design preferences.
Important: Always thoroughly test any custom styles in a development environment before deploying to production. Custom CSS modifications can affect payment page functionality and user experience.
If you encounter any issues with the payment page, the first troubleshooting step should be to remove your custom styles and test again to determine if the issue is related to your customizations.
Please note that Hyp CreditGuard is not responsible for issues that arise from incorrect or incompatible custom CSS implementations.
To do this, you use the customStyle property in the uiCustomData object to pass a string containing minified CSS, like this:
<paymentPageData>
<ppsJSONConfig>
{
"uiCustomData": {
"customStyle": "#logo-icon{display:none}#cg-submit-btn{height:40px;color:#28a745;border-radius:0.25rem;box-shadow:none}",
}
}
</ppsJSONConfig>
</paymentPageData>You can use your browser's developer tools to inspect the payment page elements and locate those that you want to modify. The payment page uses a combination of IDs and classes for its elements, so you can target them with standard CSS selectors.
Note that if your custom CSS refers to your business logo or other custom images, you need to submit them for verification first.
The following table lists some of the most commonly modified elements of the payment page.
Body
#cg-container
Element wrapper for the entire payment page.
#cg-header
Component container for the payment page header that normally contains the Hyp or business logo and the shield icon.
#cg-tx-container
Component container for all payment page elements except the header. Includes sections for transaction detail (#cg-tx-info) and payment form (#cg-tx-form).
Header
#cg-header-wrapper
Container for the logo and the shield.
#logo-icon
Logo image wrapper.
#shield-icon
Shield image wrapper.
Transaction detail section
#cg-tx-info
Container for the transaction detail section that contains a title, descriptions of currency and amount due.
#cg-pd-title
Transaction detail section title.
#cg-pd-wrapper
Container for all transaction detail elements except for the section title.
.cg-group-info
Wrapper for currency description elements.
#cg-key-currency
Transaction currency label.
#cg-val-currency
Transaction currency code.
Payment form
#cg-tx-form
Container for the payment form.
#cg-form-title
Payment form title.
#cg-form
Container for all payment form elements except for the title.
Card number field
#cg-form-group-card-number
Card number field container: includes label, input, error message.
#label-card-number
Label for card number input.
#card-number
Card number input.
#error-card-number
Error message related to card number input.
Expiration year field
#cg-form-group-expYear
Expiration year field container: includes label, dropdown, error message.
#label-expYear
Label for expiration year dropdown.
#expYear
Expiration year dropdown.
#error-expYear
Error message related to expiration year selection.
Expiration month field
#cg-form-group-expMonth
Expiration month field container: includes label, dropdown, error message.
#label-expMonth
Label for expiration month dropdown (hidden by default).
#expMonth
Expiration month dropdown.
#error-expMonth
Error message related to expiration month selection.
CVV field
#cg-form-group-cvv
CVV field container: includes label, input, error message.
#label-cvv
Label for CVV input.
#cvv
CVV input.
#error-cvv
Error message related to CVV input.
Personal ID field - Israel only
#cg-form-group-personal-id
Personal ID field container: includes label, input, error message.
#label-personal-id
Label for personal ID input.
#personal-id
Personal ID input.
#error-personal-id
Error message related to personal ID input.
Number of payments (installments) field - Israel only
#cg-form-group-num-of-payments
Number of payments field container: includes label, dropdown, error message, breakdown of payments.
#label-num-of-payments
Label for the number of payments dropdown.
#num-of-payments
Number of payments dropdown.
#error-num-of-payments
Error message related to the number of payments.
#cg-payment-calc
Breakdown of monthly payments displayed after selecting a value in the dropdown.
User data fields
#cg-form-group-user-data-{1-10}
Custom user data field container: includes label, input, error message.
#label-user-data-{1-10}
Label for custom user data input.
#user-data-{1-10}
Custom user data input.
#error-user-data-{1-10}
Error message related to custom user data input.
Payment form submission and reset controls
#cg-submit-btn
Payment form submission button.
#cg-clear
Clear payment form action link.
#cg-cancel
Cancel transaction button.
Footer (does not display in iframe)
#cg-footer
Component container for payment page footer.
#cg-logo-group
Wrapper for the PCI logo.
#cg-brand-group
Wrapper for the "Secured by Hyp" logo.
You can also redefine the Hyp payment page’s root theme colors in your custom CSS. The default root variables are as follows:
Let's suppose that you want to display the payment page in a dark theme. Here's how you could redefine root colors and customize several elements with customStyle:
This would result in rendering the payment page like this:
Last updated
Was this helpful?