Braintree-国外支付对接（二）

在前文 国外支付对接：Braintree（一）的基础上   已经拿到了相关配置信息，接下来就是码代码了，这里完成的主要功能是支付与退款。

在此之前，先说一下Briantree的支付流程：

    第一步先生成clientToken，一组根据 MerchantId，BraintreePublicKey，BraintreePrivateKey生成的字符串，用于前端生成初始化支付控件。第二步点击支付按钮客户输入用户名密码确定支付之后，Briantree在前端会返回nonce给我们（相当于支付授权凭证）。第三步，将nonce传到后台，我们进行扣款。至此支付完成。

1.项目引用

•    后端

 从官方下载的demo中可以看到，其实我们的后端需要用的dll就是一个：Braintree.dll，NUGET上也能下载

  

•   前端

     需要的就是引用官方js，这个需要看个人需求吧，如果你不想麻烦自己写样式，可以直接使用官方的js生成的支付按钮，那么用drop-in UI即可。使用drop-in是最直接便利的方式，我们在前端直接引用：

<script src="https://js.braintreegateway.com/web/dropin/1.9.2/js/dropin.min.js"></script>

 生成的样式长这样：

     如果需要自己设计样式，按照自己的规则来控制前端的话，那就得使用Customer UI。那当然需要引用的js就不同了，前端的写法也就不同了，后面细说。这块主要的js是

<script src="https://js.braintreegateway.com/web/3.29.0/js/client.min.js"></script>

2.代码解析

•  web.config配置

        API keys 拿到之后需要在程序中使用，我们直接配置在web.config中即可，当然安全着想也可以加密配置到数据库中。

       

•    前端(这里先介绍使用drop-in UI的写法)

 html:
   form只需要2个参数amount,nonce。最重要的是要定义一个div控件给生成支付控件使用，这里使用的id为bt-dropin的div

<form id="payment-form" method="post" action="/checkouts/Create">
            <section>
                <label for="amount">
                    <span class="input-label">Amount</span>
                    <div class="input-wrapper amount-wrapper">
                        <input id="amount" name="amount" type="tel" min="0.01" placeholder="Amount" value="0.01">
                    </div>
                </label>

                <div class="bt-drop-in-wrapper">
                    <div id="bt-dropin"></div>
                </div>
            </section>
            <input id="nonce" name="payment_method_nonce" type="hidden" />
            <button class="button"  type="submit"><span>Test Transaction</span></button>
        </form>

js：

<script src="https://js.braintreegateway.com/web/dropin/1.9.2/js/dropin.mi