Braintree国外支付对接(三) 之Customer UI_葉飞纷飞的...

hostedFieldsInstance.on( cardTypeChange , function (event) { // Change card bg depending on card type if (event.cards.length 1) { //$(form).removeClass().addClass(event.cards[0].type); $( #card-image ).removeClass().addClass(event.cards[0].type); //$( header ).addClass( header-slide // Change the CVV length for AmericanExpress cards if (event.cards[0].code.size 4) { hostedFieldsInstance.setAttribute({ field: cvv , attribute: placeholder , value: 1234 } else { hostedFieldsInstance.setAttribute({ field: cvv , attribute: placeholder , value: 123 cardButton.addEventListener( click , function (event) { event.preventDefault(); hostedFieldsInstance.tokenize(function (err, payload) { if (err) { console.log(err); return; var a payload.details.cardType; var b payload.details.lastFour; //document.querySelector( #nonce ).value payload.nonce; // This is where you would submit payload.nonce to your server var my3DSContainer; braintree.threeDSecure.create({ client: clientInstance }, function (threeDSecureErr, threeDSecure) { if (threeDSecureErr) { console.log( Error creating 3DSecure threeDSecureErr); return; else{ threeDSecure.verifyCard({ nonce: payload.nonce, amount: document.querySelector( #amount ).value, addFrame: function (err, iframe) { // Set up your UI and add the iframe. my3DSContainer document.createElement( div my3DSContainer.appendChild(iframe); document.body.appendChild(my3DSContainer); removeFrame: function () { //Remove UI that you added in addFrame. document.body.removeChild(my3DSContainer); }, function (err, thpayload) { if (err) { console.log(err); return; //hostedFieldsInstance.clear( number //hostedFieldsInstance.clear( cvv //hostedFieldsInstance.clear( expirationDate debugger; if (thpayload.liabilityShiftPossible) { if (thpayload.liabilityShifted) { //Liablity has shifted //submitNonceToServer(payload.nonce); document.querySelector( #nonce ).value thpayload.nonce; console.log( Card Got nonce: , thpayload.nonce); } else { console.log( Invalid Card! } else { document.querySelector( #nonce ).value thpayload.nonce; console.log( No3D nonce: , thpayload.nonce); }, false); /script

界面效果

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

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

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

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