The way I see it, you have two options depending on the type of data provided via the React inputs (I believe the second option will work better to keep you flexible):

API Metadata

Use this option if the data provided by users is not sensitive. Stripe supports appending metadata to your requests as key-value pairs. This metadata is then added to the `Charge` object created by your `PaymentIntent`, which you can retrieve in your webhook function.

From the documentation:

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y');

const intent = await stripe.paymentIntents.retrieve('{{PAYMENT_INTENT_ID}}');
const latest_charge = intent.latest_charge;

The main limitation is, per the documentation,

You can specify up to 50 keys, with key names up to 40 characters long
and values up to 500 characters long

And most importantly, do not store sensitive or PII data here.

Two-step process

Alternatively, and probably the solution which will work better for you, you can add a step to the payment process:

1. Create the object with the React inputs in your database by adding an endpoint in your Amplify code. Add a field to this object such as fulfilled and set it to false.
2. Your webhook has to update this item when the payment is fulfilled.

It is a simple addition to your code, you can make use of Stripe’s metadata for tracking and managing additional information about your transactions and customers.

It (metadata) is basically a key-value pair, which will perfectly suit your requirements here.

metadata sample code:

    "metadata": {
    "order_id": "6735",
    "customer_id": "CUST12345",
    "product_category": "electronics",
    "delivery_date": "2024-07-25",
    "affiliate_code": "AFF2024"
  }

You can use it with paymentintents, checkouts, subscriptions etc.