Как интегрировать платежный шлюз в онлайн магазин без помощи разработчиков

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

Что такое платежный шлюз? Это поставщик услуг, который производит авторизацию платежа. Обычно это приложение для онлайн магазина, которое синхронизируется с банком, благодаря чему покупатели могут оплачивать товары прямо из дома. Любой может воспользоваться этим видом услуг, включая онлайн-магазины и других поставщиков услуг, которые продают что-то пользователям. К их числу относятся некоммерческие организации, которые собирают пожертвования онлайн. Существует масса различных платежных шлюзов, включая Stripe, PayPal, Authorize.net, Google Checkout и прямые платежи MasterCard/Visa. Все они имеют свои достоинства и недостатки, кроме того, каждый взымает разную комиссию.

Сегодня онлайн платежи становятся все более популярными. Даже пожилые люди использую онлайн банкинг, чтобы оплачивать сервисы онлайн. Как сообщает портал Statista, объем онлайн платежей стремительно растет.

К 2022 году ожидается, что общее количество онлайн переводов достигнет 5,411,354 долларов. Это только подтверждает тот факт, что вашему сайту необходима интеграция платежных модулей для удобного пользовательского опыта ваших клиентов.

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

Как работают платежные шлюзы и зачем они нужны онлайн магазин

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

Также прочтите: Как онлайн бизнес может увеличить ценность клиента?​

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

Также  прочтите: 10 советов для создания успешной домашней станицы онлайн магазина​

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

Также  прочтите: Какая платформа лучше для мультиканальной торговли?​

Все платежные системы обладают приблизительно одинаковым механизмом. Он состоит из нескольких этапов, о которых вы даже не подозреваете. Среди них такие, как подтверждения, сложный процесс перевода средств и т.д. Полный процесс онлайн платежей состоит из таких этапов, как:

  • Подтверждение заказа и предоставления информации о банковской карте
  • Шифрование данных в целях безопасности
  • Отправка информации и ассоциации платежных карт: Visa, MasterCard и т.д.
  • Подтверждение или отклонение платежа
  • В случае подтверждения, изменение статуса платежа на «авторизированно»
  • Подтверждение со стороны получателя
  • Платеж отправляется в компанию, выпустившую карту получателя
  • Платеж отправляется в соответствующих банк
  • Банк подтверждает транзакцию и добавляет средства на счет получателя.

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

Как выбрать правильную платежную систему для вашего интернет магазина

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

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

Чтобы сделать правильный выбор, вам нужно проанализировать вашу eCommerce платформу. Если вы используете Shopify, вам нужно уточнить требования, которые предъявляет эта платформа к платежным шлюзам.

Стоимость интеграции платежной системы в онлайн магазин

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

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

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

  • Требование PCI для предотвращения штрафов
  • Повторяющиеся счета по схеме ценообразования на основе подписки
  • Уведомления для проверки транзакций
  • Хранилище информации о платежах, чтобы ваши клиенты не могли повторно вводить свою личную информацию
  • Виртуальный терминал имитации физической кредитной карты для удобного ввода
  • Информация разработчика и инструменты API для настройки, чтобы соответствовать конкретным потребностям
  • Шифрование для высокого уровня безопасности конфиденциальной информации пользователя
  • Интеграция с другими инструментами, такими как бухгалтерское программное обеспечение или корзины товаров.

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

PayPal

Сегодня вы вряд ли найдете человека, который еще не слышал о PayPal. Это одна из самых популярных платёжные систем в мире, и, как сообщает портал Statista, объем платежей, производимых через эту систему, вырос в два раза с 2014 по 2017 год. При этом, у системы остаются перспективы для роста, поскольку компания продолжает добавлять новые функции для удобства пользователей.

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

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

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

Вот несколько примеров стоимости обработки переводов через Standard PayPal и Express Checkout

  • Нет платы за установку и ежемесячной оплаты
  • Пользователи из США платят 2.9% + 0.30 центов с каждого денежного перевода
  • Международные пользователи оплачивают 3.9% + 0.30 центов с каждого перевода

Стоимость использования плана PayPal Payments Pro

  • Нет платы за установку
  • Ежемесячный платеж 30 долларов
  • Стоимость перевода для жителей США 2.9% + 0.30 центов за перевод
  • Стоимость за услуги за один международный перевод 3.9% + 0.30 центов
  • Стоимость использования виртуального терминала 3.1% + 0.30 центов для переводов внутри страны и +1% для международных переводов.

Как интегрировать PayPal в онлайн магазин

Вам потребуется JavaScript checkout.js скрипт для интеграции Express Checkout, предоставляемый PayPal. Чтобы создать иконку кнопки на вашем сайте, просто добавьте checkout.js скрипт в ваш клиент и не забудьте добавить вот этот код в то место страницы, где вы хотите создать кнопку оплаты через PayPal.

<!DOCTYPE html>
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
 <div id="paypal-button"></div>
 <script>
   paypal.Button.render({
     env: 'production', // Or 'sandbox',
     commit: true, // Show a 'Pay Now' button
     style: {
       color: 'gold',
       size: 'small'
     },
     payment: function(data, actions) {
       /* 
        * Set up the payment here 
        */
     },
     onAuthorize: function(data, actions) {
       /* 
        * Execute the payment here 
        */
     },
     onCancel: function(data, actions) {
       /* 
        * Buyer cancelled the payment 
        */
     },
     onError: function(err) {
       /* 
        * An error occurred during the transaction 
        */
     }
   }, '#paypal-button');
 </script>
</body>

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

  • #paypal-button – Контейнет, в котором находится сама кнопка
  • Style – Кастомизация вида кнопки
  • payment() – Функция, которая срабатывает, когда пользователь нажимает на кнопку. Далее вы можете начислить и отменить оплату для начала работы системы.
  • onAuthorize() – Функция работает каждый раз, когда клиент входит в систему и подтверждает платеж. На этой стадии вы можете показать страницу подтверждения и отправки платежа.  
  • onCancel() – Эта функция срабатывает в случае отмены оплаты. По умолчанию, клиент возвращается на изначальную страницу. Однако вы можете изменить настройки и перенаправлять пользователя на любую другую страницу.  
  • onError() – Эта функция срабатывает в случае ошибки. В этом случае вы можете перенаправлять ваших клиентов на страницу оформления или на страницу, сообщающую об ошибке.
  • #paypal-button – Элемент контейнера в котором находится кнопка.

При интеграции у вас есть несколько вариантов, среди которых:

  • Установка на стороне клиента;
  • Braintree SDK; а также,
  • Установка на стороне сервера.

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

Authorize.net

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

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

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

Ниже представлена стоимость совершения платежей при помощи этой системы.

  • 49 долларов – единоразовый платеж при установке системы
  • 25 долларов – ежемесячный платеж за использование системы
  • 25 долларов – стоимость возмещения затрат
  • Стоимость одного перевода – 2.9% + $0.30

Как интегрировать Authorize.net в онлайн магазин

Чтобы получить доступ в этой платежной системе, пользователям нужно создать аккаунт-песочницу, с аутентификацией продавца. Все требования отправляются через HTTP POST метод в один из конечных API URL-лов.

  • HTTP метод запроса: POST
  • Sandbox API Конечная точка: https://apitest.authorize.net/xml/v1/request.api
  • Production API Конечная точка: https://api.authorize.net/xml/v1/request.api
  • XML Content-Type: text/xml
  • JSON Content-Type: application/json
  • API Schema (XSD): https://api.authorize.net/xml/v1/schema/AnetApiSchema.xsd

Для того, чтобы произвести интеграцию Authorize.net, есть несколько способов, включая:

  • Метод интеграции с сервером (SIM).
  • Расширенный метод интеграции (AIM).
  • Метод прямой отправки (DPM).
  • Простая проверка.

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

Stripe

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

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

Стоимость использования системы:

  • Система не взымает плату за установку и ежемесячное использование
  • 15 долларов за возврат денег или же спора относительно взимаемого платежа
  • Стоимость одного перевода 2.9 долларов +0.30 центов
  • Стоимость обработки платежа, производимого в ACH и Bitcoin 0.8% +5 долларов

Как интегрировать Stripe в онлайн магазин

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

Шаг 1: установка Stripe элементов

Все элементы вы можете найти в Stripe.js. Загрузите этот скрипт прямо из https://js.stripe.com и разместите его на вашей странице:

<script src="https://js.stripe.com/v3/"></script>

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

Далее, установить следующий элемент:

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

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

Шаг 2: создание формы оплаты

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

Чтобы установить компоненты в нужных местах, создайте пустые контейнеры DOM с уникальными ID внутри вашей формы оплаты. Лучший способ — это сделать -  заменить контейнер с <label> на следующий a <label> в форме атрибута, с a for атрибута, соответствующего ID элементам контейнера. Благодаря этому, элемент будет срабатывать автоматически каждый раз, когда ваш клиент будет наживать на кнопку.

<form action="/charge" method="post" id="payment-form">
 <div class="form-row">
   <label for="card-element">
     Credit or debit card
   </label>
   <div id="card-element">
     <!-- A Stripe Element will be inserted here. -->
   </div>

   <!-- Used to display Element errors. -->
   <div id="card-errors" role="alert"></div>
 </div>

 <button>Submit Payment</button>
</form>

После того, когда эта форма загружена, создайте случае элемента и загрузите элемент в контейнер:

// Custom styling can be passed to options when creating an Element.
var style = {
 base: {
   // Add your base input styles here. For example:
   fontSize: '16px',
   color: "#32325d",
 }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

Элемент cart минимизирует количество полей и делает форму проще, поэтому у вас получится одно удобное и гибкое поле, которое собирает всю информацию.

Шаг 3: Создайте маркер для безопасной передачи информации

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

// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
 event.preventDefault();

 stripe.createToken(card).then(function(result) {
   if (result.error) {
     // Inform the customer that there was an error.
     var errorElement = document.getElementById('card-errors');
     errorElement.textContent = result.error.message;
   } else {
     // Send the token to your server.
     stripeTokenHandler(result.token);
   }
 });
});

В этом случае, stripe.createToken возвращается в Promise, который выражает объект result. Этот объект также имеет:

  • result.error: Token был удачно создан.
  • result.error: произошла ошибка. Это может включать в себя ошибку в валидации со стороны клиента. Проверьте предпочтения API на возможные ошибки.

Шаг 4: Загрузите маркер и остальную часть формы на ваш сервер

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

function stripeTokenHandler(token) {
 // Insert the token ID into the form so it gets submitted to the server
 var form = document.getElementById('payment-form');
 var hiddenInput = document.createElement('input');
 hiddenInput.setAttribute('type', 'hidden');
 hiddenInput.setAttribute('name', 'stripeToken');
 hiddenInput.setAttribute('value', token.id);
 form.appendChild(hiddenInput);

 // Submit the form
 form.submit();
}

Индивидуальный платежный шлюз

Иногда может показаться, что ни один из предложенных вариантов не подходит требованиям вашего бизнеса. Учитывая количество предложений на рынке, иногда такое сложно представить, но это происходит чаще, чем думаете. Разработка индивидуального платёжного шлюза – это сложная, но при этом плодотворная задача. В частности, для разработчиков, поскольку стоимость разработки системы, обрабатывающей онлайн платежи стоит от 150.000 долларов. Естественно стоимость может быть еще больше, если в плане качества и функций вы будете равнять на те системы, которые уже существуют на рынке.

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

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

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

Scroll
Заказать проект