This is the first time I'm integrating stripe checkout but I keep getting stripe-signature as undefined.
For my backend I am using firebase cloud functions (without express) and for my frontend I am using react-stripe-checkout.
Is there some kind of header I need to send in order to receive that on the backend?
The only header I am sending now is:
'Content-Type': 'application/json',
backend code:
// @ts-ignore const stripe = new Stripe('sk_test_123'); export const stripeHook = functions.https.onRequest(async (request, response) => { cors(request, response, async () => { const sig = request.headers['stripe-signature']; // this is always undefined // let sig = request.get('stripe-signature'); //also tried streaming const endpointSecret = 'whsec_123'; let event; try { event = stripe.webhooks.constructEvent(request.rawBody.toString('utf8'), sig, endpointSecret); } catch (err) { console.log(err) response.send({status: 'error'}); return; } // Handle Type of webhook const intent:any = event.data.object; switch (event.type) { case 'payment_intent.succeeded': console.log("Succeeded:", intent.id); break; case 'payment_intent.payment_failed': const message = intent.last_payment_error && intent.last_payment_error.message; console.log('Failed:', intent.id, message); break; } response.send({status: 'success'}); }) }) fronend code:
import React, {useState, useEffect} from 'react'; import StripeCheckout from 'react-stripe-checkout'; import { ToastContainer, toast } from "react-toastify"; import 'react-toastify/dist/ReactToastify.css'; import api from '../../services/apiMiddleware'; function Assessment(props: any) { const [product] = React.useState({ name: "Subscription", price: 99.99, description: "Monthly Subscription" }); const handleToken = async (token: string) => { const response = await api.post( "stripeHook", { token, product } ); if (response.status === "success") { toast("Success! Check email for details", { type: "success" }); } else { toast("Something went wrong", { type: "error" }); } } return ( <div> <div className="paymentButtonTextWrapper"> <ToastContainer /> <div className="paymentButtonWrapper"> <StripeCheckout // @ts-ignore token={handleToken} stripeKey="pk_test_123" /> </div> </div> </div> ) } 
