Braintree-国外支付对接(三) 之Customer UI_葉飞纷飞的..._CSDN博客
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: 123cardButton.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( divmy3DSContainer.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( expirationDatedebugger; 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
界面效果
![\"\\\"\\\"\"](\"\\\"http://img-blog.csdn.net/20180322133748501\\\"\")
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
以上纯属个人独自研究成果 仅供参考 转载请注明出处
本文链接： https://wap.ebiomall.com/b554-braintree/info-1616590620.html
免责声明 本文仅代表作者个人观点，与本网无关。其创作性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不做任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
版权声明 未经蚂蚁淘授权不得转载、摘编或利用其他方式使用上述作品。已经经本网授权使用作品的，应该授权范围内使用，并注明“来源：蚂蚁淘”。违反上述声明者，本网将追究其相关法律责任。
