HOW TO：從Braintree .NET SDK向客戶端插值客戶端令牌處理程序

Question

我是Web開發的新手，並且主要使用VB和WinForms。 我已經為客戶建立了一個小型電子商務網站，並決定使用Braintree來處理交易。 但是，我很難將服務器生成的客戶端令牌發送到客戶端Braintree UI插入表單。 我已經按照他們的建議創建了默認處理程序。

public class ClientTokenHandler : IHttpHandler
{
    public string pubClientToken;
    public void ProcessRequest(HttpContext context)
    {
        var gateway = new BraintreeGateway
        {
            Environment = Braintree.Environment.SANDBOX,
            MerchantId = "MerchantID",
            PublicKey = "Public_Key",
            PrivateKey = "Private_Key"
        };
       pubClientToken = gateway.ClientToken.generate();
       HttpContext.Current.Response.Write(pubClientToken);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

我在處理程序的開頭設置了一個斷點，以便當我從客戶端調用處理程序以獲取客戶端令牌時，可以確保已生成令牌。 但是，決不會碰到斷點，也不會加載嵌入式UI（我想是因為它沒有有效的令牌）。 這是我對處理程序的AJAX調用的代碼。

<div class="container">
    <form id="checkout" method="post" action="/checkout">
    <div id="payment-form"></div>
    <input type="submit" value="Pay $10">
    </form>

    <script src="https://js.braintreegateway.com/js/braintree-2.22.2.min.js"></script>

   <script>
       var clientToken;
       function CallHandler() {
           $.ajax({
               url: "ClientTokenHandler.ashx.cs",
               type: "GET",
               contentType: "application/json; charset=utf-8",
               success: OnComplete,
               error: OnFail
           });
           return result;

           function OnComplete(result) {
               clientToken = data;
           }
           function OnFail(result) {
               alert('Request failed');

           }
       }

    // We generated a client token for you so you can test out this code
    // immediately. In a production-ready integration, you will need to
       // generate a client token on your server (see section below).
       //var clientToken = "eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJjOWU2ZDgwNDI3YWEyMjQ5YjMwMmQzNjdjZTJhOTljODNiMWNjYTljOGNlMjcwMzBlZDIxYmM2NjYxZDhjMzBlfGNyZWF0ZWRfYXQ9MjAxNi0wNC0wNlQxNjo0OToxOS45NDEyNTQ3MzcrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJjb2luYmFzZUVuYWJsZWQiOmZhbHNlLCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0=";


    braintree.setup(clientToken, "dropin", {
    container: "payment-form"
    });
    </script>
</div>

有沒有人舉例說明他們會/會如何做？ 這是我的第一篇文章，請不要扔太多石頭。 ;）TIA！

Answer 1

我自己解決了。 我顯然沒有引用正確的JQuery腳本。 哦，我必須將'type：'更改為POST。 這是我最后的工作代碼，用於獲取Braintree生成的客戶令牌並將其傳遞給客戶。

<div class="container">
        <form id="checkout" method="post" action="/Checkout">
        <div id="payment-form"></div>
        <input type="submit" value="Submit Payment">
        </form>

        <script src="https://js.braintreegateway.com/js/braintree-2.22.2.min.js"></script>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            //AJAX call to get clientToken from ClientTokenHandler
           var clientToken;
            $(document).ready(function CallHandler() {
                $.ajax({
                    url: "ClientTokenHandler.ashx",
                    type: "POST",
                    cache: false,
                    datatype: "text",
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        clientToken = data;
                        braintree.setup(clientToken, "dropin", {
                            container: "payment-form"
                        });
                    }
                });
            });
            //End call
         </script>
    </div>

希望這對其他人有所幫助！