[英]Getting IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string
[英]Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret
嘗試使用條紋結帳時出現此錯誤:
未捕獲(承諾中)IntegrationError:stripe.confirmCardPayment 意圖秘密的值無效:值應該是形式為 ${id}秘密${secret} 的客戶端秘密。 您指定:......
我在我的網站上使用了條帶,並使用 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;```
根據文檔https://stripe.com/docs/api/payment_intents/create for stripe.PaymentIntent.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');
以下是可能的情況以及我如何理解配置。
所以首先你嘗試從前端付款
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: 'card',
card: cardElement,
billing_details: {
name: `${stateProps.userProfile.firstName} ${stateProps.userProfile.lastName}`,
email: stateProps.user.email
}
});
從該 paymentMethod 中,您檢索 paymentMethod.Id 並將其發送到您的服務器以進行付款 - 此時我們假設付款將起作用並且不需要 3d 安全。
就我而言,我需要的是 paymentMethod.Id,因為我已將所有賬單明細放在不同的 object 中。
在后端,這是我使用 C#
try
{
if (request.PaymentMethodId != null)
{
var createOptions = new PaymentIntentCreateOptions
{
PaymentMethod = request.PaymentMethodId,
Amount = request.total,
Currency = "gbp",
ConfirmationMethod = "manual",
Confirm = true,
//ReturnUrl = "",
Metadata = new Dictionary<string, string>
{
{ "OrderId", request.orderId.ToString() },
}
};
paymentIntent = paymentIntentService.Create(createOptions);
}
if (request.PaymentIntentId != null)
{
var confirmOptions = new PaymentIntentConfirmOptions { };
paymentIntent = paymentIntentService.Confirm(
request.PaymentIntentId,
confirmOptions
);
}
}
catch (StripeException e)
{
return new ViewModels.ResponseObject
{
Success = false,
Title = "An Error Occcured.",
Message = e.Message,
Data = e.Message
};
}
if (paymentIntent.Status == "requires_action" && paymentIntent.NextAction.Type == "use_stripe_sdk")
{
return new ViewModels.ResponseObject
{
Success = false,
Data = new
{
requires_action = true,
payment_intent_client_secret = paymentIntent.ClientSecret
},
Title = "Requires Action",
Message = "Requires Action"
};
}
else if (paymentIntent.Status == "succeeded")
{
return new ViewModels.ResponseObject
{
Success = true,
Title = "Payment Successful.",
Message = "Thank you. Your payment has been successful. A confirmation message has been sent to you by email.",
Data = null
};
}
else
{
return new ViewModels.ResponseObject
{
Success = false,
Title = "An Error Occcured.",
Message = "An error has occured with your payment. A representative from our store has been notified and will be in touch with you to resolve the issue.",
Data = null
};
}
因此,如果您閱讀代碼,您會看到它嘗試付款,如果失敗,那么它會為您提供 clientSecret,您可以將其返回給客戶端。
這就是您現在可以在前端使用來構建支付意圖(我們已經知道由於 3d 安全而失敗),它將自動拉起 3d 安全身份驗證 Z05B8C74CBD96FBF2DE4C1A352702FFF4Z。
在我看來,往返兩次似乎是一種浪費,但這就是我設法擊敗它的方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.