Full Example of Usage

We have prepared a convenient code example with popular field configurations, ready for immediate use.

HTML

<script src="https://cdn.firstoken.co/captures/js/2.2/sdk.js"></script>
<form id="collect-form" method="post">
  <div class="form-field-group ">
    <div id="cc-holder" class="form-field regular-field"></div>
    <div id="cc-number" class="form-field regular-field"></div>
    <div class="two-column">
      <div id="cc-expiration-date" class="form-field min-field"></div>
      <div id="cc-cvv" class="form-field min-field"></div>
    </div>
  </div>
  <button type="submit" class="form-button"> Continuar</button>
</form>

CSS

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-size: 13.3px;
      font-family: 'Roboto', sans-serif;
    }

    body {
      background-color: #F5F5F5;
    }

    svg {
      width: 175px;
      height: 40px;
    }

    .banner {
      min-width: 100%;
      height: 60px;
      padding: 15px 10% 20px 10%;
      background-color: #fff;
    }

    button {
      background: #0099df;
      border-radius: 4px;
      color: #fff;
      border: none;
      outline: 0;
      width: 105px;
      height: 44px;
      line-height: normal;
      text-align: center;
      font-size: 16px;
      display: table
    }

    form {
      padding-top: 3%;
      margin: 0 auto;
      display: flex;
      width: 500px;
      flex-direction: column;
      align-items: center;
    }

    form .input {
      background-color: red;
    }

    .form-field {
      width: 275px;
      height: 35px;
      position: relative;
      background: white;
      border-radius: 0px;
      border: 0.5px solid #CCCCCC;
      padding: 0 10px;
    }

    .regular-field {
      width: 100%;
      margin-right: 15px;
    }

    .form-field.regular-field:first-of-type {
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
    }

    .two-column {
      display: flex;
      width: 100%;
    }

    .min-field {
      width: 50%;
    }

    .two-column .min-field:last-of-type {
      border-bottom-right-radius: 8px;
    }

    .two-column .min-field:first-of-type {
      border-bottom-left-radius: 8px;
    }

    .form-field-group .min-field:last-of-type {
      margin-right: 0;
      margin-bottom: 20px;
    }

    .form-field:hover {
      border-color: black;
    }

    iframe {
      width: 100%;
      height: 100%;
    }

    .form-field.error {
      border-color: red;
    }

    .form-field-group {
      display: flex;
      flex-direction: column;
    }

JS

const FT = window.FTCaptures.init("<ROUTE_ID>", "production", function (state) { });
const css = {
      "color": "#1b1d1f",
      "::placeholder": {
        "color": "lightgray"
      },
      "font-family" : "Arial"
    };
FT.field("#cc-holder", {
  type: "card-holder",
  name: "card_holder",
  placeholder: "Name on card",
  autocomplete: "cc-holder",
  errorColor: "750000",
  required: "true",
  css: css
});

FT.field("#cc-number", {
  type: "card-number",
  name: "card_number",
  placeholder: "Card Number",
  autocomplete: "cc-number",
  errorColor: "750000",
  required: "true",
  css: css,
});

FT.field("#cc-expiration-date", {
  type: "card-expiration-date",
  name: "card_expiration_date",
  placeholder: "MM / YY",
  autocomplete: "cc-expiration-date",
  errorColor: "750000",
  required: "true",
  css: css,
});

FT.field("#cc-cvv", {
  type:"card-security-code",
  name: "card_security_code",
  placeholder: "CVV",
  autocomplete: "cc-csc",
  errorColor: "750000",
  required: "true",
  css: css,
});

FTCaptures.on("cardHolderValidationFailed", function (event) {
  console.log(event.data.isValid)
});
FTCaptures.on("cardNumberValidationFailed", function (event) {
  console.log(event.data.isValid)
});
FTCaptures.on("cardExpirationDateValidationFailed", function (event) {
  console.log(event.data.isValid)
});
FTCaptures.on("cardSecurityCodeValidationFailed", function (event) {
  console.log(event.data.isValid)
});

document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('#collect-form');
  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    try {
        const validationResults = await FTCaptures.validate("<ROUTE_ID>");

        if (!validationResults.hasErrors) {
          const tokenizationResult = await FTCaptures.tokenize("<ROUTE_ID>");
          console.log(tokenizationResult)
          form.submit();
        }
        else {
          console.log(validationResults)  
          alert("There are one or more fields with errors.")
        }
      } catch (error) {
        console.error(error);
      }
  });
});