我在ASP.Net webform上使用Braintree dropin，并且无法读取从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>
alert(document.querySelector('#payment_method_nonce').value);行显示nonce已成功生成。我的服务器端代码TestBraintree2.aspx.vb：
Imports Braintree
Public Class TestBrainTree2
Inherits System.Web.UI.Page
'#Region page variables
Public clientToken As String
'#endregion
Private gateway As BraintreeGateway = New BraintreeGateway With {
.Environment = Braintree.Environment.SANDBOX,
.PublicKey = "XXXX",
.PrivateKey = "YYYY",
.MerchantId = "ZZZZ"
}
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
ClientScript.GetPostBackEventReference(Me, String.Empty)
If Not IsPostBack Then
clientToken = gateway.ClientToken.Generate()
Else
Dim nonce As String = Request.Form("payment_method_nonce")
Dim request2 = New TransactionRequest With {
.Amount = 10D,
.PaymentMethodNonce = nonce
}
Dim result As Result(Of Transaction) = gateway.Transaction.Sale(request2)
If result.IsSuccess() Then
lblResult.Text = String.Format("<b>Transaction id:</b>{0}", result.Target.Id)
Else
lblResult.Text = "Error"
End If
End If
End Sub
End Class
为了安全起见，在上面的代码中隐藏了我的密钥。问题发生在Dim nonce As String = Request.Form("payment_method_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>