# Generate card payment token

Overview

This guide outlines the steps to integrate CyberSource's Microform to securely collect and tokenize payment card details. The process involves generating a [payment context](https://developer.cybersource.com/api-reference-assets/index.html#flex-microform_microform-integration_generate-capture-context), loading the Microform script dynamically, creating secure input fields, and submitting the form to generate an encrypted card token.

*Steps*

* [Generate Payment Context](https://app.gitbook.com/o/SRAcjPoDkF3YMb0pMkRZ/s/GFQzEm5mFZ7cCwsCociW/~/changes/41/api-documentation/payments/generate-card-payment-context) Use the endpoint to generate a payment context token with the desired transaction amount and currency. This token is required to initialize the Microform and process payments securely.
*  Load CyberSource Microform Script\
  Once you have the payment context token, extract the required script metadata and dynamically load the Microform script.\
  Extract Script Metadata\
  Decode the payment context token to retrieve the following:<br>

  * `clientLibrary`: The URL for the CyberSource Microform script.
  * `clientLibraryIntegrity`: The integrity hash for secure script loading.

  Dynamically Load the Microform Script

```
const clientLibrary = capture_context?.clientLibrary;
const clientLibraryIntegrity = capture_context?.clientLibraryIntegrity;

const script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = clientLibrary;
script.integrity = clientLibraryIntegrity;
script.crossOrigin = "anonymous";
document.body.appendChild(script);
```

* Initialize CyberSource Microform Once the script is successfully loaded, initialize the Microform and create secure input fields. Create Input Fields

```
script.onload = () => {
  const flex = new Flex(token); // Initialize Flex with the context token
  const form = flex.microform("card");

  // Create a secure card number input field
  const cardNumberInput = form.createField("number", {
    placeholder: "4444 4444 4444 4444",
  });

  // Create a secure CVV input field
  const cardSecurityInput = form.createField("securityCode", {
    placeholder: "123",
  });

  // Inject fields into pre-defined containers in your payment form
  cardNumberInput.load("#number-container");
  cardSecurityInput.load("#securityCode-container");
};

// token: The token generated from the card payment context
```

* &#x20;Submitting the Payment Form\
  Once the fields are created and injected, the form can be submitted along with non-sensitive card expiration date data. The `createToken` method generates a secure token for the card details.

```
form.createToken(
  { expirationMonth: "01", expirationYear: "2028" },
  (err, token) => {
    if (err) {
      console.error(err);
      return;
    }
    makePaymentWithCardToken(token); // Send the token for processing
  }
);
```

Conclusion

By following these steps, you can securely integrate CyberSource's Microform into your payment flow, ensuring that sensitive card details are handled securely and tokenized before being sent for processing.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.redstonepgs.com/api-documentation/payments/generate-card-payment-token.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.