Lesc

[patent storm]

Hi there 👋 I'm not as familiar with React, but am taking a look to see if anything jumps out at me. While I do, have you tried logging the contents of elements in your handleSubscribe function to double check it's contents at the time you're trying to use it?

[unborn rover]

I did log it. But as I'm not really familiar with Stripe, I don't really know what I should look for

[spiral sentinel]

Hi! Let me help you with this.

You can follow the example here: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#add-and-configure-the-elements-provider-to-your-payment-page

Try placing the <Elements> and <PaymentElement> in separate components.

So the useElements() hook is called in the inner component.

[unborn rover]

I get a cross origin error when I try to set the PaymentElement somewhere else

[spiral sentinel]

Like where?

[unborn rover]

It just says "A cross-origin error was thrown. React doesn't have access to the actual error object in development"

[spiral sentinel]

Could you please share a screenshot of the error?

And where do you place the PaymentElement to get the error?

[unborn rover]

Normally I do it like that. I just tried to place it in another component.

<Box>{clientSecret && (outerElement)}</Box>

Though it's weird that I'm getting errors as I already set Elements in the main file:

ReactDOM.render(
      <React.StrictMode>
        <Elements stripe={stripePromise}>
          <App />
        </Elements>
      </React.StrictMode>,
      document.getElementById('root')
    );

[spiral sentinel]

Did it work before? Like, did you see the PaymentElement rendering?

You should aim to have something like this. It's important that the useElements() and useStripe() is used within the Elements context.

const CheckoutForm = () => {
  const elements = useElement()
  const stripe = useStripe()
  ...
  return (
    <Form>
      <PaymentElement options={paymentElementOptions}></PaymentElement>
    </Form>
  )
}

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

[unborn rover]

Yes it's rendering. But if I call the confirmPayment method it gives me the error about unmounted elements

[unborn rover]

Ok I'll try to get close to that solution. Doubt that this is gonna do it though

[spiral sentinel]

Also, you don't need to pass elements attribute to PaymentElement

[unborn rover]

It's enough if it's defined at the top?

But one question: where does the client secret go then?

[spiral sentinel]

Into Elements options

See the example that I shared earlier: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#add-and-configure-the-elements-provider-to-your-payment-page