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

Question

这是我第一次集成条带结帐，但我不断收到条带签名未定义。

对于我的后端，我使用的是 firebase 云函数（没有 express），对于我的前端，我使用的是 react-stripe-checkout。

是否需要发送某种标头才能在后端接收该标头？

我现在发送的唯一标头是：

“内容类型”：“应用程序/json”，

后端代码：

    // @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'});
    })
})

前端代码：

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

您混淆了 webhook 和服务器上收取令牌的路由。它们是完全不同的东西。

您的前端代码使用（deprecated Stripe Checkout integration，StripeCheckout React 组件，还有一个使用旧版本 Stripe 的旧库）来创建代表客户卡详细信息的 Token 对象。然后的意图是您将该令牌发布到您的后端，并且您的后端路由将调用 Stripe API 来创建费用：https://stripe.com/docs/payments/accept-a-payment-charges#web-create-charge

您发布到的后端中的实际代码似乎并非如此，它是一个 webhook 端点。这是一个单独的概念，当付款成功时，Stripe 会向您发送一个请求，并将包含该签名标头。但是这里您正在处理的请求来自您自己的前端代码，它不是网络书，也没有 Stripe 签名。