Логотипы кредитных карт Flex MicroForm - PullRequest
Новая
       45

Логотипы кредитных карт Flex MicroForm

0 голосов
/ 30 января 2020

Я использую Flex Microform v4 и увидел, что мы обязаны отображать логотипы кредитных карт вместе с номером кредитной карты. Глядя на данные с объекта события обнаружения карты. Я не вижу изображений или ссылок на изображения, отправляемые обратно. Я также не могу найти ничего в документации о том, как отображать логотипы этих карт. Я планирую разместить в файле ресурсов изображения, сопоставленные с полем brandedName для определения карты. Это правильный / ожидаемый способ обработки логотипов брендов кредитных карт?

1 Ответ

1 голос
/ 31 января 2020

Да, это совершенно правильный подход, Брайан.

Это позволяет вам использовать изображения, которые в точности соответствуют вашему оформлению заказа, будь то по размеру, цветовой палитре или использованию фирменных логотипов или приемных знаков и т. Д. c. Таким образом, вы можете создать точный 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';
  }
});

Обратите внимание, что событие возвращает массив обнаруженных типов карт, поэтому вам может потребоваться отображать изображение карты только тогда, когда оно сужено до одной карты (согласно этому примеру).

В качестве альтернативы вы можете использовать эту информацию, чтобы постепенно скрывать или поворачивать оттенки серого, отметки приемки, которые не появляются в массиве, чтобы обеспечить динамическую c обратную связь с пользователем при вводе.

Далее, после завершения контроль над вашими изображениями, вы можете сделать что-то вроде добавления ваших изображений в существующий спрайт-лист ваш сайт может иметь и пожинать все преимущества загрузки всех ваших изображений, а затем просто управлять с помощью css классов.

Большинство сетей предоставляют отличные рекомендации по использованию своих меток и исходные материалы различных форматов изображений. Вот несколько полезных ссылок:

...