Braintree-国外支付对接（三） 之Customer UI

前篇：Braintree-国外支付对接（二） 中的支付按钮的生成是braintree自带的样式和事件控制的，即drop-in，生成的界面我们不能过多的更改和控制。所以假如我们想要自己编写控件，自己控制样式，但又能正常点击触发支付等事件。那么就使用Customer UI.

使用Customer UI需要映入的官方JS有很大不同，但是我们的后端是不需要变的，因为提交的参数和返回的参数是一样的。下面给出的例子，没有过多的写的样式很漂亮华丽，简单点：

<div class="wrapper">
    <div class="checkout container">
        <header>
            <h1>Hi,
                <br>
                Let's test a transaction</h1>
            <p>
                Make a test payment with Braintree using PayPal or a card
            </p>
        </header>

        <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>

                <fieldset>
                    <legend>Card</legend>

                    <div class="cardinfo-card-number">
                      <label class="cardinfo-label" for="cc-number">Card Number</label>
                      <div class='input-wrapper' id="cc-number"></div>
                      <div id="card-image"></div>
                    </div>

                    <div class="cardinfo-card-number">
                      <label class="cardinfo-label" for="cc-number">CVV</label>
                      <div class='input-wrapper' id="cc-cvv"></div>
                    </div>

                     <div class="cardinfo-card-number">
                      <label class="cardinfo-label" for="cc-expiration-date">Expiration-Date</label>
                      <div class='input-wrapper' id="cc-expiration-date"></div>
                    </div>     
                    <button style="margin-top: 10px; background-color: pink;" class="button" id="card-button" type="button"><span style="padding: 0.7em 1em">Done</span></button>
                </fieldset>
                <fieldset>
                    <legend>Paypal</legend>
                    <button style="margin-top: 10px; background-color: pink;" class=