提供的 client_secret 与此帐户上的任何关联的 SetupIntent 不匹配
来源:stackoverflow
时间:2024-03-17 15:27:28 417浏览 收藏
在将外部银行帐户链接到 Stripe 连接帐户时,遇到了“提供的 client_secret 与此帐户上的任何关联的 SetupIntent 不匹配”错误。这是因为在服务器端设置 SetupIntent 时使用了连接的帐户 ID,但在前端却使用可发布密钥加载 Stripe,导致无法匹配 SetupIntent。
我正在尝试将外部银行帐户链接到 Stripe 连接帐户。帐户类型是自定义的。我成功创建了与已连接帐户关联的 SetupIntent(如下所示)并收到了客户端密钥:
params := &stripe.SetupIntentParams{
AttachToSelf: stripe.Bool(true),
FlowDirections: stripe.StringSlice([]string{
*stripe.String(string(stripe.SetupIntentFlowDirectionInbound)),
*stripe.String(string(stripe.SetupIntentFlowDirectionOutbound)),
}),
PaymentMethodOptions: &stripe.SetupIntentPaymentMethodOptionsParams{
USBankAccount: &stripe.SetupIntentPaymentMethodOptionsUSBankAccountParams{
FinancialConnections: &stripe.SetupIntentPaymentMethodOptionsUSBankAccountFinancialConnectionsParams{
Permissions: stripe.StringSlice([]string{*stripe.String("balances"), *stripe.String("payment_method")}),
},
VerificationMethod: stripe.String("instant"),
},
},
PaymentMethodTypes: stripe.StringSlice([]string{
*stripe.String(string(stripe.PaymentMethodTypeUSBankAccount)),
}),
}
params.SetStripeAccount(connectedId)
resp, err := setupintent.New(params)
if err != nil {
return nil, fmt.Errorf("failed to setup intent: %w", err)
}
return resp, nil
client_secret 被传递到前端,我们在前端启动授权流程以收集银行信息以便能够链接外部帐户。
const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || ''
if (!publishableKey) {
throw new Error('missing stripe publishable key')
}
export default function Page() {
const [clientSecret, setClientSecret] = useState('')
const [showModal, setShowModal] = useState(false)
const [stripeInstance, setStripeInstance] = useState<Stripe | null>(null)
const [linkingBankLoading, setLinkingBankLoading] = useState(false)
useEffect(() => {
const loadAndSetStripe = async () => {
try {
const loadedStripe = await loadStripe(publishableKey)
setStripeInstance(loadedStripe)
} catch (err) {
console.error('stripe publishable key failed to load', err)
}
}
loadAndSetStripe()
}, [])
const linkExternalBank = async () => {
setLinkingBankLoading(true)
try {
const { data } = await linkExternalBankMutation({
context: {
headers: { authorization: `Bearer ${accessToken}` },
},
})
if (data?.linkExternalBank.clientSecret) {
setClientSecret(data.linkExternalBank.clientSecret)
setShowStripeModal(true)
}
} catch (err) {
console.error('error linking external bank', err)
} finally {
setLinkingBankLoading(false)
}
}
<div className="flex flex-col gap-3 md:flex-row">
<AddFinancialConnectionCard
linkExternalBank={linkExternalBank}
linkingBankLoading={linkingBankLoading}
/>
{showModal && stripeInstance && clientSecret && (
<Modal
isOpen={showModal}
onClose={() => setShowModal(false)}
clientSecret={clientSecret}
stripe={stripeInstance}
/>
)}
</div>
}
最后在模态中:
interface ModalProps {
isOpen: boolean
onClose: () => void
clientSecret: string
stripe: Stripe | null
}
export const Modal = ({ isOpen, onClose, clientSecret, stripe }: ModalProps) => {
if (!isOpen || !stripe || !clientSecret) {
return null
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="w-full max-w-lg rounded bg-white p-4 shadow-lg">
<button onClick={onClose}>Close</button>
<Elements stripe={stripe} options={{ clientSecret }}>
<BankDetailsForm clientSecret={clientSecret} />
</Elements>
</div>
</div>
)
}
它尝试加载元素并在崩溃之前快速显示一秒钟。当我查看网络选项卡时,我们收到错误:提供的 client_secret 与此帐户上的任何关联的 SetupIntent 不匹配。
而且当我运行curl命令来检索SetupIntent时,我可以成功地看到它是为该帐户创建的。我很困惑为什么会发生这个错误。
此外,我还仔细检查了生成的 API 密钥,并且使用了正确的密钥。
我已经阅读了 Stripe 文档,但仍然遇到了这个问题。还尝试对客户端密钥进行硬编码,并在通过 Curl 生成时可发布,但仍然遇到相同的错误。
将客户端密钥传递给 Element 组件时会失败。
正确答案
您正在代表连接的帐户进行服务器端调用:
params.SetStripeAccount(connectedId)
但在前端,你不是:
const loadedStripe = await loadStripe(publishableKey)
因此,Stripe 正在寻找您帐户上的意图进行确认,而不是连接的帐户。
您必须以相同的方式对所有内容进行身份验证 - 在您的情况下,这意味着代表您连接的帐户 ID 对您的前端进行身份验证:
const stripePromise = loadStripe('{{PLATFORM_PUBLISHABLE_KEY}}', {
stripeAccount: '{{CONNECTED_STRIPE_ACCOUNT_ID}}',
});
相关Stripe 文档。
理论要掌握,实操不能落!以上关于《提供的 client_secret 与此帐户上的任何关联的 SetupIntent 不匹配》的详细介绍,大家都掌握了吧!如果想要继续提升自己的能力,那么就来关注golang学习网公众号吧!
-
502 收藏
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
139 收藏
-
204 收藏
-
325 收藏
-
478 收藏
-
486 收藏
-
439 收藏
-
357 收藏
-
352 收藏
-
101 收藏
-
440 收藏
-
212 收藏
-
143 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习