React app with Stripe support, sending custom fields to access in backend

Question

I have a React app which offers users access to purchase some services via Stripe CheckOut. I have all this services set-up in Stripe dashboard.

I have this code in my front-end:

  const getStripe = () => {
      stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);
    }
    return stripePromise;
  };
  const item = {
    price: "price_1KwBqbAlr3jHVQDRBJGBE8Dy",
    quantity: 1,
  };

  const checkoutOptions = {
    lineItems: [item],
    mode: "payment",
    successUrl: `${window.location.origin}/success`,
    cancelUrl: `${window.location.origin}/cancel`,
    locale: "ro"
  };

  const redirectToCheckout = async () => {
    console.log("redirectToCheckout");
    const stripe = await getStripe();
    const { error } = await stripe.redirectToCheckout(checkoutOptions);
    console.log("Stipe checkout error", error);

    setLoading(false);
  };

Before I send the user to the Stripe Checkout, i require the user to also fill in some observations, observation that I would like to add to my db for the persons that take care of this requests.

My question for you is this: is there a possibility to somehow send custom fields in the PaymentIntent that gets to my server where I check response.paymentIntent.status === 'succeeded'

Answer 1

You could achieve this by using the payment_intent_data.metadata when creating the Checkout Session like this:

const checkoutOptions = {
    //...
    payment_intent_data:{
        metadata:{
           //pass whatever data you need as key value pairs
        }
    }
};

This will give you access to the metadata property of the Payment Intent you retrieve afterwards.