Process Stripe Payments in React Js and Firebase

Question

I am still a beginner in Firebase and I am working on an application in ReactJs where users have to buy some products using Stripe Payment. I have followed the flow of how stripe implementation works;

1. I have created a form in reactJs to accept billing information and I have used the CardElement from @stripe/react-stripe-js package to securely initialize a payment in ReactJs.

    import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js" const stripeConst = useStripe()............................ const paymentIntent = await stripeValue.paymentIntents.create({ amount, currency: "usd" });

2. I need to use the initialization to to make a request which will return a client_Secret which I need to confirm the payment. I do not know whether there is a method in Firebase that can allow me integrate this process directly on my reactJs application without using another Node.js api to generate this secret client key. I have my stripe Private key with me and I know I need to use it at this level as well.

    //I haven't seen any resource that can assist me in this task but I know it has to return a client Secret

3. I have used the confimCardPayment to process a payment.

    const { error } = await stripeConst.confirmCardPayment(clientSecret, { payment_method: paymentMethod.id });

Answer 1

The only way to do this securely is to process the payment on the server side, and wait for Stripe to confirm that you've been paid. There are older APIs that allow you to complete a payment from the client, but they're less secure.

The "initialization" doesn't return the clientSecret , the paymentIntent call does. You don't need to generate the secret, Stripe does this for you.

Exactly how to do this is up to you, but here's an example.

On the server:

1. Receive the client's order, and generate the secret. You're already doing that.
   EG: const {client_secret} = await stripe.paymentIntents.create(intentParams)
2. Store the secret in your DB with the client's order.
3. Return the secret to the client.

On the client:

4. Send the secret through the confirmPayment call.
5. Maybe let the customer know their order has been received? Whatever you think is appropriate now.

On the server:

6. Await a webhook POST from Stripe. This request should include the client secret. https://stripe.com/docs/webhooks/go-live
7. Verify the POST is from Stripe using the webhook secret from your account (not the same as your private key!)
8. Look up the order in your DB using the secret.
9. Update the order in your DB as paid for, and remove it from pending, however you have it set up.
10. Notify the client somehow. Through a websocket, an email, whatever makes sense in your application.