title: Processing Stripe payment in react
body: <p>I am successfully able to process Stripe payments in react using the following:</p>
  <pre><code>const processPayment = async () =&gt; {
          const url = '/.netlify/functions/charge-card';
          const newItems = items.map(({ id, quantity }) =&gt; ({
              id,
              quantity,
          }));
  
          const stripe = await loadStripe(publishableKey);
          const { data } = await axios.post(url, { items: newItems });
          await stripe.redirectToCheckout({ sessionId: data.id });
      };
  </code></pre>
  <p>This is the only method that will work for me</p>
  <pre><code>exports.handler = async (event, context) =&gt; {
      const { items } = JSON.parse(event.body);
      const allItems = await getProducts();
  
      const cartWithProducts = items.map(({ id, quantity }) =&gt; {
          const item = allItems.find(p =&gt; p.id === id);
          return {
              ...item,
              quantity,
          };
      });
  
      const lineItems = cartWithProducts.map(product =&gt; ({
          price_data: {
              currency: 'usd',
              product_data: {
                  name: product.name,
              },
              unit_amount: product.price,
          },
          quantity: product.quantity,
      }));
  
      const session = await stripe.checkout.sessions.create({
          payment_method_types: ['card'],
          line_items: lineItems,
          mode: 'payment',
          success_url: `${process.env.URL}/success`,
          cancel_url: `${process.env.URL}/cancelled`,
      });
  
      console.log(lineItems);
  
      return {
          statusCode: 200,
          body: JSON.stringify({
              id: session.id,
          }),
      };
  </code></pre>
  <p>However, I don't want to use <code>await stripe.redirectToCheckout({ sessionId: data.id });</code> because I don't want to be redirected to Stripe's site.  I want to do something like this:</p>
  <pre><code>return (
          &lt;StripeCheckout
              label={'Pay Now'}
              name={'CRWN Clothing Ltd.'}
              billingAddress
              shippingAddress
              image={'https://svgshare.com/i/CUz.svg'}
              description={`Your total is $${price}`}
              amount={priceForStripe}
              panelLabel={'Pay Now'}
              token={processPayment}
              stripeKey={publishableKey}
              
          /&gt;
  </code></pre>
  <p>This shows the popup and allows me to enter all the info and submit the payment however nothing actually happens. I don't know if it has something to do with the sessionId and data.id.  Is there another function I can use instead of stripe.redirectToCheckout that would process the info?</p>