Metamask Integration With Laravel
Tags: laravel, metamask, etherium, javascript
Published: 2021-02-10 18:48:53

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5pshe8y1z1t59xsarnm.png)

#What Is MetaMask ?

**MetaMask** is a cryptocurrency wallet which can be install in several browsers such as Chrome, FireFox and Brave Browser [ Unfortunately you can’t install in Safari 🤪 ]. That mean you can use Metamask as a bridge between ETH blockchain and browser.

And what is the amazing one, You can store **ERCi20** token also in Metamask like ETH.
So you can build custom token and use it inside your platform.

#So How To Integrate ?

Let’s go with Metamask integration process.

Here I’m use simple **Laravel** application to show entire integration process.
And I'm using screen shots of my code to make this article much easier. 

🪄 Don't Worry End Of the Document I will mention the GitHub repository and also Codepen link. then you can get entire code 😊. 

So let’s divide process as a two sections.

* How To Integrate Metamask.
* How To Validate Transactions.

In this article I will describe the step 01.

##01 How To Integrate Metamask


Here I’m using Chrome as my browser.

####Step 01

Let’s create simple input with button for enter the amount.

![Screenshot 2021-02-10 at 21.56.22](https://dev-to-uploads.s3.amazonaws.com/i/ycy4i313ma1wzvtsegr4.png)

![Screenshot 2021-02-10 at 22.24.02](https://dev-to-uploads.s3.amazonaws.com/i/o1zley6ml6q3c126ilsj.png)


####Step 02
Now we need to create javascript function to submit payment. Here I add function with onClick event of the button.

![Screenshot 2021-02-10 at 21.57.59](https://dev-to-uploads.s3.amazonaws.com/i/wcj3s2lox9kqu07gdeny.png)

####Step 03
Now we need to create javascript function to initialise, metamask and run payment.

######Before that let's simplify the process which we need to do here.

#####1 Web3 Browser Detection

![Screenshot 2021-02-10 at 22.03.20](https://dev-to-uploads.s3.amazonaws.com/i/h6pvg4j49m81ivfkvc48.png)
 
#####2 Connect to MetaMask Account

![Screenshot 2021-02-10 at 22.10.49](https://dev-to-uploads.s3.amazonaws.com/i/83agrmhtun6k8wf18qjq.png)

#####3 Do A Payment
![Screenshot 2021-02-10 at 22.12.29](https://dev-to-uploads.s3.amazonaws.com/i/dybyjreno4ye15qo2be6.png)
  

so here I'm adding some major validations to make process more creative. and also we must use javascript **await** expression because of **async** process.

#####1 Detect Web3

![Screenshot 2021-02-10 at 22.16.04](https://dev-to-uploads.s3.amazonaws.com/i/qla4tgn45t8qcmrn3y0v.png)

#####2 Connect With Metamask Account

![Screenshot 2021-02-10 at 22.16.55](https://dev-to-uploads.s3.amazonaws.com/i/qasktjxiv52y9nc3lmjn.png)
 
#####3 Do Payment

![Screenshot 2021-02-10 at 22.19.13](https://dev-to-uploads.s3.amazonaws.com/i/11z804seusxmdxm0k8rg.png) 

here you can see I mentioned a place where you should enter the payments receive address. for testings you can simply create two accounts in metamask and use one account for receive payments and second account for make payments.
 

after this step we can do a payments with **Metamask** , without an issue.

![Screenshot 2021-02-10 at 22.27.27](https://dev-to-uploads.s3.amazonaws.com/i/it1imdm7z1p31ruwfp1h.png)

 
Then we need to store transaction in the database.

for that I will use simple Ajax Request for send data  to TransactionController.

![Screenshot 2021-02-10 at 22.30.06](https://dev-to-uploads.s3.amazonaws.com/i/k5lwuvodi2mlulp3e264.png) 

In TransactionsController
![Screenshot 2021-02-10 at 22.33.09](https://dev-to-uploads.s3.amazonaws.com/i/z1wnycwscm05zvyjf7r8.png)
  

Now we need to show all the transactions to user.

first get transactions from the transactions table.

![Screenshot 2021-02-10 at 22.35.53](https://dev-to-uploads.s3.amazonaws.com/i/rwne8w1pxmt8c6oimjf6.png)
 
Now we can show all the transaction in simple bootstrap table.

![Screenshot 2021-02-10 at 22.36.51](https://dev-to-uploads.s3.amazonaws.com/i/eyuyrid8nsmdteljslyf.png)

finally transactions page will looks like this.

![Screenshot 2021-02-10 at 22.38.03](https://dev-to-uploads.s3.amazonaws.com/i/h1xry3murk9b4w8tv9l4.png)

Okay Grate 🎉 Now all the steps are completed.

** When you try to make a transaction. In Very first attempt **Metamask** will ask to connect your one of account. So here you must connect your account with your website [This process need only first attempt]. Then you can send payments. but if you have already connected account you can pay directly**

let's try to make a transaction.

Enter The amount
![Screenshot 2021-02-10 at 22.42.57](https://dev-to-uploads.s3.amazonaws.com/i/r1n4gbmrc56vkyesswqv.png)

Click Pay Now Button
![Screenshot 2021-02-10 at 22.43.12](https://dev-to-uploads.s3.amazonaws.com/i/1py1c68fjl3dj0p8yk90.png)

Next And Connect With Account
![Screenshot 2021-02-10 at 22.43.20](https://dev-to-uploads.s3.amazonaws.com/i/9ojt5ezhy2bib53ibe35.png)
   
Do A Payment
![Screenshot 2021-02-10 at 22.43.27](https://dev-to-uploads.s3.amazonaws.com/i/0jwl8v0bw68p174wth2t.png)

success Payment
![Screenshot 2021-02-10 at 22.43.42](https://dev-to-uploads.s3.amazonaws.com/i/77tkmq9jed44tyjoskhr.png)
   
Then Verify Our Payment With Etherscan.

Simply copy transaction id and put in Etherscan transaction id box.

or you can use Link Like this.

https://ropsten.etherscan.io/tx/{Your_Transaction_Id}

Here **ropsten** is our network.

for the testings we can use **ropsten** network. and make sure when you go live you must use **Mainnet** as your network.

Test Transaction Example in Etherscan.

![Screenshot 2021-02-10 at 22.53.16](https://dev-to-uploads.s3.amazonaws.com/i/hpnqifh67yu9xq4wj6k1.png)
 
In Next Article I will guid You To Make Validator to validate transactions.

I think if you read carefully you may learn something new.

Here I'm Adding Public GitHub Repository which will store all of my tutorials. you may clone it and see every tutorials what I will publish 🤗.

##You may Find my Fiver Gig Here.

[https://www.fiverr.com/s2/0c68721323](https://www.fiverr.com/s2/0c68721323)

You may read second Article Here  {% link https://dev.to/lathindu1/validate-metamask-transactions-with-etherscan-metamask-integration-with-laravel-part-2-25h6 %}

**GitHub Repository** {% github lathindu1/tutorials %}

**CodePen** {% codepen https://codepen.io/lathindu/pen/bGBwOWd %}

Thank You Very much.
- Lathindu Pramuditha.
- GitHub Profile ->  https://github.com/lathindu1