XPay Web SDK Styling

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?

javascript

    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": {},
        },
      };