Reactjs 使用带条带的Webtask.io进行静态响应

我正在建立一个小网站使用静态反应。该网站是所有建成，但我需要集成基本的捐赠功能。我有几个问题难倒了。在托马斯兹·扬库克的指导下，我遇到了一些障碍

1.）当页面最初加载为html时，将创建该按钮。然而，一旦react启动，它就会移除我的按钮。我想我需要通过React而不是当前的内联来集成表单JS

    <form action="WEBTASK.IO_URL" method="POST">
      <script
        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key={my_public_stripe_key}
        data-image=""
        data-name=""
        data-description=""
        data-amount="2500"
        data-zip-code="true"
        data-currency="usd"
        data-locale="auto"
        data-panel-label="Donate"
        data-label="">
      </script>
    </form>

这是我的webtask.io脚本。我已经包括了NPM模块和正确的秘密

'use latest';

import bodyParser from 'body-parser';
import stripe from 'stripe';

bodyParser.urlencoded();

module.exports = function (ctx, req, res) {
    stripe(ctx.secrets.stripeSecretKey).charges.create({
        amount: 2500,
        currency: 'usd',
        source: ctx.body.stripeToken,
        description: 'Contribute to the Campaign'
    }, function (error, charge) {
        var status = error ? 400 : 200;
        var message = error ? error.message : 'Thank You for your Contribution!'; 
        res.writeHead(status, { 'Content-Type': 'text/html' });
        return res.end('<h1>' + message + '</h1>');
    });
};

“使用最新版本”；
从“body parser”导入bodyParser；
从“条带”导入条带；
bodyParser.urlencoded（）；
module.exports=功能（ctx、req、res）{
stripe（ctx.secrets.stripeSecretKey）.charges.create({
金额：2500，
货币：美元，
来源：ctx.body.stripeToken，
描述：“为活动贡献力量”
}，功能（错误，充电）{
var状态=错误？400:200；
var message=error？error.message:“感谢您的贡献！”；
res.writeHead（状态，{'Content-Type'：'text/html'}）；
返回res.end（“”+消息+“”）；
});
};

尝试使用req.body.stripeToken，而不是从ctx获取stripeToken

module.exports = function (ctx, req, res) {
    stripe(ctx.secrets.stripeSecretKey).charges.create({
        amount: 2500,
        currency: 'usd',
        source: req.body.stripeToken,
        description: 'Contribute to the Campaign'
    }, function (error, charge) {
        var status = error ? 400 : 200;
        var message = error ? error.message : 'Thank You for your Contribution!'; 
        res.writeHead(status, { 'Content-Type': 'text/html' });
        return res.end('<h1>' + message + '</h1>');
    });
};

module.exports=功能（ctx、req、res）{
stripe（ctx.secrets.stripeSecretKey）.charges.create({
金额：2500，
货币：美元，
来源：req.body.stripeToken，
描述：“为活动贡献力量”
}，功能（错误，充电）{
var状态=错误？400:200；
var message=error？error.message:“感谢您的贡献！”；
res.writeHead（状态，{'Content-Type'：'text/html'}）；
返回res.end（“”+消息+“”）；
});
};

导出express应用程序（与简单函数相反）时，需要使用参数

--meta-wt-compiler=webtask-tools/express显式定义（也可以使用）

因此，最后的命令行变成：

$ wt create index.js --meta wt-compiler=webtask-tools/express

$ wt create index.js --meta wt-compiler=webtask-tools/express