Динамически загружать Stripe.js

Question

У меня есть форма оплаты Stripe на моей странице, но я хочу загружать ее только тогда, когда пользователь нажимает кнопку, чтобы показать форму.

Я использовал этот код без динамической загрузки, и он работает на 100%, но с динамической загрузкой он, кажется, ничего не делает, насколько я могу судить..

Я поместил свой код в JSFiddle, потому что фрагмент кода Stackru не работал правильно.. https://jsfiddle.net/4zc1uuas/

Вот мой код JS:

Я использую loadFiles функция для загрузки stripe.js файл, а затем через 500 миллисекунд загружая Stripe код из их примеров.

var oLink = document.getElementById('showBtn');
oLink.addEventListener('click', loadFiles);

function loadFiles() {
  document.getElementById("payment").style.display = "block";
  loadScript('https://js.stripe.com/v3/');
  setTimeout(function() {
    loadStripe();
  }, 500);
}

function loadScript(url, type, charset) {
  if (type === undefined) type = 'text/javascript';
  if (url) {
    var script = document.querySelector("script[src*='" + url + "']");
    if (!script) {
      var heads = document.getElementsByTagName("head");
      if (heads && heads.length) {
        var head = heads[0];
        if (head) {
          script = document.createElement('script');
          script.setAttribute('src', url);
          script.setAttribute('type', type);
          if (charset) script.setAttribute('charset', charset);
          head.appendChild(script);
        }
      }
    }
    return script;
  }
};

loadStripe = function() {
  var stripe = Stripe('pk_test_rWG7KN6nzFjUj5D0EkbdevdS');
  var elements = stripe.elements();

  var card = elements.create('card', {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        lineHeight: '40px',
        fontWeight: 400,
        fontFamily: '"Proxima Nova", "Montserrat", Arial, sans-serif',
        fontSize: '15px',

        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    }
  });
  card.mount('#card-element');

  function setOutcome(result) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
      // Use the token to create a charge or a customer
      // https://stripe.com/docs/charges

      successElement.querySelector('.token').textContent = result.token.id;
      successElement.classList.add('visible');
      self.confetti();
    } else if (result.error) {
      errorElement.textContent = result.error.message;
      errorElement.classList.add('visible');
    }
  }

  card.on('change', function(event) {
    setOutcome(event);
  });

  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    var form = document.querySelector('form');
    var extraDetails = {
      name: form.querySelector('input[name=cardholder-name]').value,
    };
    stripe.createToken(card, extraDetails).then(setOutcome);
  });
}

Кто-нибудь есть идеи, как я могу динамически загружать код Stripe по мере загрузки v3 сценарий без HTML form в пределах dom, возвращает ошибку.

Для полного примера, пожалуйста, посмотрите на jsfiddle!

Любая помощь будет отличной!