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

# Create a `sessions` object

Create a `sessions.card` by sending your customer's card details.

A `sessions` object is a unique identifier for your customer's card details, which is generated by the SDK.

### Using `sessions.card`

Use `sessions.card` to generate a [verified token](/products/verified-tokens/create-verified-token#create-a-verified-token-request) to [take a payment](/products/card-payments/v6/authorize-a-payment#-migratecardonfile-authorization).

## Getting `sessions.card`

### Submitting the form

To create `sessions.card` you must submit your customer's card details.

Here's an example of what you must do to generate `sessions.card`.

### JavaScript `sessions.card`

(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: "4444 3333 2222 1111"
        },
        expiry: {
          selector: "#card-expiry",
          placeholder: "MM/YY"
        },
        cvv: {
          selector: "#card-cvv",
          placeholder: "123"
        }
      },
      styles: {
        "input": {
          "color": "black",
          "font-weight": "bold",
          "font-size": "20px",
          "letter-spacing": "3px"
        },
        "input#pan": {
          "font-size": "24px"
        },
        "input.is-valid": {
          "color": "green"
        },
        "input.is-invalid": {
          "color": "red"
        },
        "input.is-onfocus": {
          "color": "black"
        }
      },
      accessibility: {
        ariaLabel: {
          pan: "my custom aria label for pan input",
          expiry: "my custom aria label for expiry input",
          cvv: "my custom aria label for cvv input"
        },
        lang: {
          locale: "en-GB"
        },
        title: {
          enabled: true,
          pan: "my custom title for pan",
          expiry: "my custom title for expiry date",
          cvv: "my custom title for security code"
        }
      },
      enablePanFormatting: true
    },
    function(err, checkout) {
      if (err) {
        // handle init error
        return;
      }
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        checkout.generateSessions(function(err, sessions) {
          if (err) {
            // handle session state generation error
            return;
          }

          // two sessions, one for card, one for cvc
          alert('Card session: ' + sessions.card + '\nCvc session : '+ sessions.cvv);
        });
      });

      clear.addEventListener("click", function(event) {
        event.preventDefault();
        checkout.clearForm(function() {
          // trigger desired behavior on cleared form
          console.log('Form successfully cleared');
        });
      });
    }
  );
})();

#### Event listener

The `form.addEventListener("wp:field:change", function (event)...` function waits for your customer to click the submit button.

The `event.preventDefault()` stops the form from being submitted. Invoking this action is **optional**.

#### Generate `sessions.card`

To generate the `sessions` object you **must** invoke the `checkout.generateSessions` method to get `sessions.card`.

### Create a Verified token

Once you've received `sessions.card` you must create a [verified token](/products/verified-tokens/create-verified-token#create-a-verified-token-request) to [take a payment](/products/card-payments/v6/authorize-a-payment#-migratecardonfile-authorization).

**Next steps**

[Verified token](/products/verified-tokens/create-verified-token)