Node.js Stripe-未捕获（承诺中）集成错误：Stripe.confirmCardPayment的值无效

控制台错误消息：

v3:1未捕获（承诺中）集成错误：stripe.confirmCardPayment intent secret的值无效：值应为${id}\u secret${secret}形式的客户端机密。您指定：。

您可以自己在此处看到错误：

获取错误的说明：从主页上单击

MenúDiari

->

Demanar

->前3个按钮中的任意一个->从每个类别中选择一个单选按钮，然后单击

Afegeix i paga

->

Pagar

->第一个输入：“随机名称”，第二个输入：“Recolida tenda-Cabrera de Mar”，第四个输入：“123”

然后，根据Stripe文档，您可以使用以下数据填充payment元素，以实现成功的测试支付

签证号码：'4242'

MM/AA:'04/24'

CVC:“123”

一旦按下

Pagar

，您将在控制台中得到我要求的

IntegrationError

我正在尝试使用Heroku部署React.js+Node.js+Expressweb

我一直在遵循这个指南，尽管我不确定这是否是我所需要的。

网络是一家餐馆。他们想推销不同的午餐计划。我正在尝试使用条带实现付款。当我在本地主机上测试应用程序时，一切正常。然而，当我试图部署它时，有些东西坏了

我猜我的

server.js

或

package.json

文件一定出了问题。。。主要的问题是我在后端是一个彻头彻尾的傻瓜

在我开始向服务器发出请求之前，一切都按预期进行（我仍然有一些控制台日志用于开发）

这是我的server.js

const { createServer } = require('https');
const express = require('express');
const compression = require('compression');
const morgan = require('morgan');
const path = require('path');

const normalizePort = (port) => parseInt(port, 10);
const PORT = normalizePort(process.env.PORT || 5000);

const app = express();
const dev = app.get('env') !== 'production';

if (!dev) {
    app.disable('x-powered-by');
    app.use(compression()); // "Will handle a few things for us... (?)"
    app.use(morgan('common'));

    app.use(express.static(path.join(__dirname, 'build')));

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
    });
}

const server = createServer(app);

const { resolve } = require('path');

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.use(express.json());

const calculateOrderAmount = (items) => {
    console.log(items);
    let drinksTotal = 0;
    const { water, cola, colaZero, beer, lemonFanta, orangeFanta } = items.drinks;
    drinksTotal += water * 100;
    drinksTotal += (cola + colaZero + lemonFanta + orangeFanta) * 130;
    drinksTotal += beer * 150;

    let foodTotal = 0;
    foodTotal += items.primerSegonCount * 895;
    foodTotal += items.dosPrimersCount * 795;
    foodTotal += items.platPostresCount * 695;

    grandTotal = parseInt(drinksTotal + foodTotal);

    console.log(grandTotal);

    return grandTotal;
};

app.post('/create-payment-intent', async(req, res) => {
    const { items } = req.body;
    console.log(items);
    // Create a PaymentIntent with the order amount and currency
    const paymentIntent = await stripe.paymentIntents.create({
        amount: calculateOrderAmount(items),
        currency: 'eur'
    });
    res.send({
        clientSecret: '123_secret_123' //paymentIntent.client_secret
    });
});

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(PORT, (err) => {
    if (err) throw err;

    console.log('Server started on port ' + PORT);
});

const express = require('express');
const path = require('path');
const app = express();

const { resolve } = require('path');

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.use(express.static(path.join(__dirname, 'build')));
app.use(express.json());

// app.use(express.json());
const calculateOrderAmount = (items) => {
    let drinksTotal = 0;
    const { water, cola, colaZero, beer, lemonFanta, orangeFanta } = items.drinks;
    drinksTotal += water * 100;
    drinksTotal += (cola + colaZero + lemonFanta + orangeFanta) * 130;
    drinksTotal += beer * 150;

    let foodTotal = 0;
    foodTotal += items.primerSegonCount * 895;
    foodTotal += items.dosPrimersCount * 795;
    foodTotal += items.platPostresCount * 695;

    grandTotal = parseInt(drinksTotal + foodTotal);

    console.log(grandTotal);

    return grandTotal;
};

app.post('/create-payment-intent', async(req, res) => {
    const { items } = req.body;
    // Create a PaymentIntent with the order amount and currency
    const paymentIntent = await stripe.paymentIntents.create({
        amount: 100, //calculateOrderAmount(items),
        currency: 'eur'
    });
    res.send({
        clientSecret: paymentIntent.client_secret
    });
});

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

这是我的package.json

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "engine": {
        "node": "12.16.3",
        "npm": "6.14.5"
    },
    "dependencies": {
        "@stripe/react-stripe-js": "^1.1.2",
        "@stripe/stripe-js": "^1.7.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "axios": "^0.19.2",
        "boostrap": "^2.0.0",
        "bootstrap": "^4.5.0",
        "compression": "^1.7.4",
        "concurrently": "^5.2.0",
        "cors": "^2.8.5",
        "dotenv": "^8.2.0",
        "emailjs-com": "^2.4.1",
        "express": "^4.17.1",
        "morgan": "^1.10.0",
        "node-sass": "^4.14.1",
        "nodemon": "^2.0.4",
        "react": "^16.13.1",
        "react-bootstrap": "^1.0.1",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.0",
        "react-scripts": "3.4.1",
        "react-scroll": "^1.7.16",
        "react-stripe-checkout": "^2.6.3",
        "reactstrap": "^8.5.1",
        "stripe": "^8.67.0",
        "uuid": "^8.2.0",
        "uuidv4": "^6.1.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "start-dev": "nodemon server.js",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "dev": "concurrently \"npm run-script start-dev\" \"npm run-script start\"",
        "heroku-postbuild": "npm install && npm run build"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [">0.2%", "not dead", "not op_mini all"],
        "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
    },
    "homepage": "."
}

这是负责支付的React.js文件

import React, { useState, useEffect } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

// Bootstrap
import { Container, Row, Col, Button, Spinner, Form } from 'react-bootstrap';

export default function CheckoutForm(props) {
    const [ succeeded, setSucceeded ] = useState(false);
    const [ error, setError ] = useState(null);
    const [ processing, setProcessing ] = useState(false);
    const [ disabled, setDisabled ] = useState(true);
    const [ clientSecret, setClientSecret ] = useState('');
    const stripe = useStripe();
    const elements = useElements();
    useEffect(() => {
        console.log('inside use Effect');
        // Create PaymentIntent as soon as the page loads
        window
            .fetch('/create-payment-intent', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    items: {
                        drinks: props.drinksOrdered,
                        primerSegonCount: props.primerSegonCount,
                        dosPrimersCount: props.dosPrimersCount,
                        platPostresCount: props.platPostresCount
                    }
                })
            })
            .then((res) => {
                console.log(res);
                return res.json();
            })
            .then((data) => {
                console.log(data.clientSecret);
                console.log(data);
                setClientSecret(data.clientSecret);
            });
    }, []);

    const cardStyle = {
        base: {
            backgroundColor: 'white',
            color: 'grey',
            fontFamily: 'Montserrat, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#c6c6c6'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        },
        complete: {
            color: 'green',
            iconColor: 'green'
        }
    };

    const handleCardChange = async (event) => {
        // Listen for changes in the CardElement
        // and display any errors as the customer types their card details
        setDisabled(event.empty);
        setError(event.error ? event.error.message : '');
    };

    const handleSubmit = async (ev) => {
        ev.preventDefault();
        setProcessing(true);
        const payload = await stripe.confirmCardPayment(clientSecret, {
            payment_method: {
                card: elements.getElement(CardElement),
                billing_details: {
                    name: ev.target.name.value
                }
            }
        });

        // Handle Error
        if (payload.error) {
            setError(`Payment failed ${payload.error.message}`);
            setProcessing(false);
        } else if (payload.paymentIntent.status === 'succeeded') {
            // If payment succeeded, send eMail with details
            props.sendEmail();
            setSucceeded(true);
            setError(null);
            setTimeout(() => {
                window.location.replace('https://www.cateringroser.cat');
            }, 10000);
        }
    };

事先非常感谢你

---

杰拉德

嗯，正如我猜的那样，我必须自己解决这个问题。：-）

如果你回到我原来的帖子，你将能够看到我的

server.js

、

package.json

和

CheckoutForm.jsx

文件的代码

CheckoutForm.jsx

正常。在下面，您可以看到以下代码的修改版本：

server.js

const { createServer } = require('https');
const express = require('express');
const compression = require('compression');
const morgan = require('morgan');
const path = require('path');

const normalizePort = (port) => parseInt(port, 10);
const PORT = normalizePort(process.env.PORT || 5000);

const app = express();
const dev = app.get('env') !== 'production';

if (!dev) {
    app.disable('x-powered-by');
    app.use(compression()); // "Will handle a few things for us... (?)"
    app.use(morgan('common'));

    app.use(express.static(path.join(__dirname, 'build')));

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
    });
}

const server = createServer(app);

const { resolve } = require('path');

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.use(express.json());

const calculateOrderAmount = (items) => {
    console.log(items);
    let drinksTotal = 0;
    const { water, cola, colaZero, beer, lemonFanta, orangeFanta } = items.drinks;
    drinksTotal += water * 100;
    drinksTotal += (cola + colaZero + lemonFanta + orangeFanta) * 130;
    drinksTotal += beer * 150;

    let foodTotal = 0;
    foodTotal += items.primerSegonCount * 895;
    foodTotal += items.dosPrimersCount * 795;
    foodTotal += items.platPostresCount * 695;

    grandTotal = parseInt(drinksTotal + foodTotal);

    console.log(grandTotal);

    return grandTotal;
};

app.post('/create-payment-intent', async(req, res) => {
    const { items } = req.body;
    console.log(items);
    // Create a PaymentIntent with the order amount and currency
    const paymentIntent = await stripe.paymentIntents.create({
        amount: calculateOrderAmount(items),
        currency: 'eur'
    });
    res.send({
        clientSecret: '123_secret_123' //paymentIntent.client_secret
    });
});

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(PORT, (err) => {
    if (err) throw err;

    console.log('Server started on port ' + PORT);
});

const express = require('express');
const path = require('path');
const app = express();

const { resolve } = require('path');

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.use(express.static(path.join(__dirname, 'build')));
app.use(express.json());

// app.use(express.json());
const calculateOrderAmount = (items) => {
    let drinksTotal = 0;
    const { water, cola, colaZero, beer, lemonFanta, orangeFanta } = items.drinks;
    drinksTotal += water * 100;
    drinksTotal += (cola + colaZero + lemonFanta + orangeFanta) * 130;
    drinksTotal += beer * 150;

    let foodTotal = 0;
    foodTotal += items.primerSegonCount * 895;
    foodTotal += items.dosPrimersCount * 795;
    foodTotal += items.platPostresCount * 695;

    grandTotal = parseInt(drinksTotal + foodTotal);

    console.log(grandTotal);

    return grandTotal;
};

app.post('/create-payment-intent', async(req, res) => {
    const { items } = req.body;
    // Create a PaymentIntent with the order amount and currency
    const paymentIntent = await stripe.paymentIntents.create({
        amount: 100, //calculateOrderAmount(items),
        currency: 'eur'
    });
    res.send({
        clientSecret: paymentIntent.client_secret
    });
});

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

package.json

{
    "name": "my-app",
    "version": "1.0.0",
    "description": "take away restaurant app",
    "private": true,
    "engines": {
        "node": "12.x"
    },
    "dependencies": {
        "@stripe/react-stripe-js": "^1.1.2",
        "@stripe/stripe-js": "^1.7.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "boostrap": "^2.0.0",
        "bootstrap": "^4.5.0",
        "concurrently": "^5.2.0",
        "cors": "^2.8.5",
        "dotenv": "^8.2.0",
        "emailjs-com": "^2.4.1",
        "express": "^4.17.1",
        "node-sass": "^4.14.1",
        "nodemon": "^2.0.4",
        "react": "^16.13.1",
        "react-bootstrap": "^1.0.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1",
        "react-scroll": "^1.7.16",
        "react-stripe-checkout": "^2.6.3",
        "reactstrap": "^8.5.1",
        "stripe": "^8.67.0"
    },
    "scripts": {
        "start": "node server.js",
        "start-dev": "nodemon server.js",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "dev": "concurrently \"npm run-script start-dev\" \"npm run-script start\"",
        "heroku-postbuild": "npm install && npm run build"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [">0.2%", "not dead", "not op_mini all"],
        "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
    }
}

我最终使用了我在server.js上知道的东西。我删除了所有我不懂的东西，保留了原始代码

最重要的事情之一是了解使用node/express部署应用程序时会发生什么（或者至少我认为我理解）

首先，我认为我需要分别部署前端和后端，然后以某种方式将它们链接起来

（我认为）我真正需要做的是从服务器提供前端文件。在我第一次尝试部署时，我实际上是从React Direct为他们提供服务，所以我得到的只是一幅交互式画作，在其中我可以导航，但没有机会与服务器通信（因为它没有连接）

解决方案是什么？

提供

/build

文件夹及其文件，如中所述

删除

“代理”：http://localhost:5000“

来自

package.json

。同时删除

“主页”：“xxx”

（如果您有）

添加

“start”：“node server.js”

到您的

包.json

。您希望通过节点打开web

我还按照中的建议添加了一个

Procfile

。文件中只有以下代码：

web:node server.js

现在这才有意义。我可以接受付款并与我的服务器通信

---

附带说明：我没有删除我的server.js中任何特定于条带的代码，因为它可能会帮助其他使用条带的用户处理付款。

在functions文件夹的index.js中使用密钥而不是公钥