0

我正在使用 Flex Microform v4 并看到我们需要显示信用卡品牌徽标以及信用卡号。查看来自卡片检测事件对象的数据。我没有看到任何图片或图片的网址被发回。我在文档中也找不到有关如何显示这些卡品牌徽标的任何内容。我计划在资产文件中包含映射到卡检测品牌名称字段的图像。这是处理信用卡品牌徽标显示的正确/预期方式吗？

4

1 回答 1

1

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

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

在“cardTypeChange”事件的文档中有一个快速示例，该事件还涵盖了您页面上的其他元素，例如使用适合安全代码的品牌术语。

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

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

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

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

此外，由于您可以完全控制图像，因此您可以选择将图像添加到您的网站可能拥有的现有精灵表中，并获得预先加载所有图像的好处，然后只需使用 css 类进行管理。

大多数网络都为如何使用其标记和各种图像格式的源材料提供了极好的指导。以下是一些有用的链接：

于 2020-01-31T09:39:11.993 回答