I want to send some data from one page to another when the payment is successful.

  const item = {
    price: "testt_stripe",
    quantity: 1
  };

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

  const redirectToCheckout = async () => {
    // Stripe checkout
    setLoading(true);
  
    const stripe = await getStripe();
    const { error } = await stripe.redirectToCheckout(checkoutOptions);
  
    if (error) setStripeError(error.message);
    setLoading(false);
  };

button

onClick={redirectToCheckout}

Now I want to send some data from component A which contains the button and redirectToCheckout to component B which is /payment page. I am new to react js and trying to understand how can I do that. Thank you

CodePudding user response：

well I think you have to use a very different technique, here are some options:

1. in case the data is not very big you can send it with params in the url react router dom has the hooks for make ir possible.
2. you can use a context provider that basically you share a data store that some components can share this data, your components consume data from this store, you can save data and consume data.
3. Redux/toolkit is basically the same concept as option 2, but redux shares data in all the application, the difference is that the context provider is to share data between small components and redux is something bigger,

Update:

To pass parameters to component with React Router, we can use the useParams hook.

For instance, we write.

<Route path="/details/:id" component={DetailsPage} />;

to add the id parameter to our route.

Then in DetailsPage, we write:

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
  // ...
}

CodePudding user response：

If you want to get the stripe session id then you can use urls something like this:

success_url: `${window.location.origin}/payment?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${window.location.origin}/cancel?session_id={CHECKOUT_SESSION_ID}`,

NOTE: CHECKOUT_SESSION_ID should be passed same like mentioned.

When you will be redirected to /payment or /cancel you will have something like this: /payment?session_id=id and /cancel?session_id=id