Firstoken API Docs
  • ⚙️API Reference
    • Firstoken API
      • Tokenization As A Service
        • Simple Tokenization
        • Simple Detokenization
        • Inspect Token
        • Delete Tokens
      • Transactions
        • Create a Transaction
        • Retrieve a Transaction
        • Inspect a Transaction
        • Delete a Transaction
        • Tokenize a Transaction
      • Proxy
        • Allowed Headers
        • Actions
        • Methods
          • POST - Proxy
          • GET - Proxy
          • PUT - Proxy
          • PATCH - Proxy
          • DELETE - Proxy
        • Get Payload Hash
        • Proxy JOSE
        • Proxy WSSEC
      • Inbound Routes
        • Create an Inbound - POST
      • Payments
        • Attributes of the Request
        • Common response
        • Endpoints
          • Authorizations
          • Reversals
          • Capture
            • Capture Refunds
            • Capture Void
          • Payments
            • Payment Refunds
            • Payment Void
          • Refunds void
          • Credit
            • Credit Void
          • Get Transaction Details
        • Decision Manager
          • How it works
          • Create decision
          • Update Decision
        • Risk Payer Authentication
          • How to use it
          • 3-D Secure Flows
            • Successful Frictionless Authentication
            • Unsuccessful Frictionless Authentication
            • Attempts Processing Frictionless Authentication
            • Unavailable Frictionless Authentication
            • Rejected Frictionless Authentication
            • Authentication not available on Lookup
            • Enrollment check error
            • Time-out
            • Bypassed Authentication
            • Successful Step-Up Authentication
            • Unsuccessful Step-Up Authentication
            • Unavailable Step-Up Authentication
            • Require Method URL
        • Point of Sale Payments
          • Authorization
          • Capture
          • Payment
          • Credit
  • 📖Guides
    • Firstoken Captures Hosted Iframe
      • How Firstoken Captures works
      • Generating a JSON Web Token
      • JSON form Schema
      • Iframe Communication
    • De-scoping Components
      • How Firstoken De-scoping Components works
      • Inbound Routes Module
        • Create an Inbound Route
        • Edit an Inbound Route
        • Delete an Inbound Route
      • Webhook Module
        • Create a Webhook
        • Edit a Webhook
        • Delete a Webhook
        • Webhook events
        • How to sign Webhooks data
      • Proxy Module
        • Create a Proxy
        • Edit a Proxy
        • Delete a Proxy
    • Firstoken Captures SDK JS
      • Getting Started
      • Functions
      • Type of Elements
      • Elements Options
      • CSS Object
      • Full Example of Usage
      • SDK versions
Powered by GitBook
On this page
  • 1. Include the Javascript file
  • 2. Setting up HTML elements
  • 3. Firstoken Captures SDK Initialization
  • 4. Create and setup form fields
  • 5. Field validation
  • 6. Capture validation values
  • 7. Configure submit method

Was this helpful?

  1. Guides
  2. Firstoken Captures SDK JS

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 versions 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 JSNextFunctions

Last updated 7 months ago

Was this helpful?

📖