Führen Sie den Transaktions-Checkout mithilfe der Metamask-API und Javascript durch

Abgesehen von Web3-Modulen im Backend für die Abwicklung des Cryptocurrrency-Wallet-Checkouts bietet die MetaMask-API Entwicklern die Möglichkeit, eine Möglichkeit hinzuzufügen, den vollständigen Checkout-Prozess im Frontend abzuschließen. Daher müssen Kunden lediglich auf die Schaltfläche „Bestellen“ für den Lieblingsartikel klicken, den Betrag in ihr Portemonnaie eingeben und unterschreiben. Der Checkout ist abgeschlossen.

In diesem Artikel würde ich kurz erläutern, wie Sie die MetaMask-API mithilfe von Javascript nutzen können, um diese Funktion auf der Produktdetailseite oder Produktlistenseite hinzuzufügen. So können Kunden durchklicken und zur Kasse gehen, was die Conversion-Reise verkürzt.

Inhaltsverzeichnis: Vollständiger Transaktions-Checkout im Frontend mit Metamask API und Javascript

• Verbinden Sie sich mit MetaMask Wallet
• „Jetzt kaufen“-Schaltflächenskript, das eine Verbindung mit der Brieftasche herstellt
• Erhalten Sie den Bestellbestätigungsbeleg, nachdem sich der Kunde angemeldet hat.
• Vollständiges Javascript des Transaktions-Checkouts im Frontend unter Verwendung der Metamask-API und Javascript

Verbinden Sie sich mit MetaMask Wallet

Dieser Schritt ähnelt dem letzten Kapitel zur Benutzerregistrierung und -anmeldung mit der MetaMask-Wallet. Der Unterschied besteht darin, dass Käufer mit dieser Schaltfläche die Verbindung wieder aktivieren können, wenn die Verbindung getrennt wurde oder sie oder er sich noch nicht angemeldet hat. Dadurch kann sichergestellt werden, dass Ihre Datenbank den öffentlichen Schlüssel der Wallet-Adresse dieses Käufers speichern kann

   //Connect the website

   let accounts = [];

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

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

       getAccount ();

});

   async function getAccount () {

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

}

„Jetzt kaufen“-Schaltflächenskript, das eine Verbindung mit der Brieftasche herstellt

Sobald sich der Käufer über MetaMask mit Ihrer Website verbunden hat, kann er oder er den Artikel nun durch Klicken auf die Schaltfläche „Jetzt kaufen“ zur Kasse gehen.

Für das Schaltflächenskript, das MetaMask auslösen kann, ist hier das Codebeispiel wie folgt:

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

});

});

Erhalten Sie den Bestellbestätigungsbeleg, nachdem sich der Kunde angemeldet hat

Nachdem der Käufer die Bestellung unterschrieben hat, ist sie noch nicht abgeschlossen. Dies liegt daran, dass Sie den Bestätigungsbeleg erhalten, auf diesen Datensatz in Ihrem Backend antworten und die Datenbank automatisch aktualisieren und die Bestellung ausführen müssen.

   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 ();

}

Vollständiges Javascript des Transaktions-Checkouts vom Frontend mithilfe der Metamask-API und Javascript

Wenn Sie sich für das Web3.0-Tutorial 10 – Onsite-Transaktions-Checkout vom Frontend mit Metamask API und Javascript abwickeln interessieren, Bitte abonnieren Sie unseren Newsletter , indem Sie die Nachricht „Web3.0 Tutorial 10“ hinzufügen. . Wir senden Ihnen das Skript umgehend in Ihr Postfach.

Ich wünsche Ihnen viel Spaß beim Lesen des Web3.0-Tutorials 10 – Behandeln Sie den Onsite-Transaktions-Checkout vom Frontend aus mit Metamask API und Javascript. Wenn ja, unterstützen Sie uns bitte, indem Sie eine der unten aufgeführten Maßnahmen ergreifen, da dies unserem Kanal immer weiterhilft.

• Unterstützen Sie meinen Kanal und spenden Sie über PayPal ( paypal.me/Easy2digital )
• Abonnieren Sie meinen Kanal und aktivieren Sie die Benachrichtigungsglocke des Easy2Digital-Youtube-Kanals .
• Folgen und liken Sie meine Easy2Digital-Facebook-Seite
• Teilen Sie den Artikel in Ihrem sozialen Netzwerk mit dem Hashtag #easy2digital
• Sie melden sich für unseren wöchentlichen Newsletter an, um die neuesten Artikel, Videos und Rabattcodes von Easy2Digital zu erhalten
• Abonnieren Sie unsere monatliche Mitgliedschaft über Patreon, um exklusive Vorteile zu genießen ( www.patreon.com/louisludigital )