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

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

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

    

        

            
Hi,
                

                Let's test a transaction
            

                Make a test payment with Braintree using PayPal or a card
            
        

        

            

                
                    Amount
                    

                        
                    
                

                

                    
Card

                    

                      Card Number
                      

                      

                    

                    

                      CVV
                      

                    

                     

                      Expiration-Date
                      

                    
     
                    Done
                
                

                    
Paypal
                    Paypal
                    
                
            

            
            Test Transaction
        
    

界面效果：

paypal和信用卡的初始化方法是不一样的，信用卡的稍微复杂点。它们所依赖的js也是不一样的。

这里要注意，所有引入的braintree官方的js的版本必须要一致，原因嘛，你去改下版本试下就知道了。版本不一致的话，paypal支付或者信用卡支付的时候官方会返回错误给我们，提示就是必须引入的client.min.js版本和paypal-checkout.js或者其他的js要一致。你用到哪种支付的时候，就会提示你要与哪种支付所依赖的js版本要一致。

1. client.min.js

         这是第一个要引入的，客户端支付控件初始化，其他支付方式的初始化都是依赖于braintree.client.create()返回的clientInstance作为参数去初始化的。代码中注释了*的地方。

    2. hosted-fields.min.js

           这是将信用卡支付中的输入框控件（卡号，CVV等）标记为信用卡支付时校验的字段，标记了之后我们就拿不到其客户真正输入的值，且一切相应的判断（比如卡号,CVV的正确性，必填性）这些就都不需要我们自己来控制。其外最重要的，不可让商城拿到客户的卡信息这是为了保护客户的财产泄露，引发商家的承担不必要的责任。入正式的时候需要进行PCI安全验证，这点上就很能让你通过了。

    3. paypal-checkout.js

           这是paypal支付需要的，braintree.paypal.create(）。这个很简单的。

    4.three-d-secure.js

           3D安全校验需要的，这个东西启用的主要原因就是 为支付减少风险。也为商家转移责任。

参考资料：

  https://developers.braintreepayments.com/guides/hosted-fields/examples/javascript/v3

以上纯属个人独自研究成果，仅供参考，转载请注明出处