如何:将Braintree .NET sdk中的客户端令牌处理程序插入客户端

时间:2016-04-06 16:57:40

标签: javascript c# ajax braintree

我对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!

1 个答案:

答案 0 :(得分:0)

我自己解决了。我显然没有引用正确的JQuery脚本。哦,我不得不改变&#39;类型:&#39;发布。这是我的最终工作代码,用于获取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>

希望这有助于其他人一路走来!

相关问题