How is the current card's network detected for the bank card networks bar?

dmitrii_fediuk · April 26, 2017, 7:33pm

Context: How is the bank card networks bar implemented?

Step 1. Magento_Payment/template/payment/cc-form.html

magento/magento2/blob/2.1.6/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html#L19-L20


_active: $parent.selectedCardType() == item.value,
_inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item.value

Step 2. Magento_Payment/js/payment/cc-form::initialize()

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js#L56-L80


//Set credit card number to credit card data object
this.creditCardNumber.subscribe(function (value) {
    var result;


    self.selectedCardType(null);


    if (value === '' || value === null) {
        return false;
    }
    result = cardNumberValidator(value);


    if (!result.isPotentiallyValid && !result.isValid) {
        return false;
    }


    if (result.card !== null) {
        self.selectedCardType(result.card.type);
        creditCardData.creditCard = result.card;
    }


    if (result.isValid) {
        creditCardData.creditCardNumber = value;
        self.creditCardType(result.card.type);
    }
});

Step 3. Magento_Payment/js/model/credit-card-validation/credit-card-number-validator

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Payment/view/base/web/js/model/credit-card-validation/credit-card-number-validator.js#L48-L56


potentialTypes = creditCardTypes.getCardTypes(value);


if (potentialTypes.length === 0) {
    return resultWrapper(null, false, false);
} else if (potentialTypes.length !== 1) {
    return resultWrapper(null, true, false);
}


cardType = potentialTypes[0];

Step 4. Magento_Payment/js/model/credit-card-validation/credit-card-number-validator/credit-card-type

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Payment/view/base/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js#L15-L146


var types = [
    {
        title: 'Visa',
        type: 'VI',
        pattern: '^4\\d*$',
        gaps: [4, 8, 12],
        lengths: [16],
        code: {
            name: 'CVV',
            size: 3
        }
    },
    {
        title: 'MasterCard',
        type: 'MC',
        pattern: '^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$',
        gaps: [4, 8, 12],
        lengths: [16],
        code: {
            name: 'CVC',
            size: 3
        }
    },
    {
        title: 'American Express',
        type: 'AE',
        pattern: '^3([47]\\d*)?$',
        isAmex: true,
        gaps: [4, 10],
        lengths: [15],
        code: {
            name: 'CID',
            size: 4
        }
    },
    {
        title: 'Diners',
        type: 'DN',
        pattern: '^(3(0[0-5]|095|6|[8-9]))\\d*$',
        gaps: [4, 10],
        lengths: [14, 16, 17, 18, 19],
        code: {
            name: 'CVV',
            size: 3
        }
    },
    {
        title: 'Discover',
        type: 'DI',
        pattern: '^(6011(0|[2-4]|74|7[7-9]|8[6-9]|9)|6(4[4-9]|5))\\d*$',
        gaps: [4, 8, 12],
        lengths: [16, 17, 18, 19],
        code: {
            name: 'CID',
            size: 3
        }
    },
    {
        title: 'JCB',
        type: 'JCB',
        pattern: '^35(2[8-9]|[3-8])\\d*$',
        gaps: [4, 8, 12],
        lengths: [16, 17, 18, 19],
        code: {
            name: 'CVV',
            size: 3
        }
    },
    {
        title: 'UnionPay',
        type: 'UN',
        pattern: '^(622(1(2[6-9]|[3-9])|[3-8]|9([[0-1]|2[0-5]))|62[4-6]|628([2-8]))\\d*?$',
        gaps: [4, 8, 12],
        lengths: [16, 17, 18, 19],
        code: {
            name: 'CVN',
            size: 3
        }
    },
    {
        title: 'Maestro International',
        type: 'MI',
        pattern: '^(5(0|[6-9])|63|67(?!59|6770|6774))\\d*$',
        gaps: [4, 8, 12],
        lengths: [12, 13, 14, 15, 16, 17, 18, 19],
        code: {
            name: 'CVC',
            size: 3
        }
    },
    {
        title: 'Maestro Domestic',
        type: 'MD',
        pattern: '^6759(?!24|38|40|6[3-9]|70|76)|676770|676774\\d*$',
        gaps: [4, 8, 12],
        lengths: [12, 13, 14, 15, 16, 17, 18, 19],
        code: {
            name: 'CVC',
            size: 3
        }
    }
];


return {
    /**
     * Get credit card type
     * @param {String} cardNumber
     * @returns {Array}
     */
    getCardTypes: function (cardNumber) {
        var i, value,
            result = [];


        if (utils.isEmpty(cardNumber)) {
            return result;
        }


        if (cardNumber === '') {
            return $.extend(true, {}, types);
        }


        for (i = 0; i < types.length; i++) {
            value = types[i];


            if (new RegExp(value.pattern).test(cardNumber)) {
                result.push($.extend(true, {}, value));
            }
        }


        return result;
    }
};