Gatsby, Stripe: Создание исходного кода кнопки возвращает 'Uncaught TypeError: Не удается прочитать свойство' configure 'of undefined' - PullRequest
Новая
       7

Gatsby, Stripe: Создание исходного кода кнопки возвращает 'Uncaught TypeError: Не удается прочитать свойство' configure 'of undefined'

0 голосов
/ 18 октября 2018

Я создаю сайт электронной коммерции на основе учебной записи от здесь .

Но из исходного кода для 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, styled-components, потому что я используюдля этого проекта.Разница в том, что favicon показывает, и раньше со всеми точно такими же исходными кодами из учебника даже не показывался favicon.

Сообщение об ошибке изменилось на это. 

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

страниц/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

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Проблема возникает во время сборки, потому что «окно» не является допустимым объектом в строке 2 этого фрагмента: 

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

«окно» не существует, пока Гэтсби создает статические ресурсы для вашего сайта.Это происходит при выполнении 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/

0 голосов
/ 18 октября 2018

Ошибка Uncaught TypeError: Cannot read property 'configure' of undefined указывает на то, что вы не загрузили StripeCheckout.

Как следует из учебного пособия, добавьте сценарий проверки полосы в ваш документ. 

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

Вы можете поместить это в <head> вашего HTML-документа или прямо под закрывающим тегом </html>.

Кроме того, вместо него можно использовать https://github.com/stripe/react-stripe-elements, что позволяет вамуправляйте зависимостями в вашем package.json и import в вашем коде.

Его использование немного отличается, но их документация просто фантастическая.

...