Продолжите оформление транзакции с использованием Metamask API и Javascript

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

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

Оглавление: Полная проверка транзакции на внешнем интерфейсе с использованием API Metamask и Javascript

• Подключиться к кошельку MetaMask
• Скрипт кнопки «Купить сейчас», подключающийся к кошельку
• Получите квитанцию ​​с подтверждением заказа после того, как клиенты войдут в систему.
• Полный Javascript для проверки транзакций на внешнем интерфейсе с использованием API Metamask и Javascript

Подключиться к кошельку MetaMask

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

   //Connect the website

   let accounts = [];

   const ethereumButton = document . querySelector ( '.enableEthereumButton' );

   ethereumButton . addEventListener ( 'click' , () => {

       getAccount ();

});

   async function getAccount () {

       accounts = await ethereum . request ({ method: 'eth_requestAccounts' });

}

Скрипт кнопки «Купить сейчас», подключающийся к кошельку

Как только покупатель подключился к вашему веб-сайту с помощью MetaMask, теперь он или он может проверить товар, нажав кнопку «Купить сейчас».

Ниже приведен пример кода для сценария кнопки, который может запускать MetaMask:

   //Sending Ethereum to an address

   sendEthButton . addEventListener ( 'click' , () => {

       signTransaction = ethereum . request ({

           method: 'eth_sendTransaction' ,

           params: [

{

                   from: accounts [ 0 ], // this is the user wallet address she or he used to connect with your website just now above

                   to: 'to your merchant wallet account set in advance' ,

}]

}). then ( txhash => {

           console . log ( txhash );

           checkTransactionconfirmation ( txhash ). then ( r => alert ( r )); // This is for the receipt data capture. I would show more details in the following point

});

});

Получите квитанцию ​​с подтверждением заказа после того, как клиенты войдут в систему

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

   function checkTransactionconfirmation ( txhash ) {

       let checkTransactionLoop = () => {

           return ethereum . request ({ method: 'eth_getTransactionReceipt' , params: [ txhash ] }). then ( r => {

               if ( r != null ) return 'confirmed' ;

               else return checkTransactionLoop ();

})

};

       return checkTransactionLoop ();

}

Полный Javascript для оформления транзакции из внешнего интерфейса с использованием API Metamask и Javascript

Если вас интересует руководство 10 по Web3.0 «Обработка проверки транзакций на месте из внешнего интерфейса с использованием API Metamask и Javascript», подпишитесь на нашу рассылку , добавив сообщение «Урок 10 по Web3.0». . Мы немедленно отправим вам сценарий на ваш почтовый ящик.

Надеюсь, вам понравится чтение руководства 10 по Web3.0 — Обработка проверки транзакций на месте из внешнего интерфейса с использованием API Metamask и Javascript. Если да, поддержите нас, выполнив одно из действий, перечисленных ниже, потому что это всегда помогает нашему каналу.

• Поддержите мой канал и сделайте пожертвование через PayPal ( paypal.me/Easy2digital ).
• Подпишитесь на мой канал и включите колокольчик Easy2Digital Youtube-канал .
• Подпишитесь на мою страницу и поставьте ей лайк. Страница Easy2Digital в Facebook.
• Поделитесь статьей в своей социальной сети с хэштегом #easy2digital.
• Вы подписываетесь на нашу еженедельную рассылку, чтобы получать последние статьи, видео и коды скидок Easy2Digital.
• Подпишитесь на наше ежемесячное членство через Patreon, чтобы пользоваться эксклюзивными преимуществами ( www.patreon.com/louisludigital ).