使用 React 和 Express Js 进行条带结帐

Question

我正在尝试解决以下问题。在前端，我使用 React 并安装了 React-Stripe-Checkout 包。我创建了一个 Checkout.js 文件，然后将其导入 FromContainer- 这是 Checkout.js 的逻辑

onToken(token) {
    fetch('/postajob', {
        method: 'POST',
        body: JSON.stringify(token),
    }).then(response => {
        response.json().then(data => {
            alert(`We are in business, ${data.email}`);
        });
    });
}
render() {
    return (
        <StripeCheckout
            name="Teacherjobs.io"
            description="Job Post on Teacherjobs.io"
            ComponentClass="div"
            panelLabel="Post Job"
            amount={1000}
            currency="USD"
            stripeKey="pk_test_vfjVQjaiduhHGt9OY3lUB1yz"
            locale="auto"
            email="contact@teacherjobs.io"
            zipCode={false}
            alipay={true}
            allowRememberMe
            token={this.onToken}
            reconfigureOnUpdate={false}
            triggerEvent="onClick">

            <button
                className="submitbtn"
                onClick={this.handleFormSubmit}
                type="submit"
                value="Submit">Submit
            </button>

        </StripeCheckout>
    )
}

在我的 FormContainer 中，我导入 Checkout.js，这是一个用于保存数据的提交按钮。因此，通过单击按钮，您可以保存表单中给出的信息（const formPayload）。

handleFormSubmit(e) {
    e.preventDefault();

    const formPayload = {
        jobTitle: this.state.jobTitle,
        country: this.state.location,
        city: this.state.city,
        apply: this.state.apply,
        categories: this.state.categories,
        description: this.state.description

    };
    // post a job - logic coming from services
    jobsService.postJob(formPayload, (err, result) => {
        if(result) {
            console.log('job posted');
            console.log('here');
        } else {
            alert('Could not post a job');
        }
    });

此外，我有一个基于 Express 路由器的 Api 来处理发布请求

 router.route('/postajob')
    .post((req, res) => {
        console.log(req.body);
        JobList.insertOne(req.body, (err,  stat) => {
            if(err) {
                res.status(500).send({ msg: 'Job upload failed' });
            } else  {
                res.status(202).send({ msg: 'Job posted successfully' });
            }
        });
    });

还有一个用于 FormContainer 中 postJob 功能的 Services 文件夹。

function postJob(jobInfo, callback) {
console.log(jobInfo);
fetch('/api/postajob', {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(jobInfo)
})
    .then((response) => {
        response.json().then((data) => {
            console.log(data);
            if (response.ok) {
                callback(null, data);
            } else {
                callback({});
            }
        });
    })
    .catch((error) => {
        console.log(error);
    });

}

我必须在此逻辑中进行哪些更改才能让客户保存数据，但前提是完成条带结帐并支付服务费用？

Answer 1

router.post('/stripe', requireAuth, async (req, res) => {
    const { token } = req.body
    const charge = await stripe.charges.create({
        amount: 10000,//100€
        currency: 'EUR',
        source: token.id, // obtained with Stripe.js in the frontend
    })

    console.log("charge", charge)
    //Aqui el cargo ya esta realizado con exito.
    //We return a confirmation so that the process continues in the frontend.
    res.send(charge)
})

Answer 2

您的前端仅生成令牌和支付所需的所有信息。当请求到达您的后端时，您必须使用您的 Stripe 密钥（而您将在前端使用 Stripe 公钥）向 Stripe API 发出另一个请求。如果您需要有关此主题的进一步指导，本文介绍了设置 React with Express and Stripe 所需的最少步骤。它还带有一个开源样板项目。

Answer 3

重要的是要知道 Stripe Checkout 不会产生费用，它只会产生卡代币。您在/postajob 的后端代码需要读取从前端发送的令牌，然后尝试创建收费，例如：

router.route('/postajob') .post((req, res) => { stripe.charges.create({ amount: 2000, currency: "usd", source: req.token, description: "Charge for jenny.rosen@example.com" }, function(err, charge) { // asynchronously called, check if charge was created successfully // ... // Insert job, or return error to frontend }); });

更多信息在这里： https://stripe.com/docs/api/node#create_charge

这里有一个使用 Express + Checkout 的完整示例： https://stripe.com/docs/checkout/express