function genHmac(msg, secret) {
  const algorithm = CryptoJS.algo.SHA256);
  const hmac = CryptoJS.algo.HMAC.create(algorithm, secret);
  hmac.update(msg);
  const hexEncodedHash = hmac.finalize().toString();
  const base64EncodedHash = base64.encode(hexEncodedHash);
}

/**
 * @param string $msg Message To Sign
 * @param string $secret Payment.js Api Secret
 * @return string The value for header Message-Signature
 */
function genHmac($msg, $secret)
{
    $algorithm = 'sha256';
    $hexEncodedHash = hash_hmac($algorithm, $msg, $secret);
    $base64EncodedHash = base64_encode($hexEncodedHash);
    return $base64EncodedHash;
}

import org.apache.commons.codec.binary.Base64;
import org.apache.commons.codec.binary.Hex;
import org.apache.commons.codec.digest.HmacAlgorithms;
import org.apache.commons.codec.digest.HmacUtils;

public class HmacGenerator {
    public String genHmac(String msg, String secret) {
        String algorithm = HmacAlgorithms.HMAC_SHA_256;
        HmacUtils hmacUtils = new HmacUtils(algorithm, secret);
        Hex hexEncoder = new Hex();

        byte[] binaryEncodedHash = hmacUtils.hmac(msg);
        byte[] hexEncodedHash = hexEncoder.encode(binaryEncodedHash);
        String base64EncodedHash = Base64.encodeBase64String(hexEncodedHash);
        return base64EncodedHash;
    }
}

POST {{SERVICE_URL}}/merchant/authorize-session
Api-Key: {{Payment.js-apikey}}
Content-Type: application/json
Message-Signature: {{MSG_SIGNATURE}}
Nonce: {{random value}}
Timestamp: {{timestamp, milliseconds since epoch}}

Client-Token: {{access/session id used by client library}}
Nonce: {{should match "Nonce" header passed in request}}

{
  "publicKeyBase64": "{{base64-encoded public rsa key used by client library}}"
}

Client-Token: {{access/session id for which webhook call applies}}
Nonce: {{should match "Nonce" header passed in authorize session request}}

<form id="form">
  <!-- masked iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-card">Card</label>
    <div id="cc-card" data-cc-card></div>
  </div>

  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-name">Name</label>
    <div id="cc-name" data-cc-name></div>
  </div>

  <!-- iframe value will be sent to webhook parsed into month and year-->
  <div>
    <label for="first-data-payment-field-exp">Exp</label>
    <div id="cc-exp" data-cc-exp></div>
  </div>

  <!-- required only if using cvv in config -->
  <!-- iframe value will not be sent to webhook -->
  <div>
    <label for="first-data-payment-field-cvv">CVV</label>
    <div id="cc-cvv" data-cc-cvv></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-address1">Address1</label>
    <div id="cc-address1" data-cc-address1></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-address2">Address2</label>
    <div id="cc-address2" data-cc-address2></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-city">City</label>
    <div id="cc-city" data-cc-city></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-region">State or Province</label>
    <div id="cc-region" data-cc-region></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-country">Country</label>
    <div id="cc-country" data-cc-country></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-postalCode">Postal Code</label>
    <div id="cc-postalCode" data-cc-postalCode></div>
  </div>

  <!-- completely optional -->
  <!-- iframe value will be sent to webhook -->
  <div>
    <label for="first-data-payment-field-company">Company</label>
    <div id="cc-company" data-cc-company></div>
  </div>

  <button id="submit">Submit</button>
</form>

const config = {
  // optional
  styles: {
    ".emptyClass": {
    },

    ".focusClass": {
    },

    ".invalidClass": {
      color: "#C01324",
    },

    ".validClass": {
      color: "#43B02A",
    },
  },

  // optional
  classes: {
    empty: "emptyClass",
    focus: "focusClass",
    invalid: "invalidClass",
    valid: "validClass",
  },

  fields: {
    card: {
      selector: '[data-cc-card]',

      // optional
      placeholder: 'Credit Card Number',
    },

    // optional but required for successful zero dollar auth
    cvv: {
      selector: '[data-cc-cvv]',

      // optional
      placeholder: 'CVV',
    },

    exp: {
      selector: '[data-cc-exp]',

      // optional
      placeholder: 'Expiration Date',
    },

    name: {
      selector: '[data-cc-name]',

      // optional
      placeholder: 'Full Name',
    },

    // optional
    address1: {
      selector: '[data-cc-address1]',

      // optional
      placeholder: 'Address 1',
    }

    // optional
    address2: {
      selector: '[data-cc-address2]',

      // optional
      placeholder: 'Address 2',
    },

    // optional
    city: {
      selector: '[data-cc-city]',

      // optional
      placeholder: 'City',
    },

    // optional
    company: {
      selector: '[data-cc-company]',

      // optional
      placeholder: 'Company',
    },

    // optional
    country: {
      selector: '[data-cc-country]',

      // optional
      placeholder: 'Country',
    },

    // optional
    postalCode: {
      selector: '[data-cc-postalCode]',

      // optional
      placeholder: 'Postal Code',
    },

    // optional
    region: {
      selector: '[data-cc-region]',

      // optional
      placeholder: 'State or Province',
    },
  }
};

const hooks = {
  // required
  preFlowHook: (callbackFn) => {
    // values come from authorize-session endpoint
    callbackFn({
      clientToken: "....",
      publicKeyBase64: "...",
    });
  },

  // optional, alternate method of providing address field data
  // see target gateway documentation on how this data should be formatted
  // such as what country codes are accepted.
  submitFormHook: (callbackFn) => {
    callbackFn({
      address1: "...",  // optional
      address2: "...",  // optional
      city: "...",      // optional
      company: "...",   // optional
      country: "...",   // optional
      postalCode: "...",// optional
      region: "...",    // optional
    });
  },
};

window.firstdata.createPaymentForm(config, hooks, (paymentForm) => {
  // example: add submit handler to form
  formElement.addEventListener("submit", (e) => {
    e.preventDefault();
    paymentForm.onSubmit(
      // on success
      (clientToken) => {
      },

      // on failure
      (errorObj) => {
      },
    );
  });
});

// onSubmit (roughly the manual equivalent)
const onSubmit = (resolve, reject) => {
  try {
    paymentForm.validate(
      () => {
        paymentForm.authenticate(
          (auth) => {
            paymentForm.submit(auth, resolve, reject);
          },

          reject,
        );
      },

      reject,
    );
  } catch (error) {
    if (reject) {
      reject(error);
    } else {
      throw error;
    }
  }
};

paymentForm.reset(() => console.log("reset form fields"));

paymentForm.destroyFields(() => console.log("destroyed form fields"));

//
// data will contain the following details:
//  - brand: string
//  - brandNiceType: string
//  - code: string or object (may not be defined)
//  - field: string
//  - potentiallyValid: boolean
//  - selector: string
//  - valid: boolean
//
paymentForm.on("cardType", (data) => {
  console.log("card brand is: " + data.brandNiceType);
});

//
// data will contain the following details:
//  - field: string
//  - selector: string
//
paymentForm.on("focus", (data) => {
  console.log("field name is: " + data.field);
});

//
// data will contain the following details:
//  - field: string
//  - selector: string
//
paymentForm.on("blur", (data) => {
  console.log("field name is: " + data.field);
});

//
// data will contain the following details:
//  - empty: boolean
//  - field: string
//  - length: number
//  - potentiallyValid: boolean
//  - selector: string
//  - touched: boolean
//  - valid: boolean
//
// if the field is the card number field, it will also have the following:
//  - brand: string
//  - brandNiceType: string
//
paymentForm.on("change", (data) => {
  console.log("field name is: " + data.field);
});

//
// data will contain the following details for each field:
//  - empty: boolean
//  - field: string
//  - length: number
//  - potentiallyValid: boolean
//  - touched: boolean
//  - valid: boolean
//
// the card field object will also contain the following:
//  - brand: string
//  - brandNiceType: string
//
// the cvv field object will also contain the following:
//  - maxLength: number
//
paymentForm.getState((data) => {
});

//
// valid field names include:
//  - address1
//  - address2
//  - card
//  - city
//  - company
//  - country
//  - cvv
//  - exp
//  - name
//  - postalCode
//  - region
//
paymentForm.setFieldFocus(fieldName, () => console.log("set field focus for " + fieldName));