How to approve token and then send it later from backend

I created simple contract like this:

pragma solidity ^0.8.0;

import '@openzeppelin/contracts/token/ERC20/IERC20.sol';

contract PaymentProcessor {
    address public admin;
    IERC20 public dai;

    event PaymentDone (
        address payer,
        uint amount,
        uint paymentId,
        uint date
    );

    constructor(address adminAdress, address daiAddress) public {
        admin = adminAdress;
        dai = IERC20(daiAddress);
    }

    function pay(uint amount, uint paymentId) external {
        dai.transferFrom(msg.sender, admin, amount);
        emit PaymentDone(msg.sender, amount, paymentId, block.timestamp);
    }
}

From front-end app I can now send transaction with metamask

// approve send of token
const tx1 = await dai.approve(proc.address, ethers.utils.parseEther('100'));
await tx1.wait();
console.log(tx1);
// call cotnract to send token to main address
const tx2 = await proc.pay(ethers.utils.parseEther('100'), '1111');
await tx2.wait();
console.log(tx2)

What I am trying to accomplish is to approve spending token from front-end and later from backend to send those approved token to different addresses. Is it possible if yes could you show me how connection and transaction sending should look like? I am using ethers to connect to network.