Reactjs – How do I create a token for the new stripe payment element as it used to be done in the old card element?

I am trying to use the new payment element in stripe for payment handling in my react application but the backend that was implemented requires me to send the tokenized payment details collected through stripe and send through which the backend will create a charge. The examples I have seen don’t do that and all process the payment directly with stripe. All the examples I have seen using the token doesn’t seem to work for payment element and only work for the old card element.

Here is the form:

<form id="payment-form" onSubmit={handleSubmit}>
      <LinkAuthenticationElement
        id="link-authentication-element"
        onChange={(e) => setEmail(e.target.value)}
      />
      <PaymentElement id="payment-element" options={paymentElementOptions} />
      
      <button className="mt-5 rounded-lg text-center flex items-center justify-center w-full px-8 py-4 bg-main text-white border-0 text-sm leading-4 font-medium sm:font-semibold sm:text-base sm:leading-[19px]" disabled={isLoading || !stripe || !elements} id="submit">
        <span id="button-text">
          {isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
        </span>
      </button>
      {/* Show any error or success messages */}
      {message && <div id="payment-message" className="text-center mt-2">{message}</div>}
    </form>

Here is an example of the old method using card element:

stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the user if there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
      }
    });

I have tried the following but none seems to work:

const cardElement = elements.getElement(cardElement);
stripe.createToken(cardElement).then(function(result) {
      if (result.error) {
        // Inform the user if there was an error.
        // var errorElement = document.getElementById('card-errors');
        // errorElement.textContent = result.error.message;
        console.log(result.error.message)
      } else {
        // Send the token to your server.
        console.log(result);
      }
    }).catch((error) => {
      console.log(error);
    });