暗号通貨ウォレットのチェックアウトを処理するバックエンドの Web3 モジュールとは別に、MetaMask API は開発者がフロントエンドで完全なチェックアウト プロセスを完了する方法を追加する方法を提供します。したがって、顧客は好きな商品のチェックアウトボタンをクリックし、財布に金額を記入して署名するだけで済みます。チェックアウトが完了しました。

この記事では、Javascript を使用して MetaMask API を活用し、この機能を製品詳細ページまたは製品リスト ページに追加する方法を簡単に説明します。そのため、顧客はクリックスルーしてチェックアウトできるため、コンバージョンまでの時間が短縮されます。

目次: メタマスク API と Javascript を使用したフロントエンドでの完全なトランザクション チェックアウト

• MetaMask ウォレットと接続する
• 今すぐ購入ボタンウォレットと接続するスクリプト
• お客様がサインインした後、注文確認受領書を受け取ります。
• メタマスク API とJavascript を使用したフロントエンドでのトランザクション チェックアウトの完全な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 を使用して Web サイトに接続すると、「今すぐ購入」ボタンをクリックして商品をチェックアウトできるようになります。

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

}