首页 文章

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

提问于
浏览 次
1

我试图解决以下问题 . 在前端，我使用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);
    });

}

我需要更改此逻辑以让客户保存数据，但只有在完成条带检查并为服务付款时才能这样做？

reactjs express stripe-payments

3 回答

  • 1

    重要的是要知道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

    回复于
  • 0
    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)
})
    回复于
  • 0

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

    回复于

相关问题