Formatting

(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 behaviour on cleared form
            console.log('Form successfully cleared');
          });
        });
      }
    );
  })();