我可以为.NET Web应用程序使用Braintree.js吗？

Question

我已经研究了几天Braintree支付。我很喜欢它的架构，概念等。但是在阅读文档和.Net Walk-throughs之后，我发现所有针对.Net的示例都是在MVC3中展示的。我正在尝试使用普通网页表单将Braintree集成到我的当前.Net Web应用程序中。 我的目标是将普通网页表单发送回带有客户数据和卡片数据的付款页面。卡片数据应该使用他们的Braintree.js进行加密。这样我就可以将包括加密的卡片数据在内的一切内容发送给Braintree进行处理。表单看起来会像这样：

<p>
  <label>Card Number</label>
  <asp:TextBox ID="number" AutoCompleteType="Disabled" MaxLength="20" Width="150" data-encrypted-name="number" runat="server" />        
</p>
<p>
  <label>CVV</label>
  <asp:TextBox ID="cvv" AutoCompleteType="Disabled" MaxLength="4" Width="50" data-encrypted-name="cvv" runat="server" />
</p>
<p>
  <label>Expiration (MM/YYYY)</label>
  <asp:TextBox ID="month" AutoCompleteType="Disabled" MaxLength="2" data-encrypted-name="month" runat="server" />
 /
  <asp:TextBox ID="year" AutoCompleteType="Disabled" MaxLength="4" data-encrypted-name="year" runat="server" />
</p>
<asp:Button ID="btnSubmit" Text="SUBMIT" runat="server" />

<script type="text/javascript" src="https://js.braintreegateway.com/v1/braintree.js"></script>
<script type="text/javascript">
  var braintree = Braintree.create("MyClientSideKey");
  braintree.onSubmitEncryptForm('braintree-payment-form');
</script>

然后在代码后台，我将设置Form.Action、Form.Method和Form.ID，如下所示：

protected void Page_Load(object sender, EventArgs e)
{
  Form.Action = "CreateTransaction()";
  Form.Method = "POST";
  Form.ID = "braintree-payment-form";  
}

希望当用户提交表单时，它会触发 "CreateTransaction()" 成员方法，并将加密的卡片数据作为 "collection" 参数一起传递，如下所示：

[HttpPost]
public ActionResult CreateTransaction(FormCollection collection)
{
  TransactionRequest request = new TransactionRequest
  {
    Amount = 1000.0M,
    CreditCard = new TransactionCreditCardRequest
  {
  Number = collection["number"],
  CVV = collection["cvv"],
  ExpirationMonth = collection["month"],
  ExpirationYear = collection["year"]
  },
  Options = new TransactionOptionsRequest
  {
    SubmitForSettlement = true
  }
};

Result<Transaction> result = Constants.Gateway.Transaction.Sale(request);

return null;
}

当我采用这种方法时，表单永远不会回传到“CreateTransaction()”成员。我漏掉了什么？这可以使用常规的Web表单完成吗？

- Vince Anzelone

Answer 1

好的，经过大量实验和摸索，我终于成功让Braintree.js在将数据传递到我的服务器之前对其进行加密。然后，我可以使用后台代码来处理付款过程。

这是我正在使用的ASP.NET Web表单：

卡号

    <p>
        <label>CVV</label>
        <asp:TextBox ID="txtCVV" AutoCompleteType="Disabled" MaxLength="4" Width="50" data-encrypted-name="cvv" runat="server" />
    </p>
    <p>
        <label>Expiration (MM/YYYY)</label>
        <asp:TextBox ID="txtMonth" AutoCompleteType="Disabled" MaxLength="2" data-encrypted-name="month" runat="server" />
        /
        <asp:TextBox ID="txtYear" AutoCompleteType="Disabled" MaxLength="4" data-encrypted-name="year" runat="server" />
    </p>
    <asp:Button ID="btnSubmit" Text="SUBMIT" runat="server" />

    <script type="text/javascript" src="https://js.braintreegateway.com/v1/braintree.js"></script>
    <script type="text/javascript">
        var braintree = Braintree.create("YOURKEYHERE");
            braintree.onSubmitEncryptForm('braintree-payment-form');
    </script>

请注意以下几点：

• 我正在使用服务器控件，而不是简单的HTML标记。

• braintree.js将加密任何具有“data-encrypted-name”属性的字段。

• “data-encrypted-name”属性不需要与控件的ID属性相同。

• braintree.js脚本正在将数据提交到“braintree-payment-form”表单。

因此，当我单击提交按钮时，此表单将自然地返回。 我正在使用特定的带有主页面的表单，因此需要在Page_Load中更改Form.ID：

protected void Page_Load(object sender, EventArgs e)
{
  //Adjust the properties of the form itself as this
  //form has a master page.         
  Form.ID = "braintree-payment-form";

  //Wire up the click event
  btnSubmit.Click += btnSubmit_Click;
}

在点击事件处理程序中，我可以从Request.Form对象中提取加密的值，然后将交易请求提交给Braintree网关：

void btnSubmit_Click(object sender, EventArgs e)
{
  //--------------------------------------------------------------------------------------------------
  //Extract encrypted values from the Request.Form object
  //braintree.js has encrypted these values before placing them in
  //the Request object.
  //--------------------------------------------------------------------------------------------------
  string number = Request.Form["number"].ToString();
  string cvv = Request.Form["cvv"].ToString();
  string month = Request.Form["month"].ToString();
  string year = Request.Form["year"].ToString();

  //--------------------------------------------------------------------------------------------------
  //Gateway
  //This is the Braintree Gateway that we will use to post the transaction
  //to.  This is included here in the example but should be extracted out
  //into some static class somewhere.  Possibly in another layer.
  //--------------------------------------------------------------------------------------------------
  BraintreeGateway Gateway = new BraintreeGateway
  {
    Environment = Braintree.Environment.SANDBOX,
    PublicKey = "YOURPUBLICKEYHERE",
    PrivateKey = "YOURPRIVATEKEYHERE",
    MerchantId = "YOURMERCHANTIDHERE"
  };

  //--------------------------------------------------------------------------------------------------
  //Transaction Request
  //This is the actual transaction request that we are posting to the 
  //Braintree gateway.  The values for number, cvv, month and year have 
  //been encrypted above using the braintree.js.  If you were to put a 
  //watch on the actual server controls their ".Text" property is blank
  //at this point in the process.
  //--------------------------------------------------------------------------------------------------
  TransactionRequest transactionRequest = new TransactionRequest
  {
    Amount = 100.00M,
    CreditCard = new TransactionCreditCardRequest
    {
      Number = number,
      CVV = cvv,
      ExpirationMonth = month,
      ExpirationYear = year,
    }
  };

  //--------------------------------------------------------------------------------------------------
  //Transaction Result
  //Here we are going to post our information, including the encrypted
  //values to Braintree.  
  //--------------------------------------------------------------------------------------------------
  Result<Transaction> result = Gateway.Transaction.Sale(transactionRequest);
}

好的，这是一个非常基础的例子，介绍了如何向Braintree提交交易。然而，它解决了我在将卡数据传输到服务器之前加密的第一个大障碍。希望这能有所帮助...

- Vince Anzelone

---

这是一个不错的例子。将其链接给另一个遇到类似问题的人：http://stackoverflow.com/questions/23491649/braintree-with-web-forms-and-data-encrypted-value - agf