Empty response metadata in webhook with react stripe

32 views Asked by At

I'm using stripe with react, and I can see the response on the webhook dashboard, but the metadata is always {}. I use the following 3 Elements (some are omitted).

<form id='payment-form' onSubmit={handleSubmit}>
<LinkAuthenticationElement/>
<AddressElement options={{
  
  allowedCountries: ['JP'], blockPoBox: true
  blockPoBox: true
}} />
<PaymentElement id='payment-element' onReady={() => {setIsLoading(false)}} />
</form>

When the form button is pressed, the handleSubmit to be executed is as follows (some parts are omitted).

await stripe.confirmPayment({
      elements, }
      confirmParams: {
        return_url: `${your url}/thanks`
      }
    }).then(function(result) {

      if (result.error) {
        setFinishedPayment(false)
        if (result.error?.type === 'card_error' || result.error?.type === 'validation_error') {
          setMessage(result.error.message ? null)
        } else {
          setMessage('error')
        }
      } else {
        console.log(result)
      }
    });

From here, what code can I add to include the metadata in the webhook response? I want to pass additional information to the metadata and pass the product information to the system db when payment_intent.succeeded is returned. I believe I can do this because I have such usecase, but I can't get it to work.

1

There are 1 answers

0
AL Faiz Ahmed On

You can try

  1. The first case is create proper server for webhook you can use express for this, Stripe Express JS Documentation for this
  2. This line return_url: `${your url}/thanks` means you are navigating user to /thanks page after a successfull payment.

It is a hack you can try this on your own requiremnt you can update this line return_url: `${your url}/thanks?${randomQueryParam}`

when user visit the page /thanks then you can create functionality whatever you would like sending email etc...

We will get queryparams to check if the user redirect from stripe or user is hardly trying to access /thanks page .

The Prefered Option is still create a proper server and handle user realtime activity.

Thank you