Flex MicroForm 信用卡品牌标志

Question

我正在使用 Flex Microform v4，发现我们需要显示信用卡品牌徽标和信用卡号。查看来自卡片检测事件对象的数据。我没有看到任何图像或图像的 url 被发回。我在文档中也找不到有关如何显示这些卡片品牌徽标的任何内容。我计划将资产文件中的图像映射到卡片检测 brandedName 字段。这是处理信用卡品牌徽标显示的right/expected方式吗？

Answer 1

是的，这正是布赖恩的正确方法。

这使您可以使用完全适合您结帐的图片，无论是尺寸、调色板还是品牌徽标的使用与验收标记等。这样您就可以打造您想要客户的确切用户体验拥有并确保一切都与您网站的外观和感觉无缝融合。

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.

但这里有一个更简单的片段，只关注卡片图像的变化

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';
  }
});

请注意，该事件会返回一组检测到的卡片类型，因此您可能只想在缩小到一张卡片时显示卡片图像（如本例所示）。

或者，您可以使用此信息逐步隐藏或转变灰度、数组中未出现的验收标记，以便在用户键入时向他们提供动态反馈。

此外，由于您可以完全控制您的图像，您可以选择将图像添加到您的网站可能拥有的现有 sprite sheet 中，并获得预先加载所有图像的好处, 然后只需使用 css 类.

进行管理

大多数网络都提供了关于如何使用各种图像格式的标记和源材料的出色指导。这里有一些有用的链接：

Flex MicroForm 信用卡品牌标志

Flex MicroForm Credit Card Brand Logos

cybersource