Question

我有一个让用户选择付款方式的表单。如果方法是信用卡，则会显示已启动的条带元素表单，并且它们可以输入CC / EXP / ZIP数据。一旦他们单击提交，表单应首先通过验证（jQuery Validate），然后完成从Stripe获取令牌以在下一页中传递到服务器的过程。问题是即使声明了这些函数，即使我正在调用它们，它们似乎也没有运行，我也无法弄清楚原因。

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});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('keyup', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});


var stripe = Stripe('');

// Create an instance of Elements
var elements = stripe.elements();
jQuery( document ).ready(function() {
    function stripeTokenHandler(token) {
                // Insert the token ID into the form so it gets submitted to the server
                document.createElement('input');
                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);
                alert('token id is' + token.id);
                var token_field = jQuery("input[name='stripeToken']").val();
                alert(token_field);
                // Submit the form

                setTimeout(form.submit(), 3000);

        };
    function createToken() {
        stripe.createToken(card).then(function(result) {

            if (result.error) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            alert(result.error.message);
            } else {
            // Send the token to your server
            alert('we got the token, sending it off')
            stripeTokenHandler(result.token);
            }
        });
    };

    function stripeCreateToken(event){

        var selectVal = jQuery("#payment_type option:selected").val();
        if( selectVal !== "Credit Card" ){
            // Not CC, skip Stripe and submit the form
            alert('it failed or no credit card');
            var form = document.getElementById('payment-form');
            form.submit();
        }
        createToken(); 
    };


    jQuery('#payment_type').on('change', function () {
            var selectVal = jQuery("#payment_type option:selected").val();
            //var form = document.getElementById('payment-form');
            if( selectVal == "Credit Card" ){
                jQuery('.check').hide();
                jQuery('.cc').show();

                jQuery("#payment-form").submit(function(e){
                    stripeCreateToken(e);
                });
            }else{
                jQuery('.cc').hide();
                jQuery('.check').show();
            }
        }); 
});

奇怪的是，如果我将所有上述内容粘贴到控制台中，它可以正常工作，但我想了解我做错了什么，或者至少在某个方向看看。

Answer 1

问题是jQuery验证在Stripe完成它之前触发了表单提交。我从jQuery验证中删除了form.submit();并让它启动了我的条带函数并且工作得很好。

jQuery函数没有使用Stripe Elements触发

1 个答案: