Custom style for payment fields

DocsCurrent

Last updated: Apr 24th, 2:06am

The attributes for style.variable and style.rules are as follows:

`variable`

Parameter	Description
`fontFamily`	Set the font family of payment fields text.
`fontSizeBase`	Set the input size, 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 incorrect 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 for incorrect input.
`.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");