1

我的页面上有一个 Stripe 支付表单，但我只想在用户按下按钮显示表单时加载它。

我在没有动态加载的情况下使用了这段代码，它可以 100% 工作，但是在动态加载的情况下，据我所知，它似乎没有做任何事情..

我将我的代码放入 JSFiddle，因为 StackOverflow 的代码片段无法正常工作.. 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);
  });
}

有谁知道如何在加载v3脚本时动态加载 Stripe 代码，而 htmlform中没有dom，返回错误。

有关完整示例，请查看 jsfiddle！

任何帮助都会很棒！

4

0 回答 0