Inconsistent brand naming? about react-native-credit-card-input HOT 3 CLOSED

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.

from react-native-credit-card-input.

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.

from react-native-credit-card-input.

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

from react-native-credit-card-input.