negative10xprogrammer

[fallow blade]

Hi! Let me help you with this.

What are you trying to do exactly?

[plush bear]

exactly as in the docs above.

1. User inputs card details
2. When they click Pay Now, a paymentmethod is supposed to be created
3. This should be passed into the endpoint specified in the fetch

all from clicking pay now.

and then i use that paymentmethodId in the backend to both create and confirm intent

and potentially return a clientsecret in case of "requires_action"

[fallow blade]

Are you setting paymentMethodCreation: 'manual' on the Payment Element? https://stripe.com/docs/payments/finalize-payments-on-the-server?platform=web&type=payment#:~:text=paymentMethodCreation%3A 'manual'%2C

[plush bear]

not sure how to do that, i barely know any react or js. im a backend developer so im kinda stumbling throuigh the docs just for testing haha

i've basically copy pasted the code up there (and changed to the correct endpoint and request body in the fetch)

[fallow blade]

How are you creating the Payment Element? Could you share the code please?

[plush bear]

so basically just copy pasted step 4 here: https://stripe.com/docs/payments/finalize-payments-on-the-server?platform=web&type=payment

<PaymentElement id="payment-element" options={paymentElementOptions} />

you mnean like so?

[fallow blade]

It's this step: https://stripe.com/docs/payments/finalize-payments-on-the-server?platform=web&type=payment&client=react#add-and-configure-the-elements-provider-to-your-checkout-page

function App() {
  const options = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    paymentMethodCreation: 'manual',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

[plush bear]

ahh gotcha, thanks!

[fallow blade]

Is it working?