Inconsistent brand naming?

[randomBrainstormer]

When using CardView and filling thebrand key if you use the string "mastercard" it works correctly, but if you use "master-card" (with a dash) it does NOT work anymore. Obviosly the correct string to use if you want to see the brand image of the card seems to be "mastercard" because this is what is returned from the <CreditCardInput> component.

However, my issue is that the naming feels inconsistent, because some of the brands with two words are separated using a dash (such as "american-express"), but then others are separated with an underscore such as "cvc_amex", and other I would expect either dash or an underscore but is all together ("mastercard"). It does not affect the behaviour or use of this library, but when trying to use CardView and use strings, you need to match exactly the formatting the library needs for each brand.

I would propose to include two versions of the strings for the icons that come with this library, one version as the way it is currently now, and another version with a specific formatting (such as dash separated). This is useful when using CardView to display card information and the brand string comes from your server, you can simply format the string in a single way and expect all brand icon images will match a single formatting.

What do you guys think?

[quixote15]

I wouldn't say that the naming is inconsistent since I've been working with some payment gateways and the brand names returned by their API's matches exactly the one from this Library. This is a JSON example of accepted cards from my gateway:

{
"bins": [
    {
        "cardBrand": "banesecard",
        "regex": "^63(6117|7470|7473)",
        "debit": true,
        "emvSupported": true,
        "maximumInstallment": 12
    },
    {
        "cardBrand": "elo",
        "regex": "^(40117[89]|431274|438935|451416|457393|457631|457632|504175|506(699|7([0-6][0-9]|7[0-8]))|509([0-9]{3})|627780|63(6297|636[89])|65003[123]|6500(3[5-9]|4[0-9]|5[01])|6504(0[5-9]|[123][0-9]|8[5-9]|9[0-9])|6505([012][0-9]|3[0-8]|4[1-9]|[5-8][0-9]|9[0-8])|6507(0[0-9]|1[0-8]|2[0-7])|6509(0[1-9]|[1-6][0-9]|7[0-8])|6516(5[2-9]|[67][0-9])|6550([01][0-9]|2[1-9]|[34][0-9]|5[0-8]))",
        "debit": false,
        "emvSupported": false,
        "maximumInstallment": 12
    },
    {
        "cardBrand": "hipercard",
        "regex": "^(3841[046]0|606282|637(095|568|599|609|612))",
        "debit": false,
        "emvSupported": false,
        "maximumInstallment": 12
    },
    {
        "cardBrand": "dinersclub",
        "regex": "^(30[0-5]|3095|36|38|39)",
        "debit": true,
        "emvSupported": true,
        "maximumInstallment": 12
    },
    {
        "cardBrand": "amex",
        "regex": "^3[47]",
        "debit": false,
        "emvSupported": false,
        "maximumInstallment": 12
    },
    {
        "cardBrand": "mastercard",
        "regex": "^(222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[0-1][0-9]|2720|50(18|20|38|78)|5[1-5][0-9]{2}|5[6-8][0-9]{2}|6(0|[2-7])[0-9]{2})[0-9]{2}",
        "debit": true,
        "emvSupported": true,
        "maximumInstallment": 12
    },
    {
        "cardBrand": "visa",
        "regex": "^4[0-9]{5}",
        "debit": true,
        "emvSupported": true,
        "maximumInstallment": 12
    }
],
   "count": 7
 }

Besides that, if you have custom naming that comes from your server you could pass those brands to the component like that:

 import myCustomIcons from './brandIcons'
 ...
<CreditCardInput cardBrandIcons={myCustomIcons} onChange={this._onChange} />

And in your custom icons file you could give the brand whatever name you want:

 // brandIcons.js
const Icons = {
    my-custom-brand: require('./icons/custom.png'),
    ...
    'american-express': require('./icons/stp_card_amex.png'),
    'diners-club': require('./icons/stp_card_diners.png'),
    mastercard: require('./icons/stp_card_mastercard.png'),
    discover: require('./icons/stp_card_discover.png'),
    jcb: require('./icons/stp_card_jcb.png'),
    placeholder: require('./icons/stp_card_unknown.png'),
   visa: require('./icons/stp_card_visa.png'),
 }

 export default Icons

It is difficult to know every naming pattern used by API`s so I think the customisation should be made by you. I hope this helps.

[randomBrainstormer]

Hi @quixote15, your answer does help. I guess I could indeed use my own implementation, which would solve the problem, also I wouldn't have to worry about matching naming nor transforming any strings. Local brands are also not included between the assets of this library so perhaps the sooner or later using custom icons would be needed anyway.

In any case I would like to mention some cases in which it could be useful to have the brand strings all in the same format:

1) When the payment gateway is accepting only major providers (like Visa, Mastercard, Diners, etc) and you don't really need other brands. Notice in the JSON in the example posted above how there is a card with the brand "dinersclub", if we're using CardView to display the payment information from this card the brand will not show because the library expects "diners-club" (with a dash). This case will require me to use custom brand icons or transform my data to adapt to the specific naming, which is not a big deal, but it would definitely be more simple if I know that no matter which major brand it is, I simply have to take the string through a regex and avoid creating more code and hardcoding cases, nor including again assets that are already included in this library just to match the brand naming.

2) When using multiple gateways. Sometimes clients do change payment providers, so you can end up having to refactor the application to support both the old and the new model. In this case, because is difficult to have both gateways match EVERY brand, instead of having to update the model to add the exceptions for each brand, is more simple to just transform the whatever brand is returned from the API to a format of "no spaces no dashes". The point is: being able to easily adapt ANY API returned format to brand strings without needing to use create your own implementation for the brands that already exist in this library nor mapping the strings.

However, these are perhaps two very specific cases, and is indeed difficult to try to match every naming pattern, so I guess is more simple to just use your own custom icons for these situations.

[randomBrainstormer]

We can mark this as completed, the best solution that fits all cases is to use custom icons.