Custom style for payment fields

DocsCurrentLast updated: November 17th 2023, @ 4:51:27 pm


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:


paypal.PaymentFields({  
  fundingSource: paypal.FUNDING.OXXO,

  // style object is optional
  style: {
    // customize field attributes (optional)
    variables: {
      fontFamily: "'Helvetica Neue', Arial, sans-serif",
      fontSizeBase: "0.9375rem",
      fontSizeM: "0.93rem",
      textColor: "#2c2e2f",
      colorTextPlaceholder: "#2c2e2f",
      colorBackground: "#fff",
      colorDanger: "#d20000",
      borderRadius: "0.2rem",
      borderColor: "#dfe1e5",
      borderWidth: "1px",
      borderFocusColor: "black",
      spacingUnit: "10px",
    },

    // set custom rules to apply to fields classes (optional)
    // see https://www.w3schools.com/css/css_syntax.asp fore more on selectors and declarations
    rules: {
      ".Input": {},
      ".Input:hover": {},
      ".Input:focus": {
        color: 'blue',
        boxShadow: '0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)',
      },
      ".Input:active": {},
      ".Input--invalid": {},
      ".Label": {},
    },
  },
})
.render("#oxxo-container");