Lazerpay — это платежная система с блокчейном, которая позволяет легко интегрировать криптовалютные платежи в ваши приложения или веб-сайты. И с недавним всплеском внедрения web3 кажется, что сейчас самое подходящее время, чтобы предложить своим пользователям варианты криптоплатежей. Lazerpay делает это смехотворно простым, используя их API и инструменты — например, сценарий проверки Lazerpay, чтобы интегрировать проверку «Оплата с помощью Crypto» на ваш веб-сайт или в приложения без написания единой строки кода блокчейна.

Демо

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

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

Итак, без дальнейших проволочек, давайте начнем! 🙂


Шаг 1: Создание учетной записи Lazerpay

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

Итак, перейдите к Lazerpay.finance и создайте свой бизнес-аккаунт.

Создайте свою учетную запись Lazerpay


Шаг 2. Получение учетных данных Lazerpay

После того, как вы успешно создали свою учетную запись, вы можете получить свои уникальные ключи и использовать их для аутентификации вашего запроса к API lazerpay.

Итак, войдите в свою учетную запись и на левой панели навигации нажмите на Settings. Нажмите API keys and Webhook вкладка Здесь вы найдете свои уникальные ключи.

Изображение, показывающее страницу настроек панели управления lazerpay.

Вы заметите две категории конфигураций API. Конфигурация API основной сети и конфигурация API тестовой сети. Во время разработки используйте ключи Testnet для протестировать интеграцию lazerpay. Когда вы будете готовы приступить к работе, вам следует использовать ключи основной сети.

Скопируйте свой тест public keys в буфер обмена, так как он понадобится вам позже.

Изображение, показывающее панель управления lazerpay с выделенными тестовыми открытыми ключами.

Теперь, когда у вас есть открытые ключи Testnet, переключите переключатель в заголовке панели инструментов, чтобы переключиться на Testnet (песочницу).

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

Изображение, показывающее панель управления lazerpay с выделенным переключателем среды.


Шаг 3: Интеграция Lazerpay Checkout

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

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

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

Начнем интеграцию.

Сначала создайте button элемент, который будет инициировать платеж

<!-- index.html -->
<button class="btn">Pay with Crypto</button>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем импортируйте скрипт Lazerpay Checkout в шапку вашего index.html

<!-- index.html -->
<!-- Include the Lazerpay Checkout CDN Script-->
<script src=" type="text/javascript"></script>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь в вашем app.js файл, мы можем написать код, который запускает проверку lazerpay. Нам нужна ссылка на ваш button элемент так:

 // app.js
const payBtn = document.querySelector(".btn");
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем подключите прослушиватель событий к button элемент, вызывающий LazerCheckout функция на click мероприятие.

//app.js 
// Listen for click events on payBtn
payBtn.addEventListener("click", (e) => {
    e.preventDefault();

    // The CDN injects a `LazerCheckout` method
    // then, Invoke the lazerCheckout method
    LazerCheckout({
        name: "",
        email: "",
        amount: "2.00",
        key: "YOUR_PUBLIC_TEST_KEY",
        currency: "USD",
        onClose: (data) => {
          console.log("onClose:", data);
        },
        onSuccess: (data) => {
          console.log("onSuccess:", data);
        },
        onError: (data) => {
          console.log("onError:", data);
        }
      })
})
Войти в полноэкранный режим

Выйти из полноэкранного режима

LazerCheckout метод принимает объект, содержащий сведения о транзакции и ряд методов обратного вызова. Давайте обсудим их:

  1. name — Имя Клиента
  2. email — Электронная почта клиента
  3. amount — Сумма, которую нужно взимать с клиента
  4. key — Ваш открытый ключ lazerpay, который вы скопировали в предыдущих разделах.
  5. currency — Валюта amount выражен в. Может быть USD, GBP, EUR, AED или NGN.
  6. onClose — Функция вызывается при закрытии платежного модала
  7. onSuccess — Функция вызывается, когда клиент завершает транзакцию
  8. onError — Функция, вызываемая при сбое транзакции

Вы можете изучить дополнительные параметры и другие способы настройки транзакции на Страница официальной документации Lazerpay.

Теперь, если мы запустим наш веб-сайт или веб-приложение и нажмем кнопку, мы увидим, что проверка lazerpay была успешно запущена.

Изображение, демонстрирующее оплату с криптоинтеграцией


Шаг 4. Тестирование транзакций

Следующим шагом после успешной интеграции кассы является тестирование интеграции с фиктивными транзакциями.

К тестовые транзакции, вам понадобится кошелек, не связанный с тюремным заключением (например, MetaMask), для проведения тестовых платежей. В Интернете есть различные учебные пособия для изучения как настроить метамаск.

Тогда вам также понадобится несколько тестовых токенов. В настоящее время вы можете протестировать только токен Tether (USDT). Так возьмите немного USDT из кранов.

Вот клип о том, как я получил немного USDT от бинанс кран.

Изображение, показывающее, как получить токены USDT из крана bsc.

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

Вот клип о том, как я тестировал свою интеграцию.

Изображение, показывающее пробный платеж с помощью Lazerpay Checkout.

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

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

Нажмите на Overview на левой панели навигации вы должны увидеть транзакцию.

Изображение, показывающее мои транзакции на панели управления lazerpay


Шаг 5: Начните жить

Как только мы будем удовлетворены результатами тестирования, мы сможем начать работу.

Чтобы выйти в эфир, перейдите на приборная доска. Переключите переключатель в основную среду.

Изображение, показывающее панель управления Lazerpay с выделенным переключателем среды.

Теперь, под Настройки, выберите вкладку API и веб-перехватчики. Скопируйте свои общедоступные основные сетевые ключи.

Изображение, показывающее ключи основной сети lazerpay на панели управления

Наконец, скопируйте ключи live/mainnet и замените key вариант в объекте, переданном в LazerCheckout функция.

payBtn.addEventListener("click", (e) => {
    LazerCheckout({
        ...
        key: "YOUR_PUBLIC_LIVE_KEY",
        ...     
})
Войти в полноэкранный режим

Выйти из полноэкранного режима

И вот! Теперь вы готовы обрабатывать настоящие криптовалютные транзакции на своем веб-сайте!

Никогда не раскрывайте свои секретные ключи. Не передавайте свои секретные ключи в Git и не используйте их в клиентском коде.


Как проверить, успешно ли вы вышли в эфир?

Быстрый способ сказать, это нажать кнопку оплаты и проверить всплывающее окно.

тестовая сеть
Изображение, показывающее модальное окно lazerpay во время тестирования

Основная сеть / Live
Изображение, показывающее модальное окно Lazerpay в режиме реального времени.

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

Демонстрация корзины с печеньем

Код


Вывод

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

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

Я хотел бы связаться с вами через Твиттер | Гитхаб