Внедрение Pos-системы Solana Pay в ваш сайт

Новые технологии появляются каждый день, и технология blockchain является одной из развивающихся технологий, используемых в настоящее время. В моей прошлой статье мы узнали, как настроить Pos-систему Solana Pay для приема криптовалютных платежей на Devnet.

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

Сейчас 2022 год, и криптоплатежи становятся все более популярными. Как здорово было бы быстро получить криптопожертвование или «чаевые на кофе» от анонимного гостя на вашем сайте? Давайте узнаем.

Предварительные условия

Чтобы следовать и понять этот учебник, вам понадобится следующее:

• Текстовый редактор или IDE (предпочтительно Vscode)
• Node.js, установленный на вашей машине
• Минимальные знания HTML
• Предварительный просмотр моей последней статьи о настройке Pos-системы Solana на Devnet

Переход с Devnet на Mainnet

Как объяснялось в моей последней статье, сервер Devnet предназначен для локальной разработки и размещается на вашей локальной машине. Он позволяет тестировать и экспериментировать, не затрагивая реальные активы, но mainnet используется для производства и затрагивает реальные активы.

Вот как вы можете легко перенести систему Solana Pos с сервера Devnet на сервер Mainnet

Шаг 1: Откройте папку проекта в Vscode.

Клонируйте оригинальный репозиторий Solana pay и откройте проект в vscode.

Шаг 2: Найдите файл, содержащий наш основной компонент react.

Вы можете найти его в файле point-of-sale/src/client/components/pages/app.tsx.

Шаг 3: Перейдите к конечной точке ConnectionProvider

Это можно сделать, найдя ConnectionProvider в кодовой базе. Вы можете сделать это, нажав «cmd+f», чтобы вызвать модальное окно поиска

Шаг 4: Отредактируйте значения с Devnet на Mainnet

Как только вы нашли конечную точку <ConnectionProvider>, отредактируйте ее с DEVNET_ENDPOINT на MAINNET_ENDPOINT (возможно, это будет отображаться как предложение в vscode в зависимости от ваших настроек), и вуаля, вы успешно перешли с devnet на mainnet.

Переключение поддержки токенов со стабильного монеты $SOL на $USDC

Solana Pay поддерживает родной актив Solana ($SOL) и стабильный токен $USDC, выпущенный в качестве родного токена SPL на блокчейне Solana. Хотя в настоящее время можно одновременно включить только один из этих активов, добавление стейблкоина дает разработчикам и торговцам возможность добавить токен, привязанный к доллару США, для борьбы с волатильностью и колебаниями цен, которые они обычно получают от других криптоактивов.

Вот как мы можем легко добавить поддержку $USDC:

Шаг 1: Найдите ConfigProvider в файловой структуре, содержащей наш основной компонент react.

В той же файловой структуре point-of-sale/src/client/components/pages/app.tsx, перейдите к <ConfigProvider>, найдя ConfigProvider в кодовой базе.

### Шаг 2: Настройка токена $USDC в кодовой базе
Отредактируйте значения в ConfigProvider, чтобы они соответствовали приведенному ниже коду

splToken={MAINNET_USDC_MINT}
symbol="USDC"
icon={<USDCIcon />}
decimals={6}
minDecimals={2}

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

Вы можете подтвердить децималы и другие детали токена, скопировав монетный адрес токена и вставив его в Solscan (проводник блокчейна Solana). В папке проекта вы можете найти этот адрес в структуре файла point-of-sale/src/client/components/utils/constant.ts.

После завершения сохраните код и запустите его на локальной машине, результат должен быть похож на этот:

Развертывание Solana POS на Vercel

Vercel — это облачная платформа для разработчиков для размещения веб-сайтов и веб-сервисов. Она поддерживает фронтенд-фреймворки и позволяет легко и автоматически масштабироваться. Мы будем разворачивать нашу платежную систему Pos там.

Шаг 1: Форк исходного репозитория на GitHub

Чтобы продолжить работу, нам необходимо форкнуть исходный репозиторий на GitHub и перенести систему Pos из Devnet в Mainnet, как было показано ранее. Вы можете выбрать токен, который будет принимать система Pos, но для этой статьи мы будем использовать стабильный токен $USDC.

Шаг 2: Войдите в Vercel и создайте новый проект

Создайте новый проект на Vercel, импортируйте форкнутый репозиторий и установите корневой каталог в point-of-sale.

Шаг 3: Задайте имя проекта и Framework

Установите название проекта по своему усмотрению, а Framework — Next.js.

Шаг 4: Разверните его

Выполнив все необходимые настройки, разверните его

Добавление Solana Pay Pos на ваш сайт

Теперь, когда мы развернули платежную систему Pos, мы можем приступить к добавлению ее в качестве платежной страницы на нашем сайте. Я буду использовать уже существующий сайт, созданный моим близким другом. Он служил в качестве моего бывшего сайта-портфолио. Вот ссылка на репозиторий GitHub.

Шаг 1: Клонируйте репозиторий и откройте папку в Vscode.

Шаг 2: Запустите сайт локально

Щелкните правой кнопкой мыши на файле index.html и скопируйте путь в браузер, чтобы запустить сайт локально (это поможет нам увидеть вносимые изменения).

Шаг 3: Составление ссылки на страницу оплаты

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

https://localhost:3001?recipient=Your+Merchant+Address&label=Your+Store+Name

После завершения работы результат должен быть похож на этот, но с вашими собственными данными

https://tunkunmi.vercel.app/?recipient=acPRRRT9LzAdp6ZcPEw9sMXRnjuRb6zrXNJbUqmDMMt&label=Tunkunmi

По мере продвижения мы будем называть это «ссылкой на платежную страницу».

Шаг 4: Настройка страницы оплаты

Перейдите к контактам в базе кода, вы должны увидеть два набора в базе кода, введите код ниже в новой строке под каждым.

<a class="overlayLinks" target="_blank" href="">TIP ME</a>

Введите ссылку на страницу оплаты в href. Результат должен быть похож на этот, но с вашими реквизитами.

<a class="overlayLinks" target="_blank" href="https://tunkunmi.vercel.app/?recipient=acPRRRT9LzAdp6ZcPEw9sMXRnjuRb6zrXNJbUqmDMMt&label=Tunkunmi">TIP ME</a>

Мы добавили ссылку на нашу платежную страницу на веб-страницу в коде выше. Мы сделали это путем внедрения тега якоря, который добавил нашу платежную ссылку в качестве гиперссылки в тексте с текстом «TIP ME». Учитывая доступность для пользователей, мы также добавили атрибут target, который будет перенаправлять пользователя на ссылку платежной страницы и отображать ее в новой вкладке, когда он нажмет на «TIP ME».

После этого вернитесь в браузер и обновите его, кнопка «TIP ME» должна появиться в правом верхнем углу страницы. Нажмите ее, и вы будете перенаправлены на страницу оплаты Solana Pay.

Сайт можно посмотреть здесь, он размещен на страницах GitHub.

Заключение

В этой статье мы узнали, как перенести систему Solana Pos из Devnet в Mainnet, как развернуть ее на vercel и как добавить ее на свой сайт в качестве платежной страницы.

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