Braintree - Custom - Manual form submission onPaymentMethodReceived

问题

Hello great internet.

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.

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.

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>

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.

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

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.

Neil

回答1:

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.

Neil

来源：https://stackoverflow.com/questions/32188275/braintree-custom-manual-form-submission-onpaymentmethodreceived

标签

javascript

braintree