Braintree Dropin UI，如何检测卡片类型？答案

【问题标题】：Braintree Dropin UI, how to detect Card Type?Braintree Dropin UI，如何检测卡片类型？
【发布时间】：2015-10-14 20:24:33
【问题描述】：

我正在使用 Braintree Dropin UI，我需要找出卡类型，例如 AMEX、VISA 等。

我正在使用 JS + .NET。这是我的付款请求代码：

var request = new TransactionRequest
                {
                    Amount = Math.Round(amount, 2),
                    PaymentMethodNonce = nonce,
                    MerchantAccountId = merchantAccount,
                    Options = new TransactionOptionsRequest
                    {
                        SubmitForSettlement = true
                    }
                };

实际上，在进行交易之前，我需要为某些特定的卡类型使用特定的merchantAcount。

有什么方法可以从客户端或clientToken 使用此request 或nonce 获取PaymentMethod。

我可以在 Braintree 保险库中看到 PaymentMethod 令牌。

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

标签： .net paypal braintree

【解决方案1】：

您可以在创建事务后从 Transaction 响应对象中获取 CardType。 CardType will be in the CreditCard attribute.

如果您使用 Braintree 的 Drop-In UI，它会在用户输入卡号时自动显示卡类型。

如果您想构建自己的，take a look at this JavaScript library for checking card type。

示例

var getCardTypes = require('credit-card-type');

var visaCards = getCardTypes('4111');
console.log(visaCards[0].type);  // 'visa'

var ambiguousCards = getCardTypes('6');
console.log(ambiguousCards.length);       // 3
console.log(ambiguousCards[0].niceType);  // 'Discover'
console.log(ambiguousCards[1].niceType);  // 'UnionPay'
console.log(ambiguousCards[2].niceType);  // 'Maestro'

【讨论】：

在进行交易之前我需要 CardType，当然它会显示在 Drop-In UI 中，但这在我的情况下不起作用，我需要在服务器端代码中使用 CardType。

【解决方案2】：

我是 Braintree 的开发人员。 global configurations 可以与 Drop-in 集成一起使用以获取卡类型。 onPaymentMethodReceived 回调允许您检查有关用户付款方式的一些基本信息。

此回调拦截表单提交事件，因此您可以将卡片类型添加到表单并将其传递给服务器端代码。 More details about the callback are listed here。下面是一个示例：

 <form id="checkout" method="post" action="/checkout"> 
   <div id="payment-form"></div> 
   <input type="hidden" id="nonce" name="payment_method_nonce" value=""> 
   <input type="hidden" id="card_type" name="card_type" value="">
   <input type="submit" value="Submit"> 
 </form>

然后在客户端 Braintree 设置中配置回调：

braintree.setup(clientTokenFromServer, "dropin", {
    container: "payment-form",
    onPaymentMethodReceived: function (obj) {
        var form = document.getElementById("checkout");
        var nonce = document.getElementById("nonce");
        var card_type = document.getElementById("card_type");
        nonce.value = obj.nonce;
        card_type.value = obj.details.cardType;
        form.submit();
    }
});

你会注意到，由于提交事件被拦截，我在表单中添加了支付方式nonce，并在表单上调用submit()完成提交。希望对您有所帮助！

【讨论】：