未捕獲（承諾）錯誤：提供給 `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>

在我的應用程序布局標題中，這是導致此錯誤的原因。 此錯誤消息具有誤導性。 這個鏈接幫助我意識到