如何在 javascript 函數中允許 ERC20 代幣支付

Question

我正在制定一項智能合約，允許用戶使用 ERC20 代幣支付 Netflix、亞馬遜等月度訂閱費用。

當我測試它時，一切都很好。 但是當我在前端實現支付功能時，用戶可以與智能合約進行交互。 我遇到的問題是，當我點擊一個按鈕啟動支付功能時，我讓 Metamask 要求確認批准，然后一旦確認批准，我必須確認代幣轉移。 **我必須確認代幣的轉移。 然后我得到另一筆交易來確認 ETH 中等量的代幣。

我做了很多研究，但我卡住了，我可以允許支付功能在兩個地址之間只轉移一次代幣嗎？ 我錯過了什么嗎？

PS：blockchain.account & blockchain.smartContract 是從 redux 對象狀態導入的。

實體函數

function pay(uint planId) external {
    Subscription storage subscription = subscriptions[subscriber][planId];
    Plan storage plan = plans[planId];
    IERC20 token = IERC20(plan.token);
    require(
      block.timestamp > subscription.nextPayment,
      'not due yet'
    );

    token.transferFrom(subscriber, plan.merchant, plan.amount);  
    emit PaymentSent(
      msg.sender,
      plan.merchant, 
      plan.amount, 
      planId, 
      block.timestamp
    );
    subscription.nextPayment = subscription.nextPayment + plan.frequency;
  }

反應函數

async function pay() {
    showAlert(true, "Happy to see you, Your payment is processing...!");
    const data = await blockchain.smartContract.methods.subscriptions(Id).call();
    let monthlyPayment = String(data.monthlyPayment);
    let tokenAddress = data.amount;

    // instance of ERC20 contract
    let currency = new web3.eth.Contract(tokenIbi, tokenAddress);
    
    currency.methods.approve("0x1b4eAe2DC7Ca0b68643A26177bfC9c069B3D6E04",
                              amount).send({from: blockchain.account})
    .then(
      await currency.methods.transfer("0x1b4eAe2DC7Ca0b68643A26177bfC9c069B3D6E04",
                              amount).send({from:blockchain.account})
    )
    blockchain.smartContract.methods.pay(Id).send({from: blockchain.account})
    .once("error", (err)=> {
      console.log(err);
      showAlert(true, "Something went wrong...!");
    })
    .then((receipt)=> {
      console.log(receipt);
      showAlert(true, "Congratulations, You monthly payment has been submitted successfully");
      dispatch(fetchData(blockchain.account));
    })
  }

支付按鈕

<button className="btn"
                        id="launchApp-btn"
                        onClick={(e)=> {
                        e.preventDefault();
                        pay();
                    }}>

Answer 1

您每月購買兩次交易

1. 批准erc20代幣的配額
2. 轉讓erc20代幣

每個都有自己的gas費用。 您可以在用戶第一次購買時增加erc20的津貼（這不公平並帶來安全問題）或繼續做同樣的場景批准&轉讓