Customizing payment fields
Control the presentation and behavior of card input fields rendered by the SDK
UI Customization (CSS and Labels)
Use the options below to style the user interface and customize labels within the SDK.
IMPORTANT: Custom CSS Warning 🛑By default, the SDK retrieves its CSS from the Hosted Payment Fields (HPF) configuration defined in the Praxis Back office (Atlas). This CSS should typically be customized and persisted there.
Praxis recommends overriding this via the SDK configuration only if you need to apply session-specific changes or dynamic styling.
Customization Properties
1. CSS Styling
| Property | Type | Usage |
|---|---|---|
css | Object / string | Property to initialize custom CSS directly within the SDK configuration object at startup. |
sendCSS | function | Function used to dynamically modify the CSS after the SDK object has been initialized. |
2. Labels and Placeholders
| Property | Type | Usage |
|---|---|---|
labels | Object | Property to define custom labels and/or placeholders for fields like Credit Card Number, CVV, etc. |
3. Display Toggles
To control whether custom labels or placeholders are actually displayed, you must set the following global JavaScript variables before initializing the SDK:
| Global Variable | Effect |
|---|---|
window.PG_INPUT_SHOW_LABELS | If passed, custom labels defined in the labels object will be shown. |
window.PG_INPUT_SHOW_PLACEHOLDERS | If passed, custom placeholders defined in the labels object will be shown. |
Updated about 2 months ago