Create direct charges with Application Fee - Stripe Connect - Nodejs & Reactjs

Question

so I have finished connecting to Stripe accounts and authenticating them. Now I want to make charges (Direct Charge) following this guide https://stripe.com/docs/connect/direct-chargeshttps://stripe.com/docs/connect/direct-charges

In my server side (Nodejs) I have

 const paymentIntent = await stripe.paymentIntents.create(
      {
        amount: amount * 100,
        currency: "USD",
        application_fee_amount: amount * 0.5 * 100,
      },
      {
        stripeAccount: connectedAccountId,
      }
    );

When calling it in the client side, it's successful but I get

status:requires_payment_method

It's the same in Stripe dashboard, and I tried to follow this guide to accept payment on client side: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=checkout but I don't know how to connect backend with frontend.

In frontend (Reactjs) I have

  const stripePromise = loadStripe(
    process.env.REACT_APP_STRIPE_PUBLIC_PUBLISHABLE_KEY,
    {
      stripeAccount: connectedAccountId,
    }
  );

...

  <Elements stripe={stripePromise}>
            <CheckoutForm />
          </Elements>

So my question is, how do I connect these two together? How do I connect the server side code I have above to connect to the frontend to process and confirm payment with the price and application fee I have applied.

I basically want to make a direct charge with application fee, and I want the process to start when end users clicks on a button in frontend - so far only the intent is created with button click

Please let me know if something is not clear.