<script type="text/javascript" src="https://www.payjunctionlabs.com/trinity/js/sdk.js"></script>

<body class="bg-light">

  <div class="container mt-5" style="max-width: 640px;">
    <form novalidate>

      <h3 class="mb-4">Payment Information</h3>

      <div class="row mb-3">
        <div class="col">
          <label class="form-label" for="cardNumber">Card Number</label>
          <input class="form-control" type="text" name="cardNumber" id="cardNumber">
          <div class="invalid-feedback"></div>
        </div>
      </div>

      <div class="row mb-3">
        <div class="col-5">
          <label class="form-label" for="cardExpMonth">Card Exp Month</label>
          <input class="form-control" type="text" name="cardExpMonth" id="cardExpMonth" placeholder="MM">
          <div class="invalid-feedback"></div>
        </div>
        <div class="col-7">
          <label class="form-label" for="cardExpYear">Card Exp Year</label>
          <input class="form-control" type="text" name="cardExpYear" id="cardExpYear" placeholder="YYYY">
          <div class="invalid-feedback"></div>
        </div>
      </div>

      <hr class="my-5">

      <div class="d-grid">
        <button type="sumit" class="btn btn-primary btn-lg">
          Submit Payment
        </button>
      </div>

      <p id="successResponse" class="p-3 mt-2 text-success"></p>
    </form>
  </div>
</body>

</html>
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css');
const payjunction = PayJunction("key_AJTloFpPfOsw7XUNl6vlWglzBkIkGXqNOtDiG5U49bH6ib-4CdpWGO6JOEBl3tkRLpxWsZpcsi6x2KIiJNNR9A");
const form = document.querySelector("form");
const successResponseEl = document.querySelector("#successResponse");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  clearPreviousErrors();
  setSuccessText("");

  const cardPaymentInformation = {
    cardNumber: document.querySelector("[name=cardNumber]").value,
    cardExpMonth: document.querySelector("[name=cardExpMonth]").value,
    cardExpYear: document.querySelector("[name=cardExpYear]").value
  };

  payjunction.createToken(cardPaymentInformation).then(function (res) {
    if (res.tokenId) {
      const successMessage = `Successfully tokenized customer payment information!
                    The returned payment method token is: ${res.tokenId}`;
      setSuccessText(successMessage);
    }

    if (res.errors) {
      renderErrors(res.errors);
    }
  });
});

function clearPreviousErrors() {
  Array.from(document.querySelectorAll("input")).forEach(function (el) {
    el.classList.remove("is-invalid");
  });
}

function setSuccessText(message) {
  successResponseEl.textContent = message;
}

function renderErrors(errors) {
  errors.forEach(function (error) {
    if (error.parameter) {
      const invalidInputEl = document.querySelector(
        `[name=${error.parameter}]`
      );
      invalidInputEl.classList.add("is-invalid");
      invalidInputEl.nextElementSibling.textContent = error.message;
    }
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.