Question

我正在使用React-Static构建一个小型网站。网站全部建成，但我需要整合基本的捐赠功能。我有几个问题让我难过。按照Thomasz Jancuk的指南here，我遇到了一些障碍。

1。）当页面最初以html格式加载时，会创建该按钮。然而，一旦反应开始它删除我的按钮。我想我需要通过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>

2。）如果我强制一个按钮并单击它，我会通过最初的Stripe Checkout内容并将其发送到webtask.io网址。但是我收到了一个错误：

"code": 500,
"error": "Script generated an unhandled synchronous exception.",
"details": "TypeError: Cannot read property 'stripeToken' of undefined"

这是我的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>');
    });
};

Answer 1

不要从ctx中获取stripeToken，而是尝试使用req.body.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>');
    });
};

Answer 2

导出快速应用程序（而不是简单功能）时，您需要使用参数--meta wt-compiler=webtask-tools/express明确定义programming model（或者可以使用webtask-tools）

因此最终的命令行变为：

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

使用Strt的Webtask.io进行React-Static

2 个答案: