**Last updated**: 24 June 2025 | [**Change log**](/products/checkout/web/changelog/)

# Formatting

## PAN formatting

The SDK allows PAN formatting as the customer types. This feature is disabled by default.

The PAN is formatted in the following way:

| Card type | Formatting |
|  --- | --- |
| Visa, Mastercard, JCB, Discover, Diners, Maestro | XXXX XXXX XXXX XXXX |
| Amex | XXXX XXXXXX XXXXX |


#### Enabling PAN formatting


```javascript
(function () {
    var form = document.getElementById("card-form");
    var clear = document.getElementById("clear");
    Worldpay.checkout.init(
      {
        id: "your-checkout-id",
        form: "#card-form",
        fields: {
          pan: {
            selector: "#card-pan",
            placeholder: "4444333322221111"
          },
          cvv: {
            selector: "#card-cvv",
            placeholder: "123"
          },
          expiry: {
            selector: "#card-expiry",
            placeholder: "MM/YY"
          }
        },
        enablePanFormatting: true
      },
      function (error, checkout) {
        if (error) {
          console.error(error);
          return;
        }
        form.addEventListener("submit", function (event) {
          event.preventDefault();
          checkout.generateSessionState(function (error, sessionState) {
            if (error) {
              console.error(error);
              return;
            }
            // session state for card details
            alert(sessionState);
          });
        });
        clear.addEventListener("click", function(event) {
          event.preventDefault();
          checkout.clearForm(function() {
            // trigger desired behavior on cleared form
            console.log('Form successfully cleared');
          });
        });
      }
    );
  })();
```