Давайте узнаем, как стандартизировать процесс оформления заказа в Интернете с помощью нового API-интерфейса запроса платежа и moltin.

Недостатки процесса оформления заказа

Рост онлайн-покупок обеспечил миллионы людей во всем мире удобством покупки продуктов, модными тенденциями и новейшими гаджетами, не выходя из собственной гостиной. Но процесс оплаты заказа часто доставляет неудобства покупателям и приводит к тому, что 7 из 10 покупателей бросают свою корзину до завершения оплаты.

Полное неудобство

Так почему же в Интернете так много людей, бросивших корзину? Процесс оформления заказа является проблемой для пользователей. В эпоху Amazon, Netflix и Postmates вашим клиентам нужна мгновенная оплата в один клик. Обычно перед оформлением заказа необходимо выполнить несколько шагов:

  1. Войдите или зарегистрируйте учетную запись, уникальную для этого продавца.
  2. Добавьте платежную карту.
  3. Добавьте платежный адрес.
  4. Добавьте адрес доставки, если он отличается от адреса для выставления счета.
  5. Подтвердите заказ и оплатите.

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

Мало того, разработка и поддержка настраиваемого процесса оформления заказа и правил проверки - это трудоемкое вложение для вашего бизнеса.

Если бы только было решение, призванное устранить все эти недостатки ...

Представляем API-интерфейс платежного запроса

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

API-интерфейс платежного запроса не зависит от поставщика, то есть не привязан к конкретной платежной системе или процессору. Это обеспечивает прямую интеграцию в процесс оформления заказа moltin с использованием поддерживаемых нами шлюзов: Stripe и Braintree.

Полезные ссылки, чтобы узнать больше

В чем тогда смысл?

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

  • Пользовательский интерфейс, позволяющий пользователям выбирать адреса и платежную информацию из своих учетных записей Google и Microsoft.
  • Разбивка их заказа, включая товары, скидки и налоги.
  • Выберите один из предложенных вариантов доставки.
  • Стандартизированный уровень ввода и проверки пользовательского интерфейса.
  • Поддержка множества способов оплаты.
  • Работает на любом браузере, устройстве или платформе.

Щелкните здесь, чтобы увидеть это в действии!

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

Лучше всего то, что благодаря гибкости API и moltin их можно легко интегрировать.

Посмотрим как.

Интеграция с молтином

Приведенный ниже пример предполагает понимание основных концепций JavaScript и использует moltin JavaScript SDK для взаимодействия с API.

Если вы еще этого не сделали, зарегистрируйтесь с помощью moltin, чтобы начать.

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

Чтобы проверить эту гипотезу, мы решили создать кнопку оплаты в один клик, интегрировав новый API запроса оплаты непосредственно в процесс оформления moltin. Шаги будут следующими:

  1. Клиент добавляет товар в корзину.
  2. Мы отображаем кнопку оплаты в один клик в пользовательском интерфейсе.
  3. При нажатии кнопки мы создаем новый объект запроса платежа, передавая необходимые аргументы.
  4. Показать пользовательский интерфейс платежного запроса, чтобы получить подробную информацию о клиенте.
  5. Оформить заказ на корзину moltin, используя данные, полученные из API запроса платежа.
  6. Оплатите заказ, используя данные, полученные от moltin и API запроса оплаты.

Давайте заполним нашу корзину товаром, готовым к покупке.

Теперь, когда у нас есть тележка moltin с предметом, мы хотим создать наш новый объект PaymentRequest с помощью конструктора.

  • Первый аргумент определяет допустимые способы оплаты. Мы рады пока принять только основные кредитные и дебетовые карты.
  • Затем мы передаем элементы для отображения, которые представляют собой элементы корзины, возвращаемые API moltin. Это позволяет нам отображать разбивку стоимости заказа в пользовательском интерфейсе запроса на оплату.
  • Наконец, необязательный третий аргумент - это объект, определяющий, какая дополнительная информация требуется от клиента, если таковая имеется. Мы хотим узнать их имя и адрес электронной почты, чтобы создать заказ в moltin.

Теперь мы можем вызвать show() метод нашего PaymentRequest объекта для отображения пользовательского интерфейса. Здесь клиент предоставит свою информацию (платежные реквизиты, адреса), необходимую для совершения покупки.

Обещание show() разрешится, когда клиент заполнит форму. После решения он вернет объект, содержащий информацию о платеже и адресе, полученную от клиента в пользовательском интерфейсе. Отсюда мы можем обработать ответ, чтобы он соответствовал ожидаемой полезной нагрузке запроса moltin, чтобы завершить наш заказ и оплату.

На этом этапе пользовательский интерфейс запроса платежа будет отображать пользовательский интерфейс загрузки, пока наши запросы API moltin обрабатываются. Ждем:

  1. moltin, чтобы создать заказ по нашему Moltin.Cart.Checkout() звонку
  2. moltin (и выбранный нами платежный шлюз Stripe) для обработки платежа.

После успешного выполнения этих запросов нам нужно вызвать метод complete() для нашего объекта PaymentRequest, чтобы завершить поток и скрыть пользовательский интерфейс.

Вот и все! Вы интегрировали moltin с API запроса платежа. Смотрите базовое демо-репо на GitHub.

Резюме

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

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

Готовый? Зарегистрируйтесь с помощью moltin и запустите свой магазин.