Continuar con el pago de la transacción utilizando la API de Metamask y Javascript

Además de los módulos Web3 en el backend para manejar el pago de la billetera de criptomonedas, la API MetaMask proporciona una manera para que los desarrolladores agreguen una forma de completar el proceso de pago completo en el front-end. Por lo tanto, los clientes sólo necesitan hacer clic en el botón de pago del artículo favorito, completar el monto en su billetera y firmar. El pago está hecho.

En este artículo, explicaré brevemente cómo aprovechar la API de MetaMask usando Javascript para agregar esta función en la página de detalles del producto o en la página de lista de productos. Para que los clientes puedan hacer clic y pagar, lo que acorta el proceso de conversión.

Tabla de contenido: Pago completo de transacciones en la interfaz utilizando Metamask API y Javascript

• Conéctese con MetaMask Wallet
• Script del botón Comprar ahora Conexión con Wallet
• Reciba el recibo de confirmación del pedido después de que los clientes hayan iniciado sesión.
• Javascript completo de pago de transacciones en la interfaz utilizando Metamask API y Javascript

Conéctese con MetaMask Wallet

Este paso es similar al último capítulo sobre el registro e inicio de sesión de usuarios utilizando la billetera MetaMask. La diferencia es que este botón sirve para que los compradores habiliten la conexión nuevamente si está desconectada o si aún no se ha registrado. Puede garantizar que su base de datos pueda almacenar la clave pública de la dirección de billetera de este comprador.

   //Connect the website

   let accounts = [];

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

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

       getAccount ();

});

   async function getAccount () {

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

}

Script del botón Comprar ahora Conexión con Wallet

Una vez que el comprador se haya conectado a su sitio web mediante MetaMask, ahora podrá comprobar el artículo al hacer clic en el botón Comprar ahora.

Para el script del botón que puede activar MetaMask, aquí está el ejemplo de código de la siguiente manera:

   //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

});

});

Reciba el recibo de confirmación del pedido después de que los clientes hayan iniciado sesión

Una vez que el comprador haya firmado el pedido, éste aún no estará terminado. Esto se debe a que necesita obtener el recibo de confirmación y responder a este conjunto de datos en su servidor, actualizar automáticamente la base de datos y completar el pedido.

   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 completo de pago de transacciones desde la interfaz utilizando Metamask API y Javascript

Si está interesado en el tutorial 10 de Web3.0: Manejar el pago de transacciones en el sitio desde el frontend usando Metamask API y Javascript, suscríbase a nuestro boletín agregando el mensaje "Tutorial Web3.0 10" . Le enviaremos el script inmediatamente a su buzón de correo.

Espero que disfrute leyendo el tutorial 10 de Web3.0: Manejar el pago de transacciones en el sitio desde la interfaz utilizando Metamask API y Javascript. Si lo hizo, apóyenos haciendo una de las cosas que se enumeran a continuación, porque siempre ayuda a nuestro canal.

• Apoye y done a mi canal a través de PayPal ( paypal.me/Easy2digital )
• Suscríbete a mi canal y activa la campana de notificaciones del canal de Youtube Easy2Digital .
• Sigue y dale me gusta a mi página Página de Facebook de Easy2Digital
• Comparte el artículo en tu red social con el hashtag #easy2digital
• Te registras en nuestro boletín semanal para recibir los últimos artículos, vídeos y códigos de descuento de Easy2Digital.
• Suscríbase a nuestra membresía mensual a través de Patreon para disfrutar de beneficios exclusivos ( www.patreon.com/louisludigital )