web3 JS payment button for Metamask BSC bep20 token

Question

I would like to accept donations from visitors, I only want an specific token with pre set amount and only people with metamask.

if (typeof window.ethereum !== 'undefined') {
    ethereum.request({ method: 'eth_requestAccounts' });
} else {
    alert('Please install metamask')
}

const web3 = new Web3('https://bsc-dataseed1.binance.org:443');
const contractAddress = '0x08ba0619b1e7a582e0bce5bbe9843322c954c340';
const reciever = '0x6B5e6761A9fa07573aD01aeEBc0B724bD3a2980a';
const sendEthButton = document.querySelector('.sendEthButton');

sendEthButton.addEventListener('click', () => {
    (async ()=>{
        const contract = new web3.eth.Contract(ABI, contractAddress);
        const transfer = await contract.methods.transfer(reciever, 10);
        const encodedABI = await transfer.encodeABI();
        if(window.ethereum.chainId == '0x38'){
            ethereum
            .request({
            method: 'eth_sendTransaction',
            params: [
                {
                    from: ethereum.selectedAddress,
                    to: reciever,
                    gasPrice: '',
                    gas: '',
                    data: encodedABI
                },
            ],
            })
            .then((txHash) => console.log(txHash))
            .catch((error) => console.error);
        } else {
            ethereum.request({ method: 'wallet_switchEthereumChain', params:[{chainId: '0x38'}]})
        }
    })()
});

what I have so far almost works, but I can not find any proper example nor explanation of what I am doing wrong.

What I am doing so far is, first check if Metamask is installed. Then if someone clicks the button I check if we are in the right network (BSC). I use the Contract ABI to encode a transaction to send to Metamask. all works fine, only in Metamask the token I want to make the payment with is not selected (should be BMON but shows TKN). Someone please help me a little bit.

--- UPDATE ---

So, I found that on bscscan.com on the contract tab of BMON, I can connect web3 go to "Write contract" button and then in the "transfer" function enter my details and Write. that works fine, then I check in Metamask the data. even if I copy paste that data its still not working.

--- UPDATE ---

This is what I get with my code Its not selecting BMON

This is what I want Here is did select BMON, done on bscscan.com

The first image is what I get, that's the problem, my code does not select BMON, and that's what I don't understand. I am using the abi to decode the data, even if I use the data from the right transaction, its still not working

Answer 1

I found the problem. instead of request transaction I can just send it in the contract.method.transfer hope this will help anyone else having trouble.

(async ()=>{
        const contract = new web3.eth.Contract(ABI, contractAddress);
        if(window.ethereum.chainId == '0x38'){
          await contract.methods.transfer(reciever, 10)
          .send('from':ethereum.selectedAddress)
          .on('receipt',(receipt)=>{console.log(receipt)})
        } else {
          ethereum.request({ method: 'wallet_switchEthereumChain', params:[{chainId: '0x38'}]})
        }
})()

Answer 2

Welcome to Stackoverflow. Please explain the issue clearly, and if you have any transaction hashes to show the results it would help a lot in diagnosing the problem.

So far your code looks ok to me and the screenshot says BMON but the gas seems like a bit high.

Once you do that, I will edit this answer with a solution.