将随机数传递到服务器并返回到Braintree SDK

Question

以下视图正在生成适当的随机数，如javascript代码中的警报所证明。

<div class='row'>
  <div class='small-12 columns text-center'>
    <h4><%= t('proceed_to_payment') %> <%= number_to_currency(@clientorder.payment_amount) %></h4>
    <% if [email protected]? %>
      <%= form_tag transacted_clientorders_path(id: @clientorder.id), id: 'checkout' do %>
        <input type="hidden" id="nonce" name="payment_method_nonce" />
        <div id='dropin-container'></div>
        <%= submit_tag t('submit'), id: 'submit-button' %>
      <% end %>
      <script>
        $.ajax({
          method: "POST",
          url: "/transacted?id=<%= @clientorder.id %>&locale=<%= I18n.locale %>",
          data: { payment_method_nonce: payload.nonce }
        })
      </script>
      <script>
        var button = document.querySelector('#submit-button');
        braintree.dropin.create({
          authorization: "<%= @client_token %>",
          container: '#dropin-container'
          }, function (createErr, instance) {
            button.addEventListener('click', function () {
              instance.requestPaymentMethod(function (err, payload) {
                alert(payload.nonce);
                console.log(payload.nonce);
                console.log(err);
                if (err) {
                  console.log('Error', err);
                  return;
                }
             // Add the nonce to the form and submit
               document.querySelector('#nonce').value = payload.nonce;
               form.submit();
             });
            });
          });
      </script>
    <% end %>
  </div>
</div>

控制器动作

  def transacted
    @result = Braintree::Transaction.sale(
      amount:  @clientorder.payment_amount,
      payment_method_nonce: params[:payment_method_nonce], 
      options: {
        submit_for_settlement: true},
      )
    if @result.transaction.status == "submitted_for_settlement"
      [...]

但是不会导致任何进一步的动作。 @result为零，因为未提交随机数，并且在实践中以下记录的请求参数也未传递。

{"utf8"=>"✓",
 "authenticity_token"=>"qXjwFuI4mNRM+ZFoQ5TwvUBv58fLNVJyQVHJm/FfBdIaArbfhjJP0WirTe+7FnSl+/asJ+fY+d+JPA7xKNLP6Q==",
 "payment_method_nonce"=>"",
 "commit"=>"Submit",
 "id"=>"4",
 "locale"=>"en"}

这偏离正确的路径在哪里？

Answer 1

有些错误。

在该位置的ajax调用无法处理随机数
1. 以这种方式设置，将有2次对服务器的调用：ajax调用和form调用本身
2. 第2项的结果是，表单调用将具有一个空的随机数，因此将生成!result.success?，因此将生成result.errors的哈希，应最终对其进行处理。

因此，

<div class='row'>
<div class='small-12 columns text-center'>
  <div id="dropin-container"></div>
  <button id="submit-button" class='button success'><%= t('proceed_to_payment') %> <%= number_to_currency(@clientorder.payment_amount) %></button>
  <script>
    var button = document.querySelector('#submit-button');

    braintree.dropin.create({
      authorization: '<%= @client_token %>',
      container: '#dropin-container'
    }, function (createErr, instance) {
      button.addEventListener('click', function () {
        instance.requestPaymentMethod(function (err, payload) {
          // Submit payload.nonce to your server
        $.ajax({
          method: "POST",
          url: "<%= transacted_clientorders_path(id: @clientorder.id, locale: I18n.locale) %>",
          data: { payment_method_nonce: payload.nonce }
        })
        if (err) {
          console.log('Error', err);
          return;
        }
           // Add the nonce to the form and submit
                document.querySelector('#nonce').value = payload.nonce;
                form.submit();
        });
      });
    });
  </script>