如何在您的条带 webhook header 中获取条带签名

Question

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>
)
}

Answer 1

You're confusing a webhook and the route on your server that charges the token. They're entirely separate things.

Your frontend code uses (a deprecated Stripe Checkout integration , the StripeCheckout React component there is an old library using an old version of Stripe) to create a Token object representing the customer's card details. The intention then is that you POST that token to your backend and your backend route will call the Stripe API to create a charge: https://stripe.com/docs/payments/accept-a-payment-charges#web-create-charge

The actual code in your backend that you POST to though seems to not be that, it's a webhook endpoint. That's a separate concept, Stripe would send a request to you when a payment succeeds and will include that signature header. But here the request you are processing is coming from your own frontend code, it's not a weboook and it has no Stripe signature.