Menu

Formatting

SDK v1
Last updated September 2021

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 TypeFormatting
Visa, Mastercard, JCB, Discover, Diners, MaestroXXXX XXXX XXXX XXXX
AmexXXXX XXXXXX XXXXX

Enabling PAN formatting

Copied!
(function () {
    var form = document.getElementById("card-form");
    var clear = document.getElementById("clear");
    Worldpay.checkout.init(
      {
        id: "MerchantID",
        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');
          });
        });
      }
    );
  })();