9 секретов онлайн-платежей. Часть 4: правильная платежная форма – залог успешной оплаты

    imageПлатежная форма – финальный шаг при проведении онлайн оплаты, и ничего не должно помешать покупателю сделать этот шаг. В новом выпуске серии «9 секретов онлайн-платежей» мы расскажем, какой должна быть платежная форма на коммерческом сайте, чтобы клиенту ничто не помешало успешно совершить оплату.

    Платежная страница имеет критическое значение. Это «конечная станция» для клиентов, совершающих покупки на вашем сайте. Это место, где пользователь вводит данные своей банковской карточки и принимает окончательное решение расстаться с деньгами, заработанными «потом и кровью». Здесь посетитель сайта становится клиентом, приносящим компании деньги.

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

    Часть 1. Настройка 3D Secure
    Часть 2. Регулярные платежи
    Часть 3. Страница выбора способа оплаты
    Часть 4. Платежная форма
    Часть 5. Мобильные платежи
    Часть 6. Оплата в один клик
    Часть 7. Система fraud-мониторинга
    Часть 8. Возвраты и как их избежать
    Часть 9. Настройки платежного сервиса под тип бизнеса

    1. Доверие и безопасность


    Страница с платежной формой должна генерироваться индивидуально для каждой оплаты. Данные пользователей должны быть надежно защищены от злоумышленников и передаваться в банк-эквайер в зашифрованном виде с помощью криптографического протокола TLS (Transport Layer Security). Безопасность оплаты должна быть подтверждена сертификатом безопасности PCI DSS (Payment Card Industry Data Security Standard). А главное – плательщику должно быть известно, что его деньги в безопасности. Всякий раз, когда в процессе оформления заказа задействована платежная и личная информация клиента, не забывайте демонстрировать все меры предосторожности, которые предпринимаете вы и ваш платежный партнер для обеспечения их безопасности.

    В ходе опроса, проведенного компанией Econsultancy, было обнаружено, что 58% респондентов прерывали оформления заказа из-за опасений по поводу безопасности платежей. Пользуйтесь услугами только тех платежных провайдеров, которые обладают сертификатом TLS (Transport Layer Security). Сертификат используется, чтобы обеспечить безопасное соединение и зашифровать информацию о данных банковской карты. Кроме того, процесс обработки платежей на вашем сайте должен соответствовать стандартам PCI Совета по Стандартам Безопасности (PCI SSC). Сертификат PCI DSS подтверждает, что обработка платежей производится в соответствии с международными стандартами безопасности, установленными для компаний, которые хранят, передают, обрабатывают платежные данные.

    Обязательно покажите пользователям значки сертификата PCI DSS, Verified By VISA, MasterCard Secure Code и т.д., как это показано ниже на примере платежной формы интернет-магазина ЛитРес.

    image

    2. Избавьтесь от отвлекающих факторов


    Страница оплаты – это последний шаг, который делает клиент на вашем сайте, и в нашу эпоху клипового мышления и тотального отсутствия концентрации внимания, необходимо ликвидировать все факторы, которые могут отвлечь клиента от завершения покупки. А это значит, что вы не должны размещать на странице оформления заказа и оплаты какие бы то ни было рекламные материалы, ни при каких обстоятельствах.

    На этом этапе главная цель – аккуратно «довести» клиента до совершения оплаты. Пример – страница регистрации в сервисе «Будист». Сервис концертирует внимание пользователей на форме, удалив с этой страницы верхнее меню и оставив лишь самую необходимую мотивирующую информацию. Каждое поле сопровождает подсказка – зачем сервису нужны те или иные данные.

    image

    3. Запрашивайте только действительно необходимую информацию


    Ничто так не вредит конверсии, как необходимость заполнить форму информацией, которая не нужна для совершения покупки. А длинный список полей для заполнения становится для плательщиков полосой препятствий, которая ему только мешает. Оплата не должна выглядеть для плательщика как километровый забег с барьерами. Для ваших клиентов процесс оплаты – это спринт, и вы должны помочь клиенту пробежать его быстро и без лишних усилий.

    По данным компании Forrester 11% пользователей отказывались от покупки только потому, что не хотели проходить регистрацию или у них запрашивали слишком много информации. С задачей упрощения процесса и минимизации объема требуемых данных прекрасно справляется платежная форма, выполненная в виде банковской карты. Даже неопытный плательщик сможет интуитивно догадаться, каким образом какое поле необходимо заполнять.

    image

    Если же вам критически нужна какая-либо дополнительная информация, убедитесь, что вы объяснили клиенту, зачем вы ее запрашиваете.

    4. Позвольте клиентам легко исправить свои ошибки


    Всем понятно, что людям свойственно делать ошибки. Иногда они пропускают поле ввода почтового индекса или забывают вставить «@» в адрес электронной почты. Ваша задача состоит в том, чтобы указать на ошибку и помочь пользователю исправить ее.

    На некоторых сайтах сообщение об ошибке появляется в верхней части страницы, но люди не понимают, что они должны «прокрутить» все до самого верха, чтобы понять, что же пошло не так. В идеале, сообщение об ошибке должно появиться в области, где произошла ошибка.

    Еще одна полезная подсказка: людям намного проще продолжить оплату в случае ошибки, если вы автоматически сохраните на форме всю корректно введенную информацию. Так пользователю потребуется повторно ввести данные лишь в то поле, где была допущена ошибка. На иллюстрации ниже вы увидите, что на стандартной платежной форме PayOnline не удаляются данные, которые были уже введены, и четко выделяются красным цветом сообщения об ошибках, которые содержат их описание.

    image

    Нет ничего более раздражающего пользователя, особенно если он заполняет длинную форму, чем повторный ввод всех данных. По результатам исследования, подготовленного компанией Invesp, проблема потери клиентов из-за некорректного отображения сообщений об ошибках при заполнении форм входит в десятку главных «убийц конверсии» во время оплаты.

    5. Позвольте клиентам оплачивать покупки без регистрации


    Нужно ли заставлять пользователя запоминать еще один логин и пароль? Вряд ли. Не стоит создавать еще одно препятствие на пути клиента к оплате. Заставлять пользователей регистрировать учетную запись на вашем сайте – это слишком навязчиво, особенно для тех, кто совершает покупку впервые. Обязательная регистрация – это еще одна из победительниц рейтинга «убийц конверсии».

    Юзабилити исследование, проведенное компанией Smashing Magazine, показало, что основной причиной неприязни пользователей к регистрации аккаунтов является ожидание нежелательного спама. Также в исследовании отмечается, что многие клиенты не понимают, почему они должны регистрироваться в интернет-магазине, чтобы что-то купить, в то время как в оффлайн магазинах у них никто не требует регистрации при покупке. Еще одним недостатком регистрации является то, что она добавляет несколько дополнительных полей для заполнения, что затягивает процесс оформления заказа и негативно сказывается на конверсии. Чтобы сделать жизнь клиентов проще и увеличить вероятность благоприятного исхода, необходимо минимизировать время клиента на оформление заказа и запрашивать у него лишь необходимый минимум информации.

    image
    image

    Например, интернет-магазин «Байон» не требует у клиента «регистрации», он просит его представиться. И для этого предлагает клиенту самому выбрать удобный ему способ знакомства – с помощью социальной сети, телефона или e-mail. Помимо этого, форма регистрации состоит из всего двух полей, что не может не порадовать клиента.

    6. Не «редиректите» покупателей


    Вы потратили много усилий, чтобы привлечь клиентов на ваш сайт. Зачем же отправлять их на другой сайт для оплаты? Если вы не можете контролировать дизайн платежной страницы стороннего сервиса, у ваших клиентов может появиться ощущение, что он платит совсем не той компании, у которой покупает товар или услугу.

    Сегодня у коммерческих сайтов есть возможность интегрировать платежную форму прямо на страницу вашего сайта с помощью технологии Iframe. Это позволяет снизить недоверие клиентов до минимума, не пугая их неожиданными редиректами и «успокоив» идентичностью оформления страницы регистрации и формы оплаты. Вот как мы реализовали интеграцию платежной формы на страницу оплаты нашего клиента, биржи объявлений Avito.

    image

    Оформление заказа и оплата это последние действия, которые совершают ваши клиенты при покупке, вот почему вам нужно, чтобы на этих страницах клиент видел название вашей компании.

    7. Придерживайтесь единого стиля оформления


    С точки зрения брендинга, следует делать все элементы вашего сайта максимально визуально идентичными. Это означает, что необходимо использовать одни и те же цвета, шрифты, элементы оформления. Эти требования относятся к дизайну вашей страницы выбора платежного инструмента и странице оплаты, так же как и к другим страницам вашего сайта.

    Соблюдая визуальную идентичность всех элементов сайта, вы также можете увеличить узнаваемость вашего бренда среди покупателей. Конечно, платежные сервис-провайдеры готовы предоставить вам готовые страницы оплаты, созданные с целью максимизации конверсии в оплаты. Но если у вас есть для этого ресурсы, стоит озаботиться адаптацией формы под уникальный стиль вашего интернет-магазина. А с учетом разнообразия видов интернет-мошенничества и связанных с ним страшных историй, неудивительно, что пользователи скептически реагируют на разницу в оформлении платежной страницы и оформлении сайта интернет-магазина, на котором они совершали покупку.

    Чтобы избежать непонимания и опасения со стороны покупателей, используйте идентичный дизайн для оформления всех страниц вашего сайта, в особенности – страниц оформления заказа и оплаты, как сделала компания МТТ. Стоит отметить, что изменение дизайна платежной страницы не сказывается на ее безопасности, меняется только «обложка».

    image

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

    Удобство и безопасность – именно такие основные требования предъявляются пользователями к странице оплаты. В следующей части цикла «9 секретов онлайн-платежей» мы расскажем, какие возможности игрокам рынка e-commerce дают мобильные пользователи и что нужно знать, чтобы не терять потенциальных клиентов из самого быстро растущего сегмента. А если вы хотите настроить прием онлайн-платежей на сайте или в мобильном приложении, смело обращайтесь, наши специалисты проконсультируют вас по любым вопросам.
    PayOnline
    62.90
    Система электронных платежей
    Share post

    Comments 12

      +2
      По-моему лучшая форма у Яндекса. В ней спрашивают только необходимые поля, тут же их проверяя и определяя платёжную систему с банком и используют простые тестовые поля с правильно расставленными tab-индексами:

        0
        image

        Еще, не нужно прерывать последовательность ввода дынных селектами. Формат ввода данных должен соответствовать формату изображенному на карте, в примере не соответствует.

        Если вы работаете на запад, то не нужно забывать о других кредитных картах, где количество цифр может отличатся от 16 как большую так и в меньшую сторону. Поэтому вместо 4 инпутов
          +1
          Поэтому вместо 4 инпутов я бы использовал один, а вводимые цифры разбивал бы на блоки. Как в примере у Яндекса.
            +2
            Ещё совершенно непонятна необходимость выбора МПС. Информацию можно получить из первых цифр, сверив с бин-таблицей.
            +1
            запрашивайте только необходимую информацию — и на ваших же примерах — запрос e-mail (притом что если дошло до оплаты сайт же может и передать e-mail клиента — он его знает обычно). зачем так делается? Наименование банка — а зачем оно нужно(по БИНу же можно понять). Проверка что пользователь сам знает чья у него карта для фродчека? (и что интересно вводить в случаях:Payoneer (я например не знаю что там за банк), QIWI Visa — они сами себе банк и вводить надо QIWI или есть варианты? Альфа — что надо вводить? Альфа/Alfa-Bank/Альфа-Банк?)
              0
              Действительно запрос МПС или наименования банка это минус к конверсии, но эти данные используются как дополнительная проверка фрод-мониторинга. При подборе примеров мы хотели рассказывать не об идеальной ситуации в вакууме, а на примере реальных кейсов. Как тут многие заметили, лучшая форма не содержит вообще никаких дополнительных полей, а номер карты вводится в один инпут с автоматической разбивкой по 4 цифры, такая форма реализована нами на Avito:

              image

              Для некоторых же мерчантов критична каждая дополнительная возможность антифрауд-мониторинга. По правилам МПС на карте должны быть указаны контакты банка-эмитента и название банка-эмитента.
                0
                А порог блокировки при отказе тоже настраивает мерчант?
                Недавно словил её у ПапаДжонс из-за лежащего банковского 3DS, после трёх отказов ваш шлюз даже перенаправление отключил и сразу выдавал сообщение про неверные данные по всем картам.
                  0
                  вот у меня есть карта (полученная на мое имя, те кто мне ее выдавали — знают мой реальный адрес)
                  где на передней стороне выдавлено — номер, реальные фамилия_имя, дата истечения, wwww.sitename.com (sitename при этом насколько я знаю банком не является, точнее даже у меня их две — отличаются только sitename).

                  на обратной есть надпись This card is issued by Wirecard Card Solutions Ltd pursuant to license by MasterCard International
                  телефон поддержки есть… 1-800-xxxx
                  3D Secure нет. BIN разумеется не Российский. В банкоматах, оффлайновых магазинах и западных интернет-магазинах — работает. в Российских — не во всех (даже тех что говорят что оплата ЛЮБОЙ картой).
                  В поле банк мне что вводить? Wirecard Card Solutions? www.sitename.com?
                  Или я просто получу отказ за то что карта не российского банка?

                  Ваша кстати система оплаты на одном из российских сайтов приняла эту карту успешно прямо сейчас (банк правда не спросили). Единственное — сказали что карта зарегистрирована в MasterCard Secure Code и сейчас будет окно банка где вы введете код. Окна банка не появилось, сайт оплату принял, транзакция на покупку висит в запланированных (если нужны подробности — в приват)

                    0
                    В поле банк писать Wirecard, т.к. https://www.wirecardbank.com/

                    В некоторых российских интернет-магазинах вашу карту будут принимать, а в некоторых, где стоит блокировка зарубежных карт или платежным интегратором или магазином, будет отказ.
                +1
                Я никогда не понимал зачем выбирать тип карты.
                Многие этим грешат, почему такая тенденция?
                  0

                  Самые раздражающие меня проблемы с формами оплаты картой:


                  1. Ввод номера карты в виде 4 полей (copy/paste отменяется). Хотя есть и приятные исключения которые сами разбивают данные и распихивают по input'ам, но это очень редко.
                  2. Принудительное обрезание поля ввода на 16 символов (если копируешь номер карты с разбивкой пробелами по группам — последние 3 цифры теряются)
                  3. Отсутствие элементарной фильтрации введённых данных — тот же copy/paste номера карты с разбивкой пробелами приводит к ошибке вида "неверный формат" или "недопустимый символ"
                  4. Запрос раздельного ввода имени и фамилии владельца. У меня есть карты на которых указано обращение (Mr. Cardholder Name), а также есть карта где имя указано не полностью, а только инициал (А. FamilyName), в обоих случаях раздельный ввод имени приводит к проблемам.
                    0
                    А как же срок действия выпадающим списком? Особо упоротые делают их с красивостями из-за которых ввод возможен только мышью.

                  Only users with full accounts can post comments. Log in, please.