Full Example of usage

This section provides complete, production-ready examples for different implementation scenarios.

Standard Implementation Example

Complete example using standard authentication (compatible with SDK versions 2.2)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Payment Form - Firstoken SDK</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.firstoken.co/captures/js/2.2/sdk.js"></script>
 </head>
 <body>
    <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"> Process Payment</button>
    </form>
    <script src="main.js"></script>
  </body>
</html>

* {
      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;
    }

const routeId = "your-route-id";
const FT = window.FTCaptures.init(routeId, "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(routeId);

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

Enhanced Security Implementation Example

Complete example using JWT authentication for high-security environments. (SDK versions 2.3)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Payment Form - Firstoken SDK</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.firstoken.co/captures/js/2.3/sdk.js"></script>
  </head>
  <body>
    <div class="secure-payment-form">
      <h2>Secure Payment</h2>
      <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">Process Secure Payment</button>
      </form>
    </div>
    <script src="main.js"></script>
  </body>
</html>

* {
      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;
    }

const routeId = "your-route-id";
// This could be some examples for tags
const securityTags = [
    "jwt-authenticated",
    "encrypted-transaction-date", 
    "high-security",
    "client-reference-code"
];

async function initializeSecurePayment(routeId) {
  // This would be populated by your server-side template
  const jwtToken = {{myJWTToken}}
  const FT = window.FTCaptures.init(routeId, "production", function (state) { 
      console.log('SDK initialized successfully');
    }, securityTags, jwtToken);
  return FT;
}


document.addEventListener('DOMContentLoaded', async function () {
  const FT = await initSDK();
  
  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)
  });

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

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

PreviousCSS Object NextSDK versions

Last updated 26 days ago

Was this helpful?