Braintree-自定义-手动提交onPaymentMethod表单 [英] Braintree - Custom - Manual form submission onPaymentMethodReceived

问题描述

您好，互联网很棒.

我正在尝试实施智慧树支付，到目前为止一切都还不错.我已经以自己的外观成功实现了自定义表单.一切都很好.

I am trying to implement braintree payments and all has been fine so far. I have successfully implemented the custom form with my own look and feel. All works great.

现在，我正在为我提交的其他数据添加验证，例如运输说明和其他物品.

Now I am adding validation for extra data that I submit such as shipping instructions and other goodies.

要进行验证，我读到我需要实现回调"onPaymentMethodReceived"，该调用与现成的提交流程依次调用……因此最终将提交表单，这使我有时间进行额外的验证.然后，当然我应该使用JS提交表单.

To validate, I read that I need to implement the call back "onPaymentMethodReceived" which is called in sequence with the nonce submit flow... and thus will ultimately submit the form allowing me the time to run my extra validation. Then of course I am expected to submit the form using JS.

文档还指出，我必须确保将随机数添加到我做的表格中.

The docs also state that I must ensure the nonce is added into the form which I do.

我遇到的问题是，一切正常为止我必须手动提交表单.控制台指出form.submit不是函数.

The issue I am having is that everything works up to the point where I manually have to submit the form. Console states that form.submit is not a function.

如何从回调中提交表单?

How can I submit the form from the callback?

<script>

function launchValidation(obj){
    //alert('launch validation')    
    alert('the nonce is ' + obj.nonce );
    $(".payment_method_nonce").val(obj.nonce);
    var form = document.getElementsByTagName('form')[0];     
    //validatePayForm()
    form.submit();    // console says the function does not exist?
}

var jqxhr = $.get( "/CreateBrainTreeToken", function(data) {

      braintree.setup( data, "custom", {
          id: "checkout",
          onPaymentMethodReceived: launchValidation
        });

    })
      .done(function() {
        //alert( "second success" );
      })
      .fail(function() {
        //alert( "error" );
      })
      .always(function() {
        //alert( "finished" );
      });

</script>

在上面的代码中，您可以看到我设置了该选项:onPaymentMethodReceived = onPaymentMethodReceived

In the code above you can see I set the option: onPaymentMethodReceived = onPaymentMethodReceived

如果我删除该行，则可以自动提交且没有拦截，一切正常.问题是我需要验证，因此我需要在触发的回调中手动提交，并获取所有适当的数据.

If I remove that line all works fine as auto-submit with no intercept. The issue is I need to validate so hence I need to manually submit in the callback which is fired and I get all the appropriate data back.

那么为什么表单对象有些无效，或者为什么它的函数(如Submit())仍然被剥夺.

So why is the form object some how not valid or is still stripped of its functions like submit().

我希望在JS客户随机数获得(标记化)之后，可以手动提交表单.

I would expect that after the JS client nonce was gotten (tokenized) the form could be manually submitted.

我确定这是我所忽略的简单事情.

I am sure this is something simple I am overlooking.

尼尔

推荐答案

K我通过逐步进行客户端标记化来使其正常工作.有效且敏感的字段无法到达服务器.

K I got it to work by stepping down to the client tokenization. Works great and sensitive fields don't reach the server.

   var serverToken
   function tokenizeCard(){

        var client = new braintree.api.Client({clientToken: serverToken});
        client.tokenizeCard({
          number:  $("#number").val() ,
          cardholderName: $("#cardholder_name").val(),
          expirationMonth: $("#expiration_month").val(),
          expirationYear: $("#expiration_year").val(),
          cvv: $("#cvv").val(),
          // Address if AVS is on
          billingAddress: {
            postalCode: $("postal_code").val()
          }
        }, function (err, nonce) {

            theForm = document.forms[0]

             var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'payment_method_nonce';
                input.value = nonce;
                theForm.appendChild(input);

              if( validatePayForm() )
                  document.forms[0].submit()
        });

    }


    var jqxhr = $.get( "/CreateBrainTreeToken", function(data) {

          serverToken = data;
          /*
          braintree.setup( data, "custom", {
              id: "checkout",
              onPaymentMethodReceived: function(obj){
                  document.forms[0].submit();

              }
            });
          */

        })
          .done(function() {
            //alert( "second success" );
          })
          .fail(function() {
            //alert( "error" );
          })
          .always(function() {
            //alert( "finished" );
          });

我还可以运行我的验证，插入随机数并在良好时将其全部发送出去.

I can also run my validation, insert the nonce and send it all off when good.

尼尔

这篇关于Braintree-自定义-手动提交onPaymentMethod表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！