How to connect phantom wallet by Solana Pay using Web3.js?

Question

I am trying connect Phantom wallet from Solana Pay using Web3.js However I am constantly getting the error "Buffer is not defined". How to resolve this?

Note: I am not using Nodejs. I am trying to create the integration with the Web3.js library.

Here is the code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
       
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script>
<script>
// The below is the code where I am getting the error
if(window.solana && window.solana.isPhantom){
                    const resp= await window.solana.connect();
                    var connection= new solanaWeb3.Connection(
                        solanaWeb3.clusterApiUrl('devnet'),
                        'confirmed',
                    );

const receiverWallet= new solanaWeb3.PublicKey("xxxxxxxxxxxxxxxxxxxxxx");
                    var transaction= new solanaWeb3.Transaction().add(
                        solanaWeb3.SystemProgram.transfer({
                            fromPubkey: resp.PublicKey,
                            toPubkey: receiverWallet,
                            lamports: 10000000*50,
                        }),
                    );
}
</script>

Answer 1

Use solana/web3.js v1.30.2

Or install some extra dependencies for latest version

I'm sharing a blog. Its based on ReactJS but hope you can understand. And no issue, just change your version to 1.30.2 it will work fine.

Blog_for_extra_dependencies

You can refer to this code also. CodeSandbox