> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://ixopay.ferndocs.com/developer-hub/documentation/reference/integration/hosted-fields-payment-js/advanced-guides/form-styling/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://ixopay.ferndocs.com/_mcp/server.

# Form styling

Using [`setNumberStyle()`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#setnumberstyle) and [`setCvvStyle()`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#setcvvstyle) in combination with [Event listening](https://documentation.ixopay.com/docs/reference/integration/payment.js/event-listening) allows styling the input fields similar to the rest of your forms.

## Known limitations

While payment.js provides the most seamless integration for a website, it has one limitation due to PCI requirements: external resources cannot be loaded. Because of this constraint, it is not possible to load external fonts or background images.

## How to use

```javascript
const payment = new PaymentJs();
payment.init("$INTEGRATION_KEY", "cc-number", "cc-csc", (payment) => {
  var numberFocused = false;
  var cvvFocused = false;
  var style = {
    border: "3px solid gray",
  };
  var hoverStyle = {
    border: "3px solid blue",
  };
  var focusStyle = {
    border: "3px solid green",
  };

  // Set the initial style
  payment.setNumberStyle(style);
  payment.setCvvStyle(style);

  // Focus events
  payment.numberOn("focus", () => {
    numberFocused = true;
    payment.setNumberStyle(focusStyle);
  });
  payment.cvvOn("focus", () => {
    cvvFocused = true;
    payment.setCvvStyle(focusStyle);
  });

  // Blur events
  payment.numberOn("blur", () => {
    numberFocused = false;
    payment.setNumberStyle(style);
  });
  payment.cvvOn("blur", () => {
    cvvFocused = false;
    payment.setCvvStyle(style);
  });

  // Hover events
  payment.numberOn("mouseover", () => {
    // Don't override style if element is already focused
    if (!numberFocused) {
      payment.setNumberStyle(hoverStyle);
    }
  });
  payment.numberOn("mouseout", () => {
    // Don't override style if element is already focused
    if (!numberFocused) {
      payment.setNumberStyle(style);
    }
  });
  payment.cvvOn("mouseover", () => {
    // Don't override style if element is already focused
    if (!cvvFocused) {
      payment.setCvvStyle(hoverStyle);
    }
  });
  payment.cvvOn("mouseout", () => {
    // Don't override style if element is already focused
    if (!cvvFocused) {
      payment.setCvvStyle(style);
    }
  });
});
```

### Style placeholders

The [`setNumberStyle()`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#setnumberstyle) and [`setCvvStyle()`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#setcvvstyle) methods also support styling the placeholder of the number and CVV fields by providing the styles in the field `::placeholder`:

```javascript
const payment = new PaymentJs();
payment.init("$INTEGRATION_KEY", "cardnumber", "cvc", (payment) => {
  var style = {
    // combine with other styles
    color: "#000",
    "::placeholder": {
      color: "#a00",
    },
  };

  // Set the placeholder style
  payment.setNumberStyle(style);
  payment.setCvvStyle(style);
});
```