How to connect to MetaMask via web3js

Question

I'm trying to recreate this site TenThousandSu
And this is the smart contract I'm trying to call https://rinkeby.etherscan.io/address/0x7e338acfb7a5d7e99f4225cc12dc884f49c00f6a#code
I'm using "1.0.0-beta.35" version of web3js.

I'm having difficulties connecting to a users wallet and executing a smart contract on their wallet. If you go to tenthousandsu.com and click the Buy button you'll first get a prompt asking you if the smart contract can connect to your wallet. After you accept that, it asks you if you want to let the smart contract execute a transacation. To clarify look at the below pictures.

I'm neither sure how to make picture 1 or picture 2 happen. I have never been able to do that from my program. I'm just trying to call the function purchase(uint256 _nftId) on line 721 in the smart contract I've made on rinkeby. The code below is what I've tried.

contract.methods.purchase(squareNumber);

The code above in my mind should execute what is displayed on the 2nd picture. But I would prefer if I could do something like this

contract.methods.purchase(squareNumber, (err, res) => {
          console.log([err, res]);
          if (!err) {
            // HANDLE SUCCESS
          } else {
            alert(err);
          }
        });

And for the 1st picture I'm not even sure what to do. I'm not sure how to prompt the user to accept a "Connect Request".