3

そこで、ここ数日、Braintree Payments について調べてきました。私はアーキテクチャ、コンセプトなどが気に入っています。ドキュメントと .NET ウォークスルーに目を通した後、.NET の例はすべて MVC3 にあることに気付きました。通常の Web フォームを使用して、Braintree を現在の .NET Web アプリケーションに統合しようとしています。

私の目標は、顧客データとカード データの両方を使用して、通常の 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";  
}

したがって、うまくいけば、ユーザーがフォームを送信すると、次のように「collection」パラメーター内の暗号化されたカード データとともに「CreateTransaction()」メンバーにヒットします。

[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 フォームを使用して実行できますか?

4

1 に答える 1

8

OK、暗闇の中で多くの実験と撮影を行った後、サーバーに渡す前にデータを暗号化するためにこれを 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 Gateway にトランザクション リクエストを送信できます。

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 にトランザクションをポストする方法の非常に基本的な例です。ただし、サーバーに到達する前にカードデータを暗号化するという最初の大きなハードルを解決します. お役に立てれば...

于 2013-09-19T20:56:20.563 に答える