来自前端的条带连接呼叫，以编程方式更改条带连接 ID

IT技术 javascript reactjs stripe-payments
2021-05-10 19:53:02

我正在尝试解决这个我似乎无法用 Stripe 的 API 解决的问题

因此，当使用他们的新版本 API 创建费用时，他们说在前端我们应该调用 loadStripe('Pusblishable Key',{'Connected account ID'}) 并将其设置为常量。

现在我不明白我们应该如何获取存储在某个地方的 ID，比如数据库？

作为参考，请查看这里和这里（在第 3 步中...）。

我目前正在做的是这样的

        import React from 'react';
        import ReactDOM from 'react-dom';
        import {Elements} from '@stripe/react-stripe-js';
        import {loadStripe} from '@stripe/stripe-js';

        import CheckoutForm from './CheckoutForm';

      //btw I have set this to const and to let and none work
        const stripePromise =
          fetch("url", {


              method: "POST",
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                anything:window.sessionStorage.getItem("Variable Account")
    //here store something that  will tell what account to pull ID data from
              })
            }).then(data => data.json()).then((result)=>{
              return(loadStripe('KEY',{stripeAccount:result}))

            })

class App extends React.Component{
render(){
return(
     <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
)}
}

export default(App)

但是 const 似乎无法正确加载，如果按照应用程序的常规流程从 myapp.com/home 说 -> 单击 myapp.com/home/something-> 然后 myapp.com/home/something/payment stripe 是没有加载但刷新浏览器现在可以工作，但这告诉我我可能做错了什么，或者我必须在“componentDidMount()”中刷新应用程序？

可以将其设置为静态，但连接的帐户可能很多，因此如果有人可以帮助我解决此问题，我将不胜感激

2个回答

回答与您重复的问题相同：如何正确加载具有异步值的全局变量（Reactjs）？

通常，您希望在您的应用程序中使用此帐户 ID。但是，如果您需要检索它，那很好，但请确保stripePromise它是您认为的那样。例如，我可以在这里通过模拟 fetch 调用来完成这项工作：https : //codesandbox.io/s/stripe-connect-w-resolve-wts34

请注意，我正在明确管理 Promise：

const stripePromise = new Promise((resolve, reject) => {
  fetch(...)
  .then(data => data.json())
  .then(result => {
    resolve(
      loadStripe(STRIPE_PUBKEY, { stripeAccount: "acct_xxx" })
    );
  });
});

您用导航描述这种中断的事实表明您可能路由不正确。如果这是一个单页应用程序，导航不应导致App组件重新呈现。

你在声明一个 const

const stripePromise = const stripePromise = fetch(...

它应该是 

const stripePromise = fetch(...

这是我第一眼看到的。

其它你可能感兴趣的问题
上一篇启动时未定义 useLocation 挂钩：TypeError：无法读取未定义的属性“位置” 下一篇如何使用几个 next.js 插件（typescript和手写笔）