Flex MicroForm Credit Card Brand Logos

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