Custom style for payment fields

DOCSCurrent

Last updated: Aug 15th, 7:29am

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      fontSizeSm: "0.81rem",
11      fontSizeM: "0.93rem",
12      fontSizeLg: "1.0625rem",
13      textColor: "#2c2e2f",
14      colorTextPlaceholder: "#2c2e2f",
15      colorBackground: "#fff",
16      colorInfo: "#0dcaf0",
17      colorDanger: "#d20000",
18      borderRadius: "0.2rem",
19      borderColor: "#dfe1e5",
20      borderWidth: "1px",
21      borderFocusColor: "black",
22      spacingUnit: "10px",
23    },
24
25    // set custom rules to apply to fields classes (optional)
26    // see https://www.w3schools.com/css/css_syntax.asp fore more on selectors and declarations
27    rules: {
28      ".Input": {},
29      ".Input:hover": {},
30      ".Input:focus": {
31        color: 'blue',
32        boxShadow: '0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)',
33      },
34      ".Input:active": {},
35      ".Input--invalid": {},
36      ".Label": {},
37    },
38  },
39})
40.render("#oxxo-container");