Question

我正在基于here上的教程条目构建电子商务网站。

但是，从checkout.js的源代码返回这些错误，整个页面都变白了。

Uncaught TypeError: Cannot read property 'configure' of undefined
The above error occurred in the <Checkout> component:
The above error occurred in the <LocationProvider> component:
GET http://localhost:8000/.../src/components/checkout.js 404 (Not Found)

我看到很多Uncaught TypeError: Cannot read property 'configure' of undefined和404错误最多。

试图在编写CSS-in-JS库中查看样式化组件，因为我用于此项目。区别在于，图标图标显示与以前完全相同的源代码甚至都没有显示图标。

一条错误消息变成了这个。

Uncaught Error: Thestyleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

相关信息：

此外，我在教程中使用完全相同的代码制作了index.js，但结果与上面相同。当我禁用checkout.js组件时，它可以正常工作，这意味着我敢打赌checkout.js代码具有最高的修复潜力。

src / components / checkout.js

import React from "react"

// hardcoded amount (in US cents) to charge users
// you could set this variable dynamically to charge different amounts
const amount = 2500
const cardStyles = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "space-around",
  alignItems: "flex-start",
  padding: "3rem",
  boxShadow: "5px 5px 25px 0 rgba(46,61,73,.2)",
  backgroundColor: "#fff",
  borderRadius: "6px",
  maxWidth: "400px",
}
const buttonStyles = {
  fontSize: "13px",
  textAlign: "center",
  color: "#fff",
  outline: "none",
  padding: "12px 60px",
  boxShadow: "2px 5px 10px rgba(0,0,0,.1)",
  backgroundColor: "rgb(255, 178, 56)",
  borderRadius: "6px",
  letterSpacing: "1.5px",
}

// Below is where the checkout component is defined.
// It has several functions and some default state variables.
const Checkout = class extends React.Component {
  state = {
    disabled: false,
    buttonText: "BUY NOW",
    paymentMessage: "",
  }

  resetButton() {
    this.setState({ disabled: false, buttonText: "BUY NOW" })
  }

  componentDidMount() {
    this.stripeHandler = window.StripeCheckout.configure({
      // You’ll need to add your own Stripe public key to the `checkout.js` file.
      // key: 'pk_test_STRIPE_PUBLISHABLE_KEY',
      key: "pk_test_testtesttesttesttesttest",
      closed: () => {
        this.resetButton()
      },
    })
  }

  openStripeCheckout(event) {
    event.preventDefault()
    this.setState({ disabled: true, buttonText: "WAITING..." })
    this.stripeHandler.open({
      name: "Demo Product",
      amount: amount,
      description: "A product well worth your time",
      token: token => {
        fetch(`AWS_LAMBDA_URL`, {
          method: "POST",
          mode: "no-cors",
          body: JSON.stringify({
            token,
            amount,
          }),
          headers: new Headers({
            "Content-Type": "application/json",
          }),
        })
          .then(res => {
            console.log("Transaction processed successfully")
            this.resetButton()
            this.setState({ paymentMessage: "Payment Successful!" })
            return res
          })
          .catch(error => {
            console.error("Error:", error)
            this.setState({ paymentMessage: "Payment Failed" })
          })
      },
    })
  }

  render() {
    return (
      <div style={cardStyles}>
        <h4>Spend your Money!</h4>
        <p>
          Use any email, 4242 4242 4242 4242 as the credit card number, any 3
          digit number, and any future date of expiration.
        </p>
        <button
          style={buttonStyles}
          onClick={event => this.openStripeCheckout(event)}
          disabled={this.state.disabled}
        >
          {this.state.buttonText}
        </button>
        {this.state.paymentMessage}
      </div>
    )
  }
}

export default Checkout

pages / index.js

import React from "react"
import Helmet from "react-helmet"
import Favicon from "../components/fav-nma.png"
import Container from "../components/container"
import Layout from "../components/layout"
import Top from "../components/top"
//import Mainbody from "../components/mainbody"
import Apply from "../components/apply"
import Checkout from "../components/checkout"
import Price from "../components/price"
import Footer from "../components/footer"

const IndexPage = () => (
  <Layout>
    <Helmet link={[
      { rel: 'shortcut icon', type: 'image/png', href: `${Favicon}` }
  ]}>
      <meta property="og:type" content="website" />
      <meta property="og:url" content="test" />
      <meta property="og:title" content="test" />
      <meta property="og:description" content="test" />
      <meta property="og:image" content="test" />
      <meta property="fb:app_id" content="test" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content="test" />
      <meta name="twitter:description" content="test" />
      <meta name="twitter:image" content="test" />
    </Helmet>
    <Container>
      <Top />
      <Apply />
      <div>
        <Checkout />
      </div>
      <Price />
      <Footer />
    </Container>
  </Layout>
)

export default IndexPage

Answer 1

错误Uncaught TypeError: Cannot read property 'configure' of undefined表示您没有加载StripeCheckout。

根据您所遵循的教程的建议，将条纹签出脚本添加到文档中。

<script src="https://checkout.stripe.com/checkout.js"></script>

您可以将其放置在html文档的<head>中或紧接</html>标记的下方。

此外，您可以使用https://github.com/stripe/react-stripe-elements来代替，它允许您在package.json中管理依赖关系，并在代码中import对其进行管理。

它的用法略有不同，但是它们的文档很棒。

Answer 2

在构建期间会发生问题，因为“ window”不是此代码段第2行中的有效对象：

componentDidMount() {
  this.stripeHandler = window.StripeCheckout.configure({
    key: "pk_test_testtesttesttesttesttest",
    closed: () => {
      this.resetButton()
    },
  })
}

当Gatsby为您的网站构建静态资产时，

“窗口”不存在。当您运行Gatsby serve或gastby build或部署到Netlify（或任何地方）时，会发生这种情况。

为避免在构建过程中出现此问题，请将该行包装在if语句中，以检查window是否存在。

componentDidMount() {
  if (typeof window !== `undefined`) {
    this.stripeHandler = window.StripeCheckout.configure({
      key: `pk_test_testtesttesttesttesttest`,
      closed: () => {
        this.resetButton()
      }
    })
  }
}

我从https://www.gatsbyjs.org/docs/debugging-html-builds/

窃取了此信息

Gatsby，Stripe：创建按钮源代码将返回“ Uncaught TypeError：无法读取未定义的属性” configure”

2 个答案: