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">
  <div>
    <label for="cc-name">Name</label>
    <div id="cc-name" data-cc-name></div>
  </div>

  <div>
    <label for="cc-card">Card</label>
    <div id="cc-card" data-cc-card></div>
  </div>

  <div>
    <label for="cc-exp">Exp</label>
    <div id="cc-exp" data-cc-exp></div>
  </div>

  <!-- required only if using cvv in config-->
  <div>
    <label for="cc-cvv">CVV</label>
    <div id="cc-cvv" data-cc-cvv></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: 'Full Name',
    },

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

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

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

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

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

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

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

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;
    }
  }
};