带 React 的 Stripe Connect答案

【问题标题】：Stripe Connect w/ React带 React 的 Stripe Connect
【发布时间】：2020-05-20 17:49:11
【问题描述】：

我正在尝试按照 Stripe 文档在我的 React 应用程序中设置 Connect。

我添加了我的端点 URI，当用户完成提供必要的信息时，Stripe 将它们发送回我的 redirect_uri 地址并提供授权码。

我的网址是这样的

http://localhost:3000/upload?code={AUTHORIZATION_CODE}&state=abcde12345

我到了第 3 步并且卡住了。

在componentDidMount 我正在尝试以下操作

componentDidMount() {
    window
      .fetch("https://connect.stripe.com/oauth/token", {
        method: "post",
        headers: {
          Accept: "application/json",
        },
        body: JSON.stringify({
          code: this.props.query.code,
          grant_type: "authorization_code"
        })
      })
      .then(response => console.log(response));
  }

但出现以下错误

我处于测试模式，所以我不确定仪表板中是否存在我未正确设置的内容或什么。

这就是我在 Connect 仪表板设置中看到的内容

我需要提交帐户申请才能使用吗？

【问题讨论】：

这里是 React 应用指南stripe.com/docs/recipes/elements-react
您关注的（我认为）是 Express 并且是服务器端的。
您必须从您的后端服务器发出该请求，因为它使用您的 API 密钥。无法直接从您的网页创建，这就是您收到错误的原因。
你的页面应该例如获取授权码并将其发布到您的后端服务器，该服务器向 Stripe 发出请求。
只是好奇你能用反应元素让它工作吗？

标签： reactjs stripe-payments

【解决方案1】：

所以这里的问题是您的请求中缺少 access-control-allow-origin 标头。您可以将此行添加到标题中：

headers: {
          Access-Control-Allow-Origin:: "https://connect.stripe.com",
        },

或者你现在可以使用https://www.npmjs.com/package/stripe。这种方式应该更方便。不要忘记将重定向 URI 设置为 https://dashboard.stripe.com/settings/applications。

我在与条纹作斗争时发现了你的问题。我认为您不需要我的回答，但也许其他人需要。

【讨论】：