从前端对连接的调用进行条带化，以编程方式更改条带连接 ID答案

【问题标题】：Stripe connected calls from the Front End, change the Stripe connected ID programatically从前端对连接的调用进行条带化，以编程方式更改条带连接 ID
【发布时间】：2020-06-20 09:35:25
【问题描述】：

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

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

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

作为参考，请查看this 和here（在第 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 条没有加载，但是刷新浏览器现在可以工作，但这告诉我我做错了或者也许我必须在“componentDidMount()”中刷新应用程序？

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

【问题讨论】：

标签： javascript reactjs stripe-payments

【解决方案1】：

回答与您的重复问题相同：How to properly load global variable with async values(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 组件重新呈现。

【讨论】：

好的，所以我将正文从 window.sessionStorage 更改为仅从似乎修复它的 URL 收集数据（似乎 window.session 是问题，当我使所有静态相似时，我有这个工作对你来说，正文是静态字符串，然后数据库会响应）但是当我添加它从会话中获取数据的部分时，它就崩溃了，只有在刷新页面时才会起作用。现在您提到有人希望在应用程序中提供此功能，但我的意思是一个人可能拥有多个帐户 ID，那么有人会喜欢文本解析器之类的吗？
在任何框架中都有多种管理方式。特别是使用 React，您可以使用 state 或许多状态管理系统之一，例如 redux。基本上，您将拥有某种帐户列表，然后您将跟踪当前在应用程序状态中选择的帐户。

【解决方案2】：

你声明了一个常量

const stripePromise = const stripePromise = fetch(...

应该是

const stripePromise = fetch(...

这是我第一眼看到的。

【讨论】：

抱歉打错了