Question

我有条形付款表格，当我使用隐藏的不同表格时，我必须使用单独的ID才能显示该表格。我已经找到了一种方法，但是如果可能的话，希望简化代码。

我有一个页面，其中包含要购买的商品。每个清单都可以有变体。因此，我需要创建单独的Stripe javascript，以便出现信用卡表格。

我想知道是否有一种更简单的方法可以代替以下操作：

  <script>

  var stripe = Stripe('pk_test_1234567890');


  var elements = stripe.elements();



  var style = {
    base: {
      color: '#32325d',
      lineHeight: '24px',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };

  var card = elements.create('card', {style: style});

  card.mount('#card-element');

  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  var form = document.getElementById('payment_form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        stripeTokenHandler(result.token);
      }
    });
  });

    function stripeTokenHandler(token) {

      var form = document.getElementById('payment_form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);

      // Submit the form
      form.submit();
    }



</script>

<script>

var stripe = Stripe('pk_test_1234567890');

var elements = stripe.elements();

var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

var card = elements.create('card', {style: style});

#HERE IS USE DIFFERENT CARD ID

card.mount('#card-element-2');

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var form = document.getElementById('payment_form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      stripeTokenHandler(result.token);
    }
  });
});

  function stripeTokenHandler(token) {
    var form = document.getElementById('payment_form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    form.submit();
  }



</script>

其中一种形式：

    <div class="form-row">
      <label for="card-element-2">
          Credit or debit card
      </label>
    <div id="card-element-2" class="form-control">
    </div>
    <div id="card-errors" role="alert"></div>
    </div>
...
...

如您所见，如果仔细观察，每个单独的脚本中将调用不同的id。我有一条类似#HERE I USE DIFFERENT CARD ID

的评论

问题，有没有一种方法可以简化此代码并调用多个ID的可能性，而不是像我那样使用冗长的JavaScript？

然后，在视图中，我将使用具有不同ID的单独信用卡表格。之所以这样，是因为当一种形式出现时，另一种形式被隐藏了。

调用javascript中的多个ID的可能性的更好方法？

0 个答案: