时间戳

首页 > 解决方案 > 未捕获（承诺中）错误：提供给“元素”的无效道具“条纹”。我们建议使用来自 `@stripe/stripe-js` 的 `loadStripe` 实用程序

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

问题描述

我很沮丧。我实际上是直接从 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

标签： javascriptreactjsstripe-payments

解决方案

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

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

推荐阅读