XPay SDK styling, payment labels, and placeholders can be modified as per the website's UI/UX.

For styling, CSS styling needs to be passed in different input state objects, as mentioned below.

What does each input state refer to?

Input Field Object Explanation
.input The input field is in a simpl state.
.invalid When some error is shown on the input field, like an invalid card number.
:focus When an input field is being focused.
:hover When an input field is being hovered.
::placeholder Placeholder of input fields
::selection Selecting input fields
.label Labels of input fields 
    const options = {
        override: true,
        fields: {
          creditCard: {
            placeholder: "4234 1234 1234 1234",
            label: "Enter your credit card",
          },
          exp: {
            placeholder: "Exp. Date",
          },
          cvc: {
	          placeholder: "CVC",
          },
        },
        style: {
          ".input": {
            "border": "1px solid black",
            "border-radius": "15px"
           },
          ".invalid": {},
          ".label": {
            "font-size": "18px"
           },
          ".input:focus":{},
          ":focus": {},
          ":hover": {},
          "::placeholder": {},
          "::selection": {},
        },
      };