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

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

Answer 2

了解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

Answer 3

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

使用React和Express Js进行条带检查

3 个答案: