I've finished my dapp by deploying the contract to Remix, and it works well in Ganache.

Now I wanna connect my dapp to Rinkeby by web3.js. I deployed my contract in Remix, and when I wanna interact with contract, the metamask show the page of paying.

However, when I connect metamask to my dapp page and interact with contract by it, the paying page of metamask didn't show up.

I've confused of where should I deploy it, and how to connect it? Should I deploy my contract by geth rather than Remix?

the following is my code of web3.js

// Initialize Web3
web3 = new Web3(web3.currentProvider);

// Set Account
web3.eth.defaultAccount = 'my account on metamask';

// Set Contract Abi
var ABI = [abi];

// Set Contract Address
var contractAddress = 'the address I deployed in Remix';

// Set the Contract
var contract = new web3.eth.Contract(ABI, contractAddress);

I've finished my dapp by deploying the contract to Remix, and it works well in Ganache.

Now I wanna connect my dapp to Rinkeby by web3.js. I deployed my contract in Remix, and when I wanna interact with contract, the metamask show the page of paying.

However, when I connect metamask to my dapp page and interact with contract by it, the paying page of metamask didn't show up.

And I also use metamask legacy-web3, the console shows:

I've confused of where should I deploy it, and how to connect it? Should I deploy my contract by geth rather than Remix?

the following is my code of web3.js

// Initialize Web3
web3 = new Web3(web3.currentProvider);

// Set Account
web3.eth.defaultAccount = 'my account on metamask';

// Set Contract Abi
var ABI = [abi];

// Set Contract Address
var contractAddress = 'the address I deployed in Remix';

// Set the Contract
var contract = new web3.eth.Contract(ABI, contractAddress);