Flex MicroForm Credit Card Brand Logos - cybersource

Question

I am using the Flex Microform v4 and saw that we are required to display credit card brand logos along with the credit card number. Looking at the data from the card detection event object. I don't see any images or urls to images being sent back. I also can't find anything in the documentation about how to display these card brand logos. I am planning to have images in an assets file that are mapped to the card detection brandedName field.
Is this the right/expected way to handle the display of credit card brand logos?

Answer 1

Yes this is exactly the right approach Brian.
This allows you to use images that are exactly appropriate for your checkout, be that in size, color palette, or the use of brand logos vs acceptance marks etc. This way you can craft the exact UX you want your customers to have and ensure that everything blends seamlessly with your site's look and feel.
There is a quick example of this in the documentation for the "cardTypeChange" event that also covers other elements on your page such as using brand appropriate terms for the security code.
But here's an even simpler snippet focused on just a card image change
microformInstance.on('cardTypeChange', function(data) {
if (data.card.length === 1) {
yourCardImageElement.src = '/path/to/your/images/' + data.card[0].name + '.png';
} else {
yourCardImageElement.src = '/path/to/your/images/default.png';
}
});
Note that event gives back an array of detected card types, so you might only want to show the card image when that's been narrowed down to a single card (as per this example).
Alternatively you could use this information to progressively hide or turn greyscale, acceptance marks that do not appear in the array to provide dynamic feedback to the user as they type.
Further, as you have complete control over your images, you could choose to do something like add your images to an existing sprite sheet your site might have and reap the benefits of having all your images load up front, then just manage using css classes.
Most of the networks provide excellent guidance on how to use their marks and source materials various image formats. Here's some useful links:
Visa
Mastercard
American Express
Discover