Specify Card Logos

[crookedneighbor]

If I can ask one question: I was searching in the Drop-in UI Developer guides; however, I can't find a way how to remove some of the logos of cards visible on the right-side of the Pay with card form (see highlight in the image below). I'm asking this because we accept only Visa and Mastercard (and no Amex or others), and by having all logos there creates confusion and generates unsuccessful payments. Many thanks.

Originally posted by @studios in https://github.com/braintree/braintree-web-drop-in/issues/613#issuecomment-761536739

[crookedneighbor]

These logos should be determined by the configuration on your merchant account. I think it may be pulled only from the configuration from your default merchant account, so if you're specifying a merchant account in your client token generation, and that merchant account does not support Discover, that could be the reason you're seeing this.

[crookedneighbor]

If that's the case, we'll have to provide someway to override the logos provided.

@studios, If you need a temporary workaround, you can target:

[data-braintree-id="discover-card-icon"] {
  display: none !important;
}

[oscarleonnogales]

We've released a fix for this as of version 1.38.0

You can selectively disable different card brands by setting the appropriate fields in the card.overrides.fields.number.supportedCardBrands object when creating the Braintree dropin instance, disabling the card brands this way will now also prevent the respective icon from rendering.

Example shown below.

braintree.dropin.create({
        authorization: 'your_token',
        container: '#dropin-container',
        card: {
          overrides: {
            fields: {
              number: {
                supportedCardBrands: {
                  visa: true,
                  mastercard: true,
                  "american-express": false
                },
              }
            }
          }
        }
      })