Documentation # CSS Customization
The CSS style of the form includes a default design. However, we have created the possibility to include custom CSS values.
Poynt Collect utilizes the styled-components library to offer extensive styling capabilities for elements, including media queries, pseudo-classes, pseudo-elements, etc. For more information, you can refer to the styled-components documentation: https://styled-components.com/docs (opens new window).
TIP
Poynt Collect utilizes the react-payment-inputs library for card inputs, which also relies on the styled-components library under the hood. For more details, you can refer to the documentation at: https://github.com/medipass/react-payment-inputs#styles (opens new window).
# Basic customization
Below is an example of the elements you can configure.
CustomCss Interface:
type CssValue = string | Record<string, string>;
interface CustomCssBase {
container?: CssValue;
inputDefault?: CssValue;
input?: {
firstName?: CssValue;
lastName?: CssValue;
email?: CssValue;
zip?: CssValue;
address?: CssValue;
city?: CssValue;
territory?: CssValue;
country?: CssValue;
phone?: CssValue;
};
}
// only applies when displayComponents.labels === false
// see https://github.com/medipass/react-payment-inputs#styles for more details
interface CustomCssReactPaymentInputs {
fieldWrapper?: {
base?: string | CssValue;
errored?: string | CssValue;
};
inputWrapper?: {
base?: string | CssValue;
errored?: string | CssValue;
focused?: string | CssValue;
};
input?: {
base?: string | CssValue;
errored?: string | CssValue;
cardNumber?: string | CssValue;
expiryDate?: string | CssValue;
cvc?: string | CssValue;
};
errorText?: {
base?: string | CssValue;
};
}
// only applies when displayComponents.labels === true
interface CustomCssLabels {
inputLabel?: CssValue;
requiredMark?: CssValue;
rowCardNumber?: CssValue;
rowExpiration?: CssValue;
rowCVV?: CssValue;
rowZip?: CssValue;
rowFirstName?: CssValue;
rowLastName?: CssValue;
rowEmailAddress?: CssValue;
rowAddress?: CssValue;
rowCity?: CssValue;
rowTerritory?: CssValue;
rowCountry?: CssValue;
rowPhone?: CssValue;
rowShippingZip?: CssValue;
}
// only applies when displayComponents.paymentLabel === true
interface CustomCssSectionLabels {
sectionLabel?: CssValue;
}
// only applies when displayComponents.inlineErrors === true
interface CustomCssError {
inputError?: CssValue;
}
type CustomCss =
CustomCssBase &
CustomCssReactPaymentInputs &
CustomCssLabels &
CustomCssSectionLabels &
CustomCssError;
Example 1:
const options = {
displayComponents: {
zipCode: true,
labels: false,
},
additionalFieldsToValidate: [
"zipCode"
],
iFrame: {
width: "100%",
height: "auto",
border: "0px",
},
customCss: {
container: {
"color": "#111",
"font-family": "Roboto, sans-serif",
"height": "auto",
"flex-flow": "row wrap",
"justify-content": "normal",
"align-content": "center",
"margin": "0 auto",
},
fieldWrapper: {
base: {
"margin-bottom": "1rem",
},
},
inputWrapper: {
base: {
"border-color": "green",
},
errored: {
"border-color": "maroon",
},
focused: {
"border-color": "unset",
"box-shadow": "unset",
"outline": "1px solid blue",
"outline-offset": "0px",
},
},
input: {
base: {
"font-family": "Roboto, Open Sans, Segoe UI, sans-serif",
"color": "green",
},
errored: {
"color": "maroon",
},
cardNumber: {
"width": "17rem",
},
expiryDate: {
"width": "5rem",
},
cvc: {
"width": "3rem",
},
zip: {
"width": "5rem",
},
},
errorText: {
base: {
"color": "maroon",
"position": "absolute",
"margin-top": "60px",
"margin-left": "5px",
},
},
},
};
collect.mount("domElementId", document, options);
Example 2:
const options = {
displayComponents: {
labels: true,
zipCode: true,
firstName: true,
lastName: true,
emailAddress: true,
},
additionalFieldsToValidate: [
"zipCode",
"firstName",
"lastName",
"emailAddress"
],
iFrame: {
width: "100%",
height: "390px",
border: "0px",
},
style: {
theme: "ecommerce",
},
customCss: {
container: `
color: #111;
font-family: 'Roboto, sans-serif';
height: auto;
flex-flow: row wrap;
justify-content: normal;
align-content: center;
margin: 15px auto;
`,
inputLabel: `
color: #111;
display: block;
font-size: 15px;
font-weight: 700;
line-height: 20px;
margin-bottom: 7.5px;
margin-top: 5px;
text-transform: capitalize;
letter-spacing: 0px;
`,
inputDefault: `
color: #111;
font-family: 'Roboto, sans-serif';
font-size: 15px;
line-height: 20px;
`,
sectionLabel: `
font-size: 13px;
line-height: 18px;
font-weight: 500;
letter-spacing: 0.5px;
color: #767676;
text-transform: uppercase;
margin-top: 15px;
margin-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
`,
requiredMark: `
color: #ae1302;
font-size: 15px;
line-height: 20px;
margin-left: 3px;
`,
rowFirstName: `
width: 50%;
padding-left: 0px;
`,
rowLastName: `
width: 50%;
padding-right: 0px;
`,
rowCardNumber: `
width: 75%;
padding-left: 0px;
`,
rowCVV: `
width: 35%;
padding-left: 0px;
`,
rowExpiration: `
width: 25%;
padding-right: 0px;
`,
rowZip: `
width: 65%;
padding-right: 0px;
`,
rowEmailAddress: `
width: 100%;
margin-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
`,
},
};
collect.mount("domElementId", document, options);
# Media queries
You can use template strings as CSS values to apply styles with media queries for elements.
Example:
const options = {
...
customCss: {
container: `
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
`,
},
};
# Pseudo-classes
Template strings also allow you to use pseudo-classes for styling.
Example:
const options = {
...
customCss: {
container: `
display: flex;
flex-direction: row;
&:hover {
background-color: black;
}
`,
},
};
# Pseudo-elements
In addition to pseudo-classes, you can also use pseudo-elements.
Example:
const options = {
...
customCss: {
container: `
display: flex;
flex-direction: row;
&::before {
content: "Some content";
}
`,
},
};
# Errored inputs styling
By using template strings, you can add styles for inputs that are in an errored state (when the input was touched and didn't pass the validation check). To achieve this, you can check for the data-error HTML attribute on the input element.
Example 1:
You can apply styles to all input elements at once by using the inputDefault property:
const options = {
...
customCss: {
inputDefault: `
color: #111;
font-family: Roboto, sans-serif;
font-size: 15px;
line-height: 20px;
&[data-error="true"] {
border: 1px solid #b61717;
}
`,
},
};
Example 2:
You can also apply styles to each input separately:
const options = {
...
customCss: {
input: {
firstName: `
&[data-error="true"] {
border: 2px solid #b61717;
}
`,
lastName: `
&[data-error="true"] {
border: 2px solid #b61717;
}
`,
email: `
&[data-error="true"] {
border: 1px solid #b61717;
}
`,
}
},
};