Good day, I am trying to process payment using Firestore Cloud Function and a payment Gateway called Yoco. My payment code works and returns an object of failure or success. When I do logger.log I can view the object but the problem is when I try returning the result to the Client. I keep getting undefined. My methods are async.

CLIENT SIDE

I want to response from server and update my UI

const handlePay = () => {
    if (amount > 100) {
      yoco.showPopup({
        amountInCents: amount, // 2 decimal places begining from left
        currency: "ZAR",
        name: "Student Angel",
        description: "Helping students deal with student debt",

        callback: function (result) {
          // This function returns a token that your server can use to capture a payment
          if (result.error) {
            const errorMessage = result.error.message;
            alert("error occured: " + errorMessage);
          } else {
            paymentMethod({ token: result.id, amount: amount });
          }
          // In a real integration - you would now pass this chargeToken back to your
          // server along with the order/basket that the customer has purchased.
        },
      });
    } else {
      toast.error(
        "Due to high transaction charges, We can only process R100 and above. Thank you"
      );
    }
  };

  const paymentMethod = ({ token, amount }) => {
    const handlePayments = httpsCallable(functions, "handlePayments");
    handlePayments({ token, amount })
      .then((result) => {
        console.log(result);
      })
      .catch((result) => {
        console.log(result);
      });
  };

THIS IS CLOUD FUNCTION
exports.handlePayments = functions.https.onCall(async (data, context) => {
  // Using a testing key Not Production Key
  const SECRET_KEY = "sk_test_5ca384cdyerp8kY188a435e95fbe"; 
  // check auth state
  if (!context.auth) {
    throw new functions.https.HttpsError(
      "unauthenticated",
      "You are not authenticated"
    );
  }

  const token = data.token;
  const amount = data.amount;


  await axios  // I have tried this     return await axios.post but nothing
    .post(
      "https://online.yoco.com/v1/charges/",
      {
        token: token,
        amountInCents: amount,
        currency: "ZAR",
      },
      {
        headers: {
          "X-Auth-Secret-Key": SECRET_KEY,
        },
      }
    )
    .then((res) => {
      // res.status will contain the HTTP status code
      // res.data will contain the response body
      functions.logger.log(res);
      return res;
    })
    .catch((error) => {
      return error;
    });
});