前篇: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=