Generate card payment token

Integrating CyberSource Microform for Secure Card Payments

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, loading the Microform script dynamically, creating secure input fields, and submitting the form to generate an encrypted card token.

Steps

• Generate 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:

  • 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

• 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.