Custom style for payment fields

DOCSBeta

Last updated: Aug 15th, 6:05am

Supported variables and rules parameters for payment fields style object:

Variables
Parameter	Description
`fontFamily`	Set the font-family of payment fields text
`fontSizeBase`	Set the size of the input, placeholder, and dropdown text values
`fontSizeM`	Set the size of the payment fields title description
`textColor`	Set the color of the payment fields title description, input, and dropdown text
`colorTextPlaceholder`	Set the color of the placeholder text
`colorBackground`	Set the background color of the input and dropdown fields
`colorDanger`	Set the color for the invalid field border and validation text
`borderRadius`	Set the border radius for the input and dropdown fields
`borderWidth`	Set the border width for the input and dropdown fields
`borderFocusColor`	Set the border color of the field that is focused
`spacingUnit`	Set the distance between fields (when there are multiple fields)

Rules
Parameter	Description
`.Input`	Set CSS properties for the input fields
`.Input:hover`	Set CSS properties for the input fields on mouse hover
`.Input:focus`	Set CSS properties for the input fields on focus
`.Input:active`	Set CSS properties for the input fields when clicked
`.Input--invalid`	Set CSS properties for the input fields when invalid input is entered
`.Label`	Set CSS properties for the input field labels

The following example shows how you can use the styles object:

1paypal.PaymentFields({  
2  fundingSource: paypal.FUNDING.OXXO,
3
4  // style object is optional
5  style: {
6    // customize field attributes (optional)
7    variables: {
8      fontFamily: "'Helvetica Neue', Arial, sans-serif",
9      fontSizeBase: "0.9375rem",
10      fontSizeM: "0.93rem",
11      textColor: "#2c2e2f",
12      colorTextPlaceholder: "#2c2e2f",
13      colorBackground: "#fff",
14      colorDanger: "#d20000",
15      borderRadius: "0.2rem",
16      borderColor: "#dfe1e5",
17      borderWidth: "1px",
18      borderFocusColor: "black",
19      spacingUnit: "10px",
20    },
21
22    // set custom rules to apply to fields classes (optional)
23    // see https://www.w3schools.com/css/css_syntax.asp fore more on selectors and declarations
24    rules: {
25      ".Input": {},
26      ".Input:hover": {},
27      ".Input:focus": {
28        color: 'blue',
29        boxShadow: '0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)',
30      },
31      ".Input:active": {},
32      ".Input--invalid": {},
33      ".Label": {},
34    },
35  },
36})
37.render("#oxxo-container");