请将 'apiKey' 或 'stripe' 传递给 StripeProvider

Question

我以前的这个工作得很好，但我现在对发生了什么感到困惑。我正在为 SSR 使用 Next.js，我的 Pay 元素如下所示：

class Pay extends React.Component {
  constructor() {
    super();
    this.state = { stripe: null };
  }

  componentDidMount() {
    console.log(window.Stripe)
    this.setState({
      stripe: window.Stripe('pk_test_123'),
    });
  }

  render() {
    console.log(this.state)
    return (
      <StripeProvider apiKey={this.state.stripe}>
        <Elements>
          <InjectedCheckoutForm />
        </Elements>
      </StripeProvider>
    );
  }
}

以上抛出错误：

Please pass either 'apiKey' or 'stripe' to StripeProvider. If you're using 'stripe' but don't have a Stripe instance yet, pass 'null' explicitly.

尽管如此，我在这里感到困惑的是，window，当页面抛出 500 错误时，状态也不会被记录。如果我删除 StripeProvider 组件，window.Stripe 可以正常注销，并且 this.state 包含我的 Stripe 状态，所以我不明白为什么它会抛出错误。

Answer 1

为什么会出现错误

<StripeProvider /> 想要在初始渲染中使用 apiKey 或 stripe 道具，如错误所示。

在您的初始渲染中，state.stripe 是 null，因此随后 <StripeProvider apiKey=null>。这引发了 500 错误，因为只有 StripeProvider 的 this.props.stripe 是 null-checked，因此它可以理解消费者端发生了一些异步事情。

https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js#L105

this.props.apiKey 是 null 会导致您出错，因为 apiKey 没有以相同的方式对待。 https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js#L110

解决方案

我认为问题在于您只是使用了错误的属性。从 StripeProvider.apiKey 切换到 StripeProvider.stripe。 apiKey 接受 string 类型，而 stripe 接受 StripeObject （这是还有你的 window.Stripe() returns).

  <StripeProvider stripe={this.state.stripe}>
    <Elements>
      <InjectedCheckoutForm />
    </Elements>
  </StripeProvider>

查看 https://github.com/stripe/react-stripe-elements#loading-stripejs-asynchronously and https://github.com/stripe/react-stripe-elements#server-side-rendering-ssr 处的代码示例以获取更多信息。

沙盒：https://codesandbox.io/s/x2r1pxwjqz

尝试更改 stripe -> apiKey 以查看弹出的错误。

请将 'apiKey' 或 'stripe' 传递给 StripeProvider

Please pass either 'apiKey' or 'stripe' to StripeProvider

stripe-payments

reactjs

next.js

为什么会出现错误

解决方案