Getting Started

PreviousFirstoken Captures SDK JS NextFunctions

Last updated 6 months ago

Was this helpful?

Getting Started

Integrating the library is a straightforward process. You simply need to include the JavaScript file in your application and configure the necessary HTML elements to host the SDK fields. The following steps outline the process:

1. Include the Javascript file

To begin, include the Firstoken Captures SDK JavaScript file inside the body of your web application.

<body>
    <script src="https://cdn.firstoken.co/captures/js/2.2/sdk.js" integrity="sha256-IzmJZo/gWd+To2rEV/ZC9+fXZZgHfw5E0jZECyq9ipY=" crossorigin="anonymous"></script>
    ...
</body>

For reviewing previous versions of Captures SDK JS go to section.

2. Setting up HTML elements

Next, insert the necessary HTML elements within your form application. It is crucial to use specific ID tags for proper rendering of the SDK.

These elements serve as placeholders where the SDK's iframes will be inserted. For optimal data security, we recommend using "div" elements instead of "input" elements. Here is an example:

<form id="collect-form" method="post">
    <div class="form-field-group ">
      <div id="cc-holder"></div>
      <div id="cc-number"></div>
      <div id="cc-expiration-date"></div>
      <div id="cc-cvv"></div>
    </div>
    <div class="form-buttons"> <button type="submit" class="form-button">Process</button>
      <button type="submit" class="form-button inactive"> Regresar</button>
    </div>
  </form>

In the example above, each "div" element has a unique ID corresponding to the type of data it will capture (e.g., card number, cardholder name, expiration date, security code).

cc-number: corresponds to the field where the card number will be received
cc-holder: corresponds to the field where the cardholder's name will be received
cc-expiration-date: corresponds to the field where the expiration date will be received
cc-cvv: corresponds to the field where the security code will be received

3. Firstoken Captures SDK Initialization

To initialize the Firstoken Capture SDK component, you need to call the .create() method in the JavaScript file and provide the Inbound Route ID (previously created in the Firstoken web portal) as the first argument. Here is an example:

const FT = window.FTCaptures.init("<ROUTE_ID>", "production", function (state) { }, tags);

Note: If you want to perform tests in an environment, it is recommended to create an Inbound Route in the FirsToken Staging portal and place the "staging" environment in the second parameter.

The return value of this call provides information about the current state of the form, including the condition of the fields.

4. Create and setup form fields

Each field in the form must be initialized using the appropriate code. Here is an example:

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

By doing this, the Firstoken Capture SDK will create an iframe for each initialized field. The library supports various types of built-in inputs, such as card number, cardholder name, card expiration date, and card security code.

5. Field validation

To validate the form fields, you can utilize the following code snippet:

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

This code allows you to handle input errors and respond to relevant events.

6. Capture validation values

Leverage the capabilities of the Firstoken Captures SDK to capture and handle validation values. The SDK may offer built-in mechanisms or hooks to intercept and process validation values during the submission process.

const validationResults = await FTCaptures.validate("<ROUTE_ID>");
console.log(validationResults)

This function requires the Route Id value to identify the elements created in the form without interfering with other Iframes on the webpage, such as Google Analytics or Google Tag Manager.

The snippet should be placed inside the submit method within your form event listener, as an async function, in order to await the validation response.

7. Configure submit method

To send the form data, you need to define a submit method within your form event listener. Here is an example:

FTCaptures.tokenize("<ROUTE_ID>").then(function (result) {
  console.log(result)
}).catch(function (err) {
  console.log(err)
});

In this method, you can retrieve the serialized form data using the `serializeForm()` function provided by the Firstoken Captures SDK. You can then process the data as needed.

This function requires the Route Id value to identify the elements created in the form without interfering with other Iframes on the webpage, such as Google Analytics or Google Tag Manager.

By following these steps, you can successfully integrate and configure the Firstoken Captures SDK to securely capture data via customizable forms on your website.

PreviousFirstoken Captures SDK JS NextFunctions

Last updated 6 months ago

Was this helpful?

1. Include the Javascript file

To begin, include the Firstoken Captures SDK JavaScript file inside the body of your web application.

<body>
    <script src="https://cdn.firstoken.co/captures/js/2.2/sdk.js" integrity="sha256-IzmJZo/gWd+To2rEV/ZC9+fXZZgHfw5E0jZECyq9ipY=" crossorigin="anonymous"></script>
    ...
</body>

For reviewing previous versions of Captures SDK JS go to section.

2. Setting up HTML elements

Next, insert the necessary HTML elements within your form application. It is crucial to use specific ID tags for proper rendering of the SDK.

These elements serve as placeholders where the SDK's iframes will be inserted. For optimal data security, we recommend using "div" elements instead of "input" elements. Here is an example:

<form id="collect-form" method="post">
    <div class="form-field-group ">
      <div id="cc-holder"></div>
      <div id="cc-number"></div>
      <div id="cc-expiration-date"></div>
      <div id="cc-cvv"></div>
    </div>
    <div class="form-buttons"> <button type="submit" class="form-button">Process</button>
      <button type="submit" class="form-button inactive"> Regresar</button>
    </div>
  </form>

In the example above, each "div" element has a unique ID corresponding to the type of data it will capture (e.g., card number, cardholder name, expiration date, security code).

cc-number: corresponds to the field where the card number will be received
cc-holder: corresponds to the field where the cardholder's name will be received
cc-expiration-date: corresponds to the field where the expiration date will be received
cc-cvv: corresponds to the field where the security code will be received

3. Firstoken Captures SDK Initialization

const FT = window.FTCaptures.init("<ROUTE_ID>", "production", function (state) { }, tags);

Note: If you want to perform tests in an environment, it is recommended to create an Inbound Route in the FirsToken Staging portal and place the "staging" environment in the second parameter.

The return value of this call provides information about the current state of the form, including the condition of the fields.

4. Create and setup form fields

Each field in the form must be initialized using the appropriate code. Here is an example:

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

5. Field validation

To validate the form fields, you can utilize the following code snippet:

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

This code allows you to handle input errors and respond to relevant events.

6. Capture validation values

const validationResults = await FTCaptures.validate("<ROUTE_ID>");
console.log(validationResults)

This function requires the Route Id value to identify the elements created in the form without interfering with other Iframes on the webpage, such as Google Analytics or Google Tag Manager.

The snippet should be placed inside the submit method within your form event listener, as an async function, in order to await the validation response.

7. Configure submit method

To send the form data, you need to define a submit method within your form event listener. Here is an example:

FTCaptures.tokenize("<ROUTE_ID>").then(function (result) {
  console.log(result)
}).catch(function (err) {
  console.log(err)
});

In this method, you can retrieve the serialized form data using the `serializeForm()` function provided by the Firstoken Captures SDK. You can then process the data as needed.

This function requires the Route Id value to identify the elements created in the form without interfering with other Iframes on the webpage, such as Google Analytics or Google Tag Manager.

By following these steps, you can successfully integrate and configure the Firstoken Captures SDK to securely capture data via customizable forms on your website.