Braintree集成-无法访问服务器端代码中的javascript nonce_Javascript_Asp.net_Webforms_Braintree

Braintree集成-无法访问服务器端代码中的javascript nonce

javascript asp.net

Braintree集成-无法访问服务器端代码中的javascript nonce,javascript,asp.net,webforms,braintree,Javascript,Asp.net,Webforms,Braintree,我在ASP.NETWebForm上使用Braintree下拉列表，读取javascript返回的nonce时遇到问题。它正在生成，但在我的服务器端代码中，我无法访问它。我怀疑这是因为在Javascript代码完成之前调用了服务器端代码，但由于web开发不是我的专长，我不确定我的客户端代码TestBrainTree.aspx： <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestBrainTree2.aspx.vb"

我在ASP.NETWebForm上使用Braintree下拉列表，读取javascript返回的nonce时遇到问题。它正在生成，但在我的服务器端代码中，我无法访问它。我怀疑这是因为在Javascript代码完成之前调用了服务器端代码，但由于web开发不是我的专长，我不确定

我的客户端代码TestBrainTree.aspx：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestBrainTree2.aspx.vb" Inherits="eStore2.TestBrainTree2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <script src="https://js.braintreegateway.com/web/dropin/1.16.0/js/dropin.min.js"></script>
</head>
<body>
   <form id="form1" runat="server"> 
       <div id="dropin-container"></div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>  
          <button id="btnSubmit">Request payment method</button>
        <asp:label id="lblResult" runat="server"></asp:label>
    <input id="payment_method_nonce" name="payment_method_nonce" type="hidden" />
    </form> 
  <script>
    var button = document.querySelector('#btnSubmit');

    braintree.dropin.create({
      authorization: '<%=clientToken%>',
      container: '#dropin-container'
    }, function (createErr, instance) {
      button.addEventListener('click', function () {
        instance.requestPaymentMethod(function (err, payload) {
          // Submit payload.nonce to your server
            document.querySelector('#payment_method_nonce').value = payload.nonce;
            alert(document.querySelector('#payment_method_nonce').value);
         });
      });
    });
  </script>
</body>
</html>

为了安全起见，我在上面的代码中隐藏了我的钥匙。问题出现在

Dim nonce As String=Request.Form（“payment\u method\u nonce”）

行中，我希望看到在客户端生成的nonce，但它是空的。

您没有看到

nonce

的原因是表单是在设置nonce之前提交的

将前端代码更改为以下代码以解决此问题。该代码防止表单在获得nonce之前提交。一旦获得nonce，它将自动提交表单

<script>
  var form = document.querySelector('#form1');

  braintree.dropin.create({
    authorization: '<%=clientToken%>',
    container: '#dropin-container'
  }, function (createErr, instance) {
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      instance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.log('Error', err);
          return;
        }

        // Add the nonce to the form and submit
        document.querySelector('#payment_method_nonce').value = payload.nonce;
        form.submit();
      });
    });
  });
</script>


var form=document.querySelector（“#form1”）；
braintree.dropin.create({
授权：''，
容器：“#放置容器”
}，函数（createErr，实例）{
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
requestPaymentMethod（函数（err，有效负载）{
如果（错误）{
console.log（'Error'，err）；
返回；
}
//将nonce添加到表单并提交
document.querySelector（“#付款方法_nonce”）。value=payload.nonce；
表单提交（）；
});
});
});

非常感谢Michal！为了让它发挥作用，我把头发扯了好长时间了。

<script>
  var form = document.querySelector('#form1');

  braintree.dropin.create({
    authorization: '<%=clientToken%>',
    container: '#dropin-container'
  }, function (createErr, instance) {
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      instance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.log('Error', err);
          return;
        }

        // Add the nonce to the form and submit
        document.querySelector('#payment_method_nonce').value = payload.nonce;
        form.submit();
      });
    });
  });
</script>