我试图在我的react应用程序中使用stripe中的新支付元素进行支付处理，但实现的后端要求我发送通过stripe收集的令牌化支付详细信息，并发送后端将创建费用。我看到的例子不这样做，所有的过程中直接支付条纹。我看到的所有使用令牌的例子似乎都不适用于支付元素，只适用于旧的卡元素。
下面是表格：

<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>

下面是一个使用card元素的旧方法的例子：

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);
      }
    });

我尝试了以下方法，但似乎都不起作用：

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);
    });