Last Updated: 19 September 2024 | Change Log

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 to take a payment.

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 behaviour 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 to take a payment.

Next steps

Verified token