Hosted Fields SDK

Intro

Our hosted fields are rendered in secure iframes, ensuring that card numbers, CVV codes, and other sensitive payment data are handled securely. This approach allows you to customize the look and feel of the payment form while keeping sensitive data processing isolated from your application infrastructure.

Example Implementation

You can see a working example of our hosted fields integration in this CodeSandbox:

Hosted Fields Example

Integration Steps

Install the SDK

Add the Hosted Fields SDK to your checkout page:

<script type="text/javascript" data-site-id="XXXXXXX" id="checkoutTools__script" src="https://sdk.checkouttools.com/v1.2/collect.js"> </script>

If using Content Security Policy (CSP), update your directives:

connect-src <https://sdk.checkouttools.com>  
frame-src <https://sdk.checkouttools.com>  
script-src <https://sdk.checkouttools.com>

Generate an auth token

Before using the Forter Hosted Fields SDK, you will need to generate a temporary authentication token in your backend.

Before rendering your checkout page, issue a request to the /client-key endpoint in the Tokenization API from your backend.

After making the call, you will receive a JWT authentication token that you need to pass your checkout page.

You will need to authenticate the request using your Tokenization API credentials, which are different from your Core API credentials.

NOTE: When creating the token server-side, you are able to control its TTL. It is recommended to use the smallest TTL value necessary for the end-user to successfully complete the transaction in the frontend, in order to reduce the chance of abuse.

Initialize the SDK

Call the init method on the hosted fields SDK, passing in the auth token you received in the previous step:

const forterCollect = await window.checkoutTools.collect.init(
  {
    environment: 'sandbox',
    authToken: 'TOKEN.VALUE'
  }
);

Add Hosted Fields to the checkout page form

<form>  
  <div id="cc-holder"></div>    
  <div id="cc-number"></div>    
  <div id="cc-exp"></div>       
  <div id="cc-cvc"></div>       
</form>

Insert placeholder elements into your checkout page:

Initialize the Hosted Fields using the SDK instance you created in the previous step, by calling the addFields method:

forterCollect.addFields({  
  'cc-holder': {
    type: 'CARD_HOLDER_NAME'
  },
  'cc-number': {
      type: 'CARD_NUMBER',
  },
  'cc-exp': {
    type: 'CARD_EXPIRATION_DATE',
  },
  'cc-cvc': {
    type: 'CARD_CVC',
  },
...
});

Note 1: The minimum required fields are: CARD_NUMBER, CARD_HOLDER_NAME and CARD_EXPIRATION_DATE.

Note2: Each field ID must be unique and match its HTML container.

Submit the form & receive a token

When the customer submits the form, call the submit() method to receive a single-use token.

const tokenResult = await forterCollect.submit();  
console.log(result)

Successful Response: (example)

{  
  "success": true,  
  "token": "ftr12d4e830283b647d4b3b2a3d65f02b8ab"  
}

Send the token to your backend for later processing

const response = await fetch("https://example.org/pay", {
  method: "POST",
  body: JSON.stringify({ shippingAddress,cartItems, ... , forterToken: tokenResult.token }),
});

Client-Side Encryption

For scenarios where you need to collect and encrypt card data directly (without using Hosted Fields iframes), you can use client-side encryption. This encrypts sensitive card data in the browser or mobile app before transmitting it to your server.

How It Works

The encryption uses a hybrid encryption scheme to securely encrypt card data:

A random AES-256 key is generated for each encryption

Card data is encrypted with AES-256-GCM (fast, authenticated encryption)

The AES key is wrapped (encrypted) with RSA-OAEP-SHA256 using Forter's public key

Only Forter's backend can decrypt the data using the corresponding private key

Encrypted Payload Format

Both JavaScript and mobile implementations produce the same JSON structure:

{
  "kid": "prod-v1",
  "alg": "RSA-OAEP-256",
  "enc": "A256GCM",
  "wrappedKey": "<base64-encoded-wrapped-aes-key>",
  "nonce": "<base64-encoded-12-byte-iv>",
  "ciphertext": "<base64-encoded-encrypted-data>",
  "tag": "<base64-encoded-16-byte-auth-tag>"
}

Field	Description
kid	Key ID for key rotation (e.g., prod-v1, sandbox-v1)
alg	Algorithm used to wrap the AES key (RSA-OAEP-256)
enc	Content encryption algorithm (A256GCM)
wrappedKey	RSA-OAEP wrapped AES key (base64, 344 characters)
nonce	AES-GCM initialization vector (base64, 16 characters / 12 bytes)
ciphertext	Encrypted card data JSON (base64, variable length)
tag	AES-GCM authentication tag (base64, 24 characters / 16 bytes)

JavaScript SDK

Installation

The encryption module is included in the Hosted Fields SDK script:

<script type="text/javascript" data-site-id="XXXXXXX" id="checkoutTools__script" src="https://sdk.checkouttools.com/v1.2/encrypt.js"> </script>

Usage

const encryptedPayload = await window.checkoutTools.encrypt.encryptTokenizeRequest(
  {
    cardNumber: '4111111111111111',
    expirationMonth: '12',
    expirationYear: '2028',
    cvc: '123',
    cardHolderName: 'John Doe'
  },
  'production' // environment: 'sandbox' | 'production' 
);

// Send the encrypted payload to your backend
const response = await fetch('https://example.org/api/tokenize', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(encryptedPayload)
});

Parameters

Parameter	Type	Required	Description
cardNumber	string	Yes	The card number (PAN)
expirationMonth	string	Yes	Two-digit expiration month (e.g., "12")
expirationYear	string	Yes	Four-digit expiration year (e.g., "2028")
cvc	string	Yes	Card security code (3-4 digits)
cardHolderName	string	Yes	Name as it appears on the card
environment	string	No	"sandbox" \| "production" (default: "sandbox")

Flutter / Dart Implementation

For Flutter mobile applications, add the following dependencies and encryption code to your project.

Dependencies

Add to your pubspec.yaml:

dependencies:
  pointycastle: ^3.9.1
  cryptography: ^2.7.0

Encryption Code

Add this file to your project (e.g., lib/forter_encryption.dart):

import 'dart:convert';
import 'dart:typed_data';
import 'package:pointycastle/export.dart';
import 'package:pointycastle/asn1.dart';
import 'package:cryptography/cryptography.dart' as crypto;

enum ForterEnvironment { production, sandbox }

const _sandboxPublicKey =
    'LS0tLS1CRUdJTiBQVUJMSUMgS0VZLS0tLS0KTUlJQklqQU5CZ2txaGtpRzl3MEJBUUVGQUFPQ0FROEFNSUlCQ2dLQ0FRRUF4SVdEVEVGQ1haTlBaVkxidzFMeQpjUWpHMzFkb3NKQjRiVGd2S2lDcVBEY3d0MC9SWno1NkxVdGFNaVFiZFp1UTU3amkvSEhvUDExL2xhZW94WGNrCi9rK1FUREJDNDFqcTQ0N05aVjNzdWtLR1VaWFgrODFEWTFDbERsRXRTSFQzM1VmTVJjZ3p3bG81WGxIR01XUWQKL3BMbGVPSEN2N0h0TGs5alRtNjI3SWRwQkVONTZBdGV6SUl6NDNHVjcrRGJjYnBVbUZoQVVCd0lnWUwrYUhKbwpZdmdTTk5obmN3QUVJdE5JRzRPdGVKaWZKWlBiU0ZWb0JwUzBrcG43T0J5NHd3UzBVTmRsZ213NWdDWEJTQ0hmClJUNVVYZzE1N2VGMkNwcDhRakFGSlRHYzJ4VUJIS3NobjRGSTczcGRZYklUM2FhSHNielFpRUpxbk5HQXo5NzQKc1FJREFRQUIKLS0tLS1FTkQgUFVCTElDIEtFWS0tLS0t';

const _prodPublicKey =
    'LS0tLS1CRUdJTiBQVUJMSUMgS0VZLS0tLS0KTUlJQklqQU5CZ2txaGtpRzl3MEJBUUVGQUFPQ0FROEFNSUlCQ2dLQ0FRRUFza3JBTWp2b01BbUF4eGJQU0d5ZgpYdXl4Vy9uQlJucWRWd0N3UVhSOUY4Z1lEV2haTEErbU1qY3hZRzd6MjJYemZzeXBnNG4yTzV0c2VXb3RBek1yCmRRUnc3RVVFWjdZaWJ2bGFPS2JRNk1FZHVNYlVvQk4yWnJENlBrakZLMDI3OGIvZ2toNERKNi9mckcwMmJ6em0KQ1V1djAyNUw2dS9tV0QyZERpdDBXR2RmdjQ0cDdVSHltRk1mc1lqYUtFYVFKZkVsUVVpRHBrZzhBWkUvbXFGZgpSS0FvRzNGMDBMUzNKZStkME4rZ3VYd3VWalh1RE1Kemg2aHkwWWxPdkFZdWtZR1h6RFc0Yk5Yd2FQR0N2SmJGClRGSHdTcmRGQlRFbHZuRVdKcUEzYkdMb05tcis5Mkd5b0lTK3RFVmNpUU0zZ1c3ckxpaVFpU09pZXJVYkZqZ1EKa3dJREFRQUIKLS0tLS1FTkQgUFVCTElDIEtFWS0tLS0tCg==';

const _keyIds = {
  ForterEnvironment.production: 'prod-v1',
  ForterEnvironment.sandbox: 'sandbox-v1',
};

/// Encrypts card data using hybrid encryption (AES-256-GCM + RSA-OAEP-SHA256).
/// Returns a Map that can be JSON-encoded and sent to your backend.
Future<Map<String, String>> encryptCardData({
  required String cardNumber,
  required String expirationMonth,
  required String expirationYear,
  required String cvc,
  required String cardHolderName,
  ForterEnvironment environment = ForterEnvironment.sandbox,
}) async {
  final payload = {
    'cardNumber': cardNumber,
    'expirationMonth': expirationMonth,
    'expirationYear': expirationYear,
    'cvc': cvc,
    'cardHolderName': cardHolderName,
  };

  final publicKeyB64 = environment == ForterEnvironment.production
      ? _prodPublicKey
      : _sandboxPublicKey;

  final publicKey = _parsePublicKey(utf8.decode(base64.decode(publicKeyB64)));
  final kid = _keyIds[environment]!;

  // Generate AES key and encrypt payload
  final aes = crypto.AesGcm.with256bits();
  final secretKey = await aes.newSecretKey();
  final nonce = aes.newNonce();
  final plaintext = Uint8List.fromList(utf8.encode(jsonEncode(payload)));

  final secretBox = await aes.encrypt(plaintext, secretKey: secretKey, nonce: nonce);

  // Wrap AES key with RSA-OAEP
  final aesKeyBytes = Uint8List.fromList(await secretKey.extractBytes());
  final encryptor = OAEPEncoding.withSHA256(RSAEngine())
    ..init(true, PublicKeyParameter<RSAPublicKey>(publicKey));
  final wrappedKey = encryptor.process(aesKeyBytes);

  return {
    'kid': kid,
    'alg': 'RSA-OAEP-256',
    'enc': 'A256GCM',
    'wrappedKey': base64.encode(wrappedKey),
    'nonce': base64.encode(secretBox.nonce),
    'ciphertext': base64.encode(secretBox.cipherText),
    'tag': base64.encode(secretBox.mac.bytes),
  };
}

RSAPublicKey _parsePublicKey(String pem) {
  final lines = pem.split('\n').where((l) => !l.startsWith('-----') && l.isNotEmpty).join('');
  final bytes = base64.decode(lines);
  final seq = (ASN1Parser(Uint8List.fromList(bytes)).nextObject() as ASN1Sequence);
  final pubKeyBytes = (seq.elements![1] as ASN1BitString).valueBytes!.sublist(1);
  final pubSeq = ASN1Parser(Uint8List.fromList(pubKeyBytes)).nextObject() as ASN1Sequence;
  return RSAPublicKey(
    (pubSeq.elements![0] as ASN1Integer).integer!,
    (pubSeq.elements![1] as ASN1Integer).integer!,
  );
}

Usage

import 'forter_encryption.dart';

// Encrypt card data
final encrypted = await encryptCardData(
  cardNumber: '4111111111111111',
  expirationMonth: '12',
  expirationYear: '2028',
  cvc: '123',
  cardHolderName: 'John Doe',
  environment: ForterEnvironment.production,
);

// Send to your backend
final response = await http.post(
  Uri.parse('https://your-api.com/api/tokenize'),
  headers: {'Content-Type': 'application/json'},
  body: jsonEncode(encrypted),
);

Parameters

Parameter	Type	Required	Description
cardNumber	String	Yes	The card number (PAN)
expirationMonth	String	Yes	Two-digit expiration month (e.g., "12")
expirationYear	String	Yes	Four-digit expiration year (e.g., "2028")
cvc	String	Yes	Card security code (3-4 digits)
cardHolderName	String	Yes	Name as it appears on the card
environment	ForterEnvironment	No	.sandbox \| .production (default: .sandbox)

JS SDK Reference

Init

Initializes the Forter Hosted Fields SDK.

Standard Initialization

init({environment, authToken}, [cb: (err, results)]) => Promise<void>

Description

Initialize the Forter Hosted Fields SDK.

Parameters

Parameter	Type	Required	Description
environment	string	No	Tokenization environment to use - "sandbox" \| "production" (default: "sandbox")
authToken	string	Yes	Authentication token retrieved from PCI Tokenization API

Example

const forterCollect = await checkoutTools.collect.init({
  environment: 'sandbox', 
  authToken: 'YOUR_AUTH_TOKEN'
});

Advanced Initialization

For more control over the SDK's behavior, you can provide additional configuration options and event handlers:

init({...options, ...eventHandlers}, [cb: (err, results)]) => Promise<void>

Description

This method returns a Promise that can be awaited and will surface any errors. Alternatively, you may provide an optional callback function which will be invoked asynchronously when the action completes.

Parameters

Parameter	Type	Required	Description
options	object	Yes	Configuration object
eventHandlers	object	No	Object containing event handler functions

Options

Parameter	Type	Required	Description
environment	string	No	Tokenization environment to use - "sandbox" \| "production" (default: "sandbox")
authToken	string	Yes	Authentication token retrieved from PCI Tokenization API
validationTrigger	string	No	When to trigger fields validation.'ON_BLUR' \| 'ON_CHANGE' (default: 'ON_BLUR')

eventHandlers

Parameter	Required	Description
onLoad()	No	Triggered when fields are loaded. Note: Only triggered on first load.
onError(errors: {[fieldName: string]: {message: string, errorCode:string} })	No	Triggered on form validation errors
onEnterPress()	No	Triggered when Enter key is pressed in any field
onEscapePress()	No	Triggered when Escape key is pressed in any field
onSuccess()	No	Triggered after successful form submission. Note: Consider showing a loading indicator until this event.
onValidityChange(fieldId:string, isValid:boolean, error?: {message: string, errorCode:string})	No	Triggered when field validity changes
onCardBrandChange(cardBrand: string)	No	Triggered when card brand is detected

Example

let formLoading = false;

const forterCollect = window.checkoutTools.collect.init({  
 onLoad() {  
   formLoading = true;  
 },  
 async onEnterPress() {  
   const tokenizeResult = await forterCollect.submit();  
   if (tokenizeResult.success) {  
     console.log('Form successfully submitted', tokenizeResult);  
   }  
 },  
 onError(errors){  
   console.log('Form submit error:', errors)  
 }  
});

Fields

Adds one or more Hosted Fields to the form.

Add Fields

addFields(fieldsDefinition, [cb: (err, results)]) => Promise<Void>

Description

Add one or more Hosted Fields to the form

Notes:

This method returns a promise that resolves when all Hosted Fields have finished loading and are ready for use. (See also: onLoad() event.

Alternatively, this method accepts an optional callback function which is invoked asynchronously once the action is completed.

Parameters

Parameter	Type	Required	Description
fieldsDefinition		Yes

Update Fields

updateFields(fieldsDefinition, [cb: (err, results)]) => Promise<Void>

Description

Update one or more Hosted Fields in the form.

Notes:

This method returns a promise that resolves when all Hosted Fields have finished loading and are ready for use. (See also: onLoad() event.

Alternatively, this method accepts an optional callback function which is invoked asynchronously once the action is completed.

Parameters

Parameter	Type	Required	Description
fieldsDefinition		Yes

Submit

submit(cb: (err, results)) => Promise<{status: boolean, token:string, errors?: Array<{message: string, errorCode:string}>}>

Description

Once the customer finishes entering all the relevant fields in the payment form, this method will submit them securely to be stored by Forter.

Notes:

This method returns a Promise object that can be awaited to receive the tokenized fields. It will return the tokenized payload if successful, or the field errors if the form is still in an invalid state.

Alternatively, this method accepts an optional callback function which is invoked asynchronously once the action is completed.

The asynchronous result of this function is a single token string, that can later be unpacked in the server side to the individual fields, or sent as is to a third party using the Forter Detokenization Proxy.

A successful tokenization does not execute a transaction or validation. In order to verify the payment method, you will need to invoke a purchase or authorization from your secure, server-side environment.

Reset Fields

reset(fieldName?: string, cb?: (err, results)) => Promise<Void>

Description

Reset all fields or a specific field in the form. If a field name is not provided, all of the fields will be reset.

Notes:

This method returns a Promise object that can be awaited.

Alternatively, this method accepts an optional callback function which is invoked asynchronously once the action is completed.

Parameters

Parameter	Type	Required	Description
fieldName	string	No

Focus

focus(fieldName?: string) => void

Description

Focus on a specific field in the form.

Parameters

Parameter	Type	Required	Description
fieldName	string	No

Styling

Forter Hosted Fields can mostly be styled using standard CSS rules and techniques. When customizing your field's styles, the required techniques will differ when styling the container element itself (i.e., the form control), or the input element. This separation is required because the wrapping container element is hosted on your page, and the input in another, secured, web app.

Container elements

Simply target the container elements you’ve created in HTML using the same CSS rules you apply to your other, non-hosted, form controls. This applies to macro layout like width, height, and spacing, and styling like border and box-shadow.

<form>
    <label>
        Name on card
       <div id="card-holder-name" style="border: solid 1px red; height: 40px" />
    </label>
</form>

Note: Even if your other inputs calculate their own height, Forter Hosted fields require an explicit ‘height’ to be set on the container element.

State classes

The following CSS rules are automatically added to the container element, which match the internal style “form states” mentioned above.

forter-hosted-fields-focus

forter-hosted-fields-valid

forter-hosted-fields-invalid

forter-hosted-fields-empty

forter-hosted-fields-touched

forter-hosted-fields-empty

forter-hosted-fields-dirty

Simply reference these classes in your stylesheets as normal:

{
  .card-holder-name.forter-hosted-fields-focus {
    border: solid 2px blue;
  }
}

Input elements

In case advanced styling rules are required for the input elements themselves, additional css rules can be passed in to the javascript SDK object using the style configuration option.

Two types of styles can be used:

A string containing an existing CSS class you may have already defined on your page used to style input elements. All CSS rules will be copied from this existing class and applied to the Hosted Field input element.

await sdk.addFields({
  'card-number': {
    type: 'CARD_NUMBER',
    style: '.existing-form-input-class'  
  },
});

A configuration object containing custom css definitions. Accepted keys in this object are:

input - Standard css properties that will be applied to the internal input element (See below for supported properties)

Pseudo-classes (eg. :hover, :focus) - Nest additional rules for every html state

Form state classes: Specific css classes are automatically applied to every Hosted Field, depending on its state. Every class can be styled using specific css properties.

Supported state classes: .invalid - Field has failed validation. .empty - Field doesn't have a value. .touched - Applied forever once the field’s first ‘blur’ event has triggered, or first keystroke when the validationTrigger option is set to ON_CHANGE .dirty - Applied forever once the field’s value has changed for the first time. :focus - Field is currently focused Media queries - (These apply to the iframe dimensions) - define a rule in pixels and nest additional rules of the other formats inside

Allowed CSS Properties (browser specific variants will also work): "appearance", "box-shadow", "color", "direction", "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-variant-alternates", "font-variant-caps", "font-variant-east-asian", "font-variant-ligatures", "font-variant-numeric", "font-weight", "letter-spacing", "line-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "opacity", "outline", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "text-align", "text-shadow", "transition", "tap-highlight-color", "tap-highlight-color"

 
await sdk.addFields({
  'card-number': {
    type: 'CARD_NUMBER',
    style: {  
      'input': {  
       'color': 'black',  
       'padding': '10px 5px',  
      }  
      ':focus': {  
        'border-color': 'blue',  
      },  
      '.touched': {  
        'color: 'green',  
      },  
      '.touched.error': {  
        'color: 'orange',  
        'text-decorations': 'underline',  
      },  
      '@media screen and (max-width: 600px)': {  
         'input': {  
           'font-size': '10px'  
        }  
      },
    },
  }
});

Examples

Full Credit Card Details Form

Create a common form containing fields for collecting a credit card’s number, security code, expiration date, and cardholder name.

First, create the HTML scaffolding - a form with placeholders elements that will later be replaced with Forter Hosted Fields.

<body>
<form id="payment-form">
 <label>
   Name on card
   <div id="card-holder-name" />
 </label>
 <label>
   Card
   <div id="card-number" />
 </label>
 <label>
   CVC
   <div id="card-cvc" />
 </label>
 <label>
   Expiration date
   <div id="card-expiration" />
 </label>
</form>
</body>

Next, in a Javascript tag copy and paste the following.

const forterCollect = await checkoutTools.collect.init();

const commonStyles = {  
  ":focus": {  
    color: "orange",  
  },  
  ".touched": {  
    color: "green",  
  },  
  ".touched.error": {  
    color: "red",  
    "text-decorations": "underline",  
  },  
};

forterCollect.addFields({  
  "card-holder-name": {  
    type: "TEXT",  
    placeholder: "Name on card",  
    style: commonStyles,  
  },  
  "card-number": {  
    type: "CARD_NUMBER",  
    placeholder: "1111-2222-3333-4444",  
    onFocus() {  
      // TODO: handle focus  
    },  
    style: commonStyles,  
  },  
  "card-cvc": {  
    type: "CARD_CVC",  
    onError(errorMessage) {  
      console.error("Error in field card-cvv", errorMessage);  
    },  
    style: {  
      ...commonStyles,  
      display: "inline-box",  
    },  
  },  
  "card-expiration": {  
    type: "CARD_EXPIRATION_DATE",  
    style: commonStyles,  
  },  
});

Finally, wire up the form’s submit event to Forter’s submit method in order to securely store the form’s state.

document  
 .getElementById("#payment-form")  
 .addEventListener("submit", function (e) {  
   e.preventDefault();

   // Callback based method:  
   forterCollect.submit(function (err, results) {  
     if (err) {  
       console.error("error submitting payment form", err);  
       return;  
     }

     console.log("payment form submitted successfully!", results);

     // Combine the tokenized fields along with other non-sensitive fields that may exist in the form, and submit them to your backend server for further processing.
     backend.submitPaymentForm({ fields: { ...ownFields, ...results } });

   });

   // or alternatively, ESNext promise based method:  
   forterCollect  
     .submit()  
     .then((results) => {  
       if (results.success) {  
         console.log("Form successfully submitted", tokenizeResult);  
       }  
       console.log("payment form submitted successfully!", results);  
       backend.submitPaymentForm({ fields: { ...ownFields, ...results } });  
     })  
     .catch((e) => {  
       console.error("error submitting payment form", e);  
     });  
 });

Re-collecting CVC

The Hosted Fields SDK supports the collection of the CVC only. This is useful in repeat transactions, along with a multi-use token in order to reduce the risk of a fraud-decline.

const forterCollect = await checkoutTools.collect.init();

forterCollect.addFields({  
  "card-cvc": {  
    type: "CARD_CVC",  
    onError(errorMessage) {  
      console.error("Error in field card-cvv", errorMessage);  
    },  
  },  
});

Collecting Card and CVC Separately

In some cases, especially when complying with PCI DSS (which prohibits storing CVC), you may need to collect the card details and CVC in separate sessions. For example, you might collect and tokenize the card number during checkout, but defer collecting the CVC until just before authorization.

To support this, you can initialize two separate Hosted Fields SDK instances: one for the card details without CVC, and another exclusively for CVC collection.

<form>
  <div id="card-holder"></div>
  <div id="card-number"></div>
  <div id="card-exp"></div>
  <div id="card-cvc"></div>
  <button type="button" id="submit">Submit</button>
</form>

(async () => {
  // Initialize first instance for card details (without CVC)
  const forterCollectCard = await window.checkoutTools.collect.init({
    environment: "sandbox",
    authToken: "{AUTH_TOKEN}" // Replace with actual auth token
  });

  // Initialize second instance for CVC only
  const forterCollectCVC = await window.checkoutTools.collect.init({
    environment: "sandbox",
    authToken: "{AUTH_TOKEN}" // Replace with actual auth token
  });

  // Add card details fields (excluding CVC)
  forterCollectCard.addFields({
    "card-holder": { type: "CARD_HOLDER_NAME" },
    "card-number": { type: "CARD_NUMBER" },
    "card-exp": { type: "CARD_EXPIRATION_DATE" }
  });

  // Add CVC field separately
  forterCollectCVC.addFields({
    "card-cvc": { type: "CARD_CVC" }
  });

  document.querySelector("#submit").addEventListener("click", async () => {
    // Tokenize both card and CVC fields
    const [cardTokenResult, cvcTokenResult] = await Promise.all([
      forterCollectCard.submit(),
      forterCollectCVC.submit()
    ]);

    console.log("cardTokenResult", cardTokenResult);
    console.log("cvcTokenResult", cvcTokenResult);

    // Send both tokens to your backend (recommended)
    /*
    await fetch("/api/process-payment", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        cardToken: cardTokenResult.token,
        cvcToken: cvcTokenResult.token
      })
    });
    */
  });

Sending Tokens via Forter Detokenization Proxy

You'll now have two tokens:

Payment Method Token: Forter-issued PCI token for PAN, expiration, etc.

CVC-Only Token: Forter-issued token strictly for the CVC.

Once both tokens are collected, you can forward both to your PSP through the Detokenization Proxy for secure, PCI-compliant forwarding of card data. In your proxy request, you must include both tokens in the header.

If you are using direct tokens, send the forter-token and forter-cvc-token.

If using alias-based tokens, send the forter-token-alias-key forter-token-alias-value pair and the forter-cvc-token-alias-key forter-cvc-token-alias-value pair.

The CVC token is short-lived, in line with PCI requirements. Always re-collect it before sending to your PSP.