未捕获（承诺）错误：提供给 `Elements` 的道具 `stripe` 无效。 我们建议使用来自 `@stripe/stripe-js` 的 `loadStripe` 实用程序

Question

我很沮丧。 我实际上是直接从 Stripe Docs 实施的，但我不断收到错误消息

Error: Invalid prop 'stripe' supplied to 'Elements'. We recommend using the 'loadStripe' utility from '@stripe/stripe-js'

... 但我是！ 这个脚本有什么问题？ 我到处搜索，但找不到任何我收到此错误的原因。

import React from "react"
import PropTypes from "prop-types"
import {loadStripe} from '@stripe/stripe-js';
import {CardElement, Elements, useElements, useStripe} from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_yesItsMyRealKey')

class MembershipCheckout extends 

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


export default MembershipCheckout;

包.json

"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.11.0",

不确定它是否重要，但我使用的是 Rails 6，带有 react-rails 和 webpacker

Answer 1

请检查您是否从 index.html 加载了条带脚本。 如果是这样，请删除它。 您使用的方法仅适用于 react 库，如果您通过 index.html 加载另一个 Stripe 库，则会导致不兼容。

Answer 2

哇，我真是个白痴。 我还有<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

在我的应用程序布局标题中，这是导致此错误的原因。 此错误消息具有误导性。 这个链接帮助我意识到