uh oh - react events | Stripe Developers | Page 1

stray vigil Mar 9, 2022, 9:02 PM

#

which event?

#

Those are exposed as props you pass handlers to on each element:
<CardElement onChange={...} >
etc

random pumice Mar 9, 2022, 9:03 PM

#

https://stripe.com/docs/js/element/events

Stripe JS Reference

stray vigil Mar 9, 2022, 9:04 PM

#

https://stripe.com/docs/stripe-js/react#element-components

React Stripe.js reference

React components for Stripe.js and Stripe Elements

random pumice Mar 9, 2022, 9:04 PM

#

I would like to render a payment element component at the same time as a button together

#

Thank you!

stray vigil Mar 9, 2022, 9:04 PM

#

You probable want onReady={handler} then

random pumice Mar 9, 2022, 9:05 PM

#

thank you!

stray vigil Mar 9, 2022, 9:09 PM

#

NP!

random pumice Mar 9, 2022, 9:16 PM

#

Hi, it helped a bit however the Buttons still sometimes appear before the payment element

#

Is there another way to tackle this issue?

#

        {showButtons && (
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Button
              disabled={isDisabled || isLoading}
              onClick={handleSubmit}
            >
              Submit
            </Button>
          </Grid>
          <Grid item xs={6}>
            <Button
              disabled={isDisabled || isLoading}
              onClick={handleCancel}
            >
              Cancel
            </Button>
          </Grid>
        </Grid>
      )}```

#

    setShowButtons(true);
  };```

#

I'm not too sure how to fix this

stray vigil Mar 9, 2022, 9:35 PM

#

Hmm that doesn't seem right. Are you able to share a reproduction of this? In code sandbox or similar?

#uh oh - react events