未捕获（承诺中）IntegrationError：stripe.confirmCardPayment 意图秘密的值无效

Question

尝试使用 stripe 结账时出现此错误：

未捕获（承诺中）IntegrationError：stripe.confirmCardPayment 意图秘密的值无效：值应该是 ${id}秘密${secret} 形式的客户端秘密。您指定：......

我在我的网站上使用 stripe 并使用 firebase 函数实现它。当我在本地运行我的网站和 firebase 函数时，我没有收到此错误，但是当我将其放在我的 firebase 托管上时，它不起作用，并且收到该错误。在本地，我将运行这些命令：npm start启动网站，然后在函数文件夹中 cd ，然后运行npm run serve​​. 我怎样才能解决这个问题？这是使用 firebase 函数运行的 index.js 文件： index.js

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const stripe = require('stripe')(secret_key)
const app = express();
app.use(cors({
    origin: true
}));
app.use(express.json());

app.post('/payments/create', async (req, res) => {
    try {
        const { amount, shipping } = req.body;
        const paymentIntent = await stripe.paymentIntents.create({
            shipping,
            amount,
            currency: 'eur'
        });

        res
        .status(200)
        .send(paymentIntent.client_secret);
    }catch(err) {
        res
        .status(500)
        .json({
            statusCode: 500,
            message: err.message
        });
    }
})

app.get('*', (req, res) => {
    res
    .status(404)
    .send('404, Not Found');
});

exports.api = functions.https.onRequest(app);

这是package.json

  {
"name": "evelinas-art-store",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@material-ui/core": "^4.11.2",
  "@stripe/react-stripe-js": "^1.1.2",
  "@stripe/stripe-js": "^1.11.0",
  "@testing-library/jest-dom": "^5.11.6",
  "@testing-library/react": "^11.2.2",
  "@testing-library/user-event": "^12.6.0",
  "axios": "^0.21.1",
  "ckeditor4-react": "^1.3.0",
  "firebase": "^8.2.1",
  "moment": "^2.29.1",
  "node-sass": "^4.14.1",
  "react": "^17.0.1",
  "react-country-region-selector": "^3.0.1",
  "react-dom": "^17.0.1",
  "react-redux": "^7.2.2",
  "react-router-dom": "^5.2.0",
  "react-scripts": "4.0.1",
  "redux": "^4.0.5",
  "redux-logger": "^3.0.6",
  "redux-persist": "^6.0.0",
  "redux-saga": "^1.1.3",
  "redux-thunk": "^2.3.0",
  "reselect": "^4.0.0",
  "web-vitals": "^0.2.4"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
 }
}

具有条纹付款的文件

  import React, { useState, useEffect } from 'react';
  import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
  import FormInput from './../forms/FormInput';
  import Button from './../forms/Button';
  import { CountryDropdown } from 'react-country-region-selector';
  import { apiInstance } from './../../Utils';
  import { selectCartTotal, selectCartItemsCount, selectCartItems } from './../../redux/Cart/cart.selectors';
  import { saveOrderHistory } from './../../redux/Orders/orders.actions';
  import { createStructuredSelector } from 'reselect';
  import { useSelector, useDispatch } from 'react-redux';
  import { useHistory } from 'react-router-dom';
  import './styles.scss';

  const initialAddressState = {
    line1: '',
    line2: '',
    city: '',
    state: '',
    postal_code: '',
    country: '',
  };

  const mapState = createStructuredSelector({
    total: selectCartTotal,
    itemCount: selectCartItemsCount,
    cartItems: selectCartItems,
  });

  const PaymentDetails = () => {
    const stripe = useStripe();
    const elements = useElements();
    const history = useHistory();
    const { total, itemCount, cartItems } = useSelector(mapState);
    const dispatch = useDispatch();
    const [billingAddress, setBillingAddress] = useState({ ...initialAddressState });
    const [shippingAddress, setShippingAddress] = useState({ ...initialAddressState });
    const [recipientName, setRecipientName] = useState('');
     const [nameOnCard, setNameOnCard] = useState('');

    useEffect(() => {
      if (itemCount < 1) {
        history.push('/dashboard');
      }

    }, [itemCount]);

    const handleShipping = evt => {
      const { name, value } = evt.target;
      setShippingAddress({
        ...shippingAddress,
        [name]: value
      });
    };

    const handleBilling = evt => {
      const { name, value } = evt.target;
      setBillingAddress({
        ...billingAddress,
        [name]: value
      });
    }

    const handleFormSubmit = async evt => {
      evt.preventDefault();
      const cardElement = elements.getElement('card');

      if (
        !shippingAddress.line1 || !shippingAddress.city ||
        !shippingAddress.state || !shippingAddress.postal_code ||
        !shippingAddress.country || !billingAddress.line1 ||
        !billingAddress.city || !billingAddress.state ||
        !billingAddress.postal_code || !billingAddress.country ||
        !recipientName || !nameOnCard
      ) {
        return;
      }

      apiInstance.post('/payments/create', {
        amount: total * 100,
        shipping: {
          name: recipientName,
          address: {
            ...shippingAddress
          }
        }
      }).then(({ data: clientSecret }) => {

        stripe.createPaymentMethod({
          type: 'card',
          card: cardElement,
          billing_details: {
            name: nameOnCard,
            address: {
              ...billingAddress
            }
          }
        }).then(({ paymentMethod }) => {

          stripe.confirmCardPayment(clientSecret, {
            payment_method: paymentMethod.id
          })
          .then(({ paymentIntent }) => {

            const configOrder = {
              orderTotal: total,
              orderItems: cartItems.map(item => {
                const { documentID, productThumbnail, productName,
                  productPrice, quantity } = item;

                return {
                  documentID,
                  productThumbnail,
                  productName,
                  productPrice,
                  quantity
                };
              })
            }

            dispatch(
              saveOrderHistory(configOrder)
            );
          });

        })


      });

    };

    const configCardElement = {
      iconStyle: 'solid',
      style: {
        base: {
          fontSize: '16px'
        }
      },
      hidePostalCode: true
    };

    return (
      <div className="paymentDetails">
        <form onSubmit={handleFormSubmit}>

          <div className="group">
            <h2>
              Shipping Address
            </h2>

            <FormInput
              required
              placeholder="Recipient Name"
              name="recipientName"
              handleChange={evt => setRecipientName(evt.target.value)}
              value={recipientName}
              type="text"
            />

            <FormInput
              required
              placeholder="Line 1"
              name="line1"
              handleChange={evt => handleShipping(evt)}
              value={shippingAddress.line1}
              type="text"
            />

            <FormInput
              placeholder="Line 2"
              name="line2"
              handleChange={evt => handleShipping(evt)}
              value={shippingAddress.line2}
              type="text"
            />

            <FormInput
              required
              placeholder="City"
              name="city"
              handleChange={evt => handleShipping(evt)}
              value={shippingAddress.city}
              type="text"
            />

            <FormInput
              required
              placeholder="State"
              name="state"
              handleChange={evt => handleShipping(evt)}
              value={shippingAddress.state}
              type="text"
            />

            <FormInput
              required
              placeholder="Postal Code"
              name="postal_code"
              handleChange={evt => handleShipping(evt)}
              value={shippingAddress.postal_code}
              type="text"
            />

            <div className="formRow checkoutInput">
              <CountryDropdown
                required
                onChange={val => handleShipping({
                  target: {
                    name: 'country',
                    value: val
                  }
                })}
                value={shippingAddress.country}
                valueType="short"
              />
            </div>

          </div>

          <div className="group">
            <h2>
              Billing Address
            </h2>

            <FormInput
              required
              placeholder="Name on Card"
              name="nameOnCard"
              handleChange={evt => setNameOnCard(evt.target.value)}
              value={nameOnCard}
              type="text"
            />

            <FormInput
              required
              placeholder="Line 1"
              name="line1"
              handleChange={evt => handleBilling(evt)}
              value={billingAddress.line1}
              type="text"
            />

            <FormInput
              placeholder="Line 2"
              name="line2"
              handleChange={evt => handleBilling(evt)}
              value={billingAddress.line2}
              type="text"
            />

            <FormInput
              required
              placeholder="City"
              name="city"
              handleChange={evt => handleBilling(evt)}
              value={billingAddress.city}
              type="text"
            />

            <FormInput
              required
              placeholder="State"
              name="state"
              handleChange={evt => handleBilling(evt)}
              value={billingAddress.state}
              type="text"
            />

            <FormInput
              required
              placeholder="Postal Code"
              name="postal_code"
              handleChange={evt => handleBilling(evt)}
              value={billingAddress.postal_code}
              type="text"
            />

            <div className="formRow checkoutInput">
              <CountryDropdown
                required
                onChange={val => handleBilling({
                  target: {
                    name: 'country',
                    value: val
                  }
                })}
                value={billingAddress.country}
                valueType="short"
              />
            </div>

          </div>

          <div className="group">
            <h2>
              Card Details
            </h2>

            <CardElement
              options={configCardElement}
            />
          </div>

          <Button
            type="submit"
          >
            Pay Now
          </Button>

        </form>
      </div>
    );
  }

  export default PaymentDetails;```

Answer 1

根据stripe.PaymentIntent.create()的文档 https://stripe.com/docs/api/ payment_intents/create

你需要通过这个：

import stripe
stripe.api_key = "sk_test_51I5EU6DbwDQYqmKoHRVYU2jw4jtzB8aQa6byuVIMyfDvYl3lxHOzmIRUZ6SabMmk1TV0jNu4w9akIgPY4E3krUbj00ewcroCvC"

  const PaymentIntentVar =  stripe.PaymentIntent.create(
  amount=2000,
  currency="usd",
  payment_method_types=["card"],
)

我猜你有错字吧？付款意向 ? 之后请尝试：

console.log(PaymentIntentVar)

在index.js 中查看是否得到正确的响应？请您分享一下！

同样在“具有条纹付款的文件”中：

代替 ：

const cardElement = elements.getElement('card');

和这个：

stripe.createPaymentMethod({
          type: 'card',
          card: cardElement,
          billing_details: {
            name: nameOnCard,
            address: {
              ...billingAddress
            }
          }
        })

做这个 ：

stripe.createPaymentMethod({
          type: 'card',
          card: elements.getElement(CardElement),
          billing_details: {
            name: nameOnCard,
            address: {
              ...billingAddress
            }
          }
        })

还可以通过前端和后端的 console.log() 检查您是否在前端和后端传递了正确的公钥和密钥

也可以使用Stripe，试试这个

import {loadStripe} from '@stripe/stripe-js';

const stripe = loadStripe('secret_key');