Style
String Direct CSS Styling
The stringPay.setStyle(style)
method takes a style
object which has a property called "PCIInnerElements" which optionally contains style rules for the states defined below. These states are objects that can contain most CSS rules as properties. The CSS rules must be written in camelCase instead of kebab-case as you may be used to (i.e. "fontSize:" not "font-size:").
State | Description |
---|---|
base | The base, default rules. Applies to all states if not overridden. |
hover | Rules applied when a field is hovered over. |
focus | Rules applied when a field is focused on. |
valid | Rules applied when a field is valid. |
invalid | Rules applied when a field is invalid. |
placeholder | Takes an object with the "base" or "focus" states as properties. |
autofill | Rules applied when a field is autofilled (i.e. by their browser or password manager). |
Example
const style = {
PCIInnerElements: {
base: {
color: "#0C1116",
fontSize: "16px",
},
invalid: {
color: "#E25950",
},
autofill: {
backgroundColor: "#FFFFFF",
},
placeholder: {
base: {
color: "#8A98A9",
}
}
}
}
stringPay.setStyle(style);
Updated over 1 year ago