javascript - AJAX请求与stripe结合

Question

我已经审阅了几个线程 Link 1 link 2 。

我正在使用 stripe.js，我想通过一个按钮提交我的定制表单和一些其他包含附加信息的表单。这个想法是发送两条不同的消息，一条发送给客户端，一条发送给服务提供商。

我希望使用“付款”按钮(或此时的任何表单)提交这两个表单，这样我就可以在我的 Controller /模型中选择名称作为索引，然后发送一封电子邮件，通知两者各方对交易的看法不同。

问题是，stripe 处理 javascript 上的所有表单提交，我对如何将其与我自己的 AJAX 请求结合起来以同时发送两个表单感到有点困惑。

这是我现在 View 中的 JS 代码，如果我这样做，则不会创建 token ，也不会执行任何操作:

function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission

    } else { // Token was created!

      // Get the token ID:

      var token = response.id;  

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden"name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };


  function submitTwoForms() {

    var dataObject = {invoice: "invoice", name: "name", phone: "phone", email: "email", message: "message"};

      $.ajax({

        url  : base.url + '/index.php/contact',

        data : dataObject,

        type : "GET",

        success: $(function(){

              var $form = $('#payment-form');

              $form.submit(function(event) {

              // Disable the submit button to prevent repeated clicks:

              $form.find('.submit').prop('disabled', true);


              // Request a token from Stripe:

              Stripe.card.createToken($form, stripeResponseHandler);

              //to prevent submit

              return false;   

              });       

        })

      });

  }


  $('#customButton').submit(function() {

    submitTwoForms();

    return false;

  });  

非常感谢任何指点。

Answer 1

我最终按如下方式重做了我的代码，现在它可以工作了。

<script>

 $("#customButton").on('click', function() {

  $('#contactForm')[0].submit(function(event){

    var formData = {

      'invoice'   :$('input[name=invoice]').val(),

      'name'      :$('input[name=name]').val(),

      'email'     :$('input[name=email]').val(),

      'phone'     :$('input[name=phone]').val(),

      'message'   :$('input[name=message]').val(),

    };


    $.ajax({

        type     : 'POST',

        url      : base.url + '/index.php/contact',

        data     : formData,

        dataType : 'json',

        encode   : true

    })

  });

})  

  function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission



    } else { // Token was created!

      // Get the token ID:

      var token = response.id;

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden" name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };

  $(function() {

    var $form = $('#payment-form');

    $form.submit(function(event) {

      // Disable the submit button to prevent repeated clicks:

      $form.find('.submit').prop('disabled', true);

      // Request a token from Stripe:

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:

      return false;

    });

  })

</script>

希望其他人能够受益。