Custom style for payment fields

DocsCurrent

Last updated: Apr 24th, 2:07am

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");

Custom style for payment fields

variable

rules

If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more

`variable`

`rules`