Script for patching/changing the BigCommerce Checkout page

patch-bigcommerce-checkout.js

  var toPatch = [
    { sel: '[name="billingSameAsShipping"]' , click: true },
    { sel: '[name="redeemableCode"]' , prop: 'placeholder', val: 'Enter Promo Code' },
    { sel: '.ReactModalPortal [name="redeemableCode"]' , prop: 'placeholder', val: 'Enter Promo Code' },
    
  ];
  var matchedSubscriptionItems = [];
  function patchIt(patches) {
    var afterElementExists = function(selector, cb) {
      function findit() {
        // look for our dom element
        var el = document.querySelectorAll(selector);
        if (!el.length) {
          // if the element doesn't exist recursively call requestAnimationFrame
          // until it does. 
          window.requestAnimationFrame(findit);
        } else {
          // call back, returning the element
          return cb(el);
        }
      }
      // kick off the recusive function 
      return findit(selector);
    }
    // loop over all the patches
    Array.prototype.forEach.call(patches, function(patch, i){
      // call our function that looks for the elements
      afterElementExists(patch.sel, function(elements, i){
        // once they exist do the patch
        Array.prototype.forEach.call(elements, function(el, i){
          if(patch.repl) el.innerHTML = el.innerHTML.replace(patch.repl, patch.with);
          if(patch.prop) el[patch.prop] = patch.val;
          if(patch.style) el.style[patch.style] = patch.val;
          if(patch.click) el.click();
          
        });
      });
    });
  };
  // patch on load 
  patchIt(toPatch);