Update aCuotaz Payment mocker in Vtex

1. Login to your Vtex dashboard,
2. Go to Store Setup - checkout.
3. Click on your website settings icon (blue gear icon).
4. Go to “Code” tab.
5. Select in Files - checkout6-custom.js
6. Paste the following code and click on save.

Note: You must to replace the client-id provided by aCuotaz.

/**
 * search aCuotaz payment method element
 * @param {string} selector
 * @returns {Promise<HTMLElement>}
 */
const checkElement = async (selector) => {
  while (document.querySelector(selector) === null) {
    await new Promise((resolve) => requestAnimationFrame(resolve));
  }
  return document.querySelector(selector);
};

/**
 * aCuotaz endpoint html to render the payment method
 * @param {number} amount
 * @returns {Promise<string>}
 */
const getInfoSteps = (amount) => {
  return fetch(`https://apurata.com/pos/[client-id]/info-steps/${amount}`).then((res) => res.text());
};

/**
 * The last two digits are always the cents.
 * @param {number} amount
 * @returns {number}
 */
const getFormattedAmount = (amount) => {
  const amountString = amount.toString();
  const decimals = amountString.slice(-2);
  const integer = amountString.slice(0, -2);
  return parseFloat(`${integer}.${decimals}`);
};

/**
 * to read more about orderFormUpdated.vtex event:
 * https://developers.vtex.com/docs/guides/vtexjs-for-checkout
 */
$(window).on('orderFormUpdated.vtex', function (event, orderForm) {
  /**
   * this script to render payment mocker has to be disabled for
   * another views like #/cart, #/shipping, etc...
   * because total amount could be change in the final view #/payment
   * so in #/payment when total amount change, this script
   * will be call again to validate the amount and render the correct html
   */
  if (window.location.hash !== '#/payment') {
    return;
  }
  const totalAmount = getFormattedAmount(orderForm?.value);
  Promise.all([checkElement('.aCuotazPaymentGroup'), getInfoSteps(totalAmount)])
    .then(([selectorToRenderPM, infoStepsHtml]) => {
      selectorToRenderPM.innerHTML = infoStepsHtml;
    })
    .catch((err) => console.log(err));
});