温馨提示:本文翻译自stackoverflow.com,查看原文请点击:cybersource - Flex MicroForm Credit Card Brand Logos
cybersource

cybersource - Flex MicroForm信用卡品牌徽标

发布于 2020-03-28 23:28:35

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

查看更多

查看更多

提问者
Brian Stanley
被浏览
113
James Donaldson 2020-01-31 17:39

是的,这是布莱恩的正确方法。

这样一来,您可以使用尺寸,颜色调色板或使用品牌徽标和验收标记等完全适合您的结帐的图像。通过这种方式,您可以制作出希望客户拥有的确切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';
  }
});

请注意,事件会返回检测到的卡类型的数组,因此,您可能只想在将卡图像缩小为单个卡时显示该卡图像(如本例所示)。

或者,您可以使用此信息来逐渐隐藏或变成灰度(在阵列中未出现)的接受标记,以在用户键入时向用户提供动态反馈。

此外,当您完全控制图像时,可以选择执行一些操作,例如将图像添加到站点可能具有的现有Sprite工作表中,并获得将所有图像预先加载的好处,然后仅使用css类进行管理。

大多数网络为如何使用其标记和各种图像格式的原始资料提供了出色的指导。以下是一些有用的链接: