当我尝试使用它来创建令牌时，Stripejs props对象给我一个错误消息“对象可能为空”props.stripe.createToken

问题描述

在我的checkoutForm组件中的handleSubmit方法中，我期望通过具有ReactStripeElements.InjectedStripeProps接口，Stripe将具有可用于使用createtoken（{}）的道具。 以下是我的CheckoutForm组件以及嵌套在CheckoutForm第一页上的Elements组件。 我在下面的第二页上还有一个带有我的apiKey的StripeProvider。 StripeProvider位于App.tsx中，包裹在App.tsx中的所有内容中。我想知道API密钥是否能够给我该确切的错误消息，还是我错过了其他任何给我该错误的东西。

import React from "react"
    import {
      injectStripe,ReactStripeElements,CardElement,} from "react-stripe-elements"
    
       interface IFormProps extends ReactStripeElements.InjectedStripeProps {}
    //Allow for props to be passed on to CheckoutForm from Stripe API wthout passing them in directly ourselves

    export const CheckoutForm = (props: IFormProps) => {
    
      const handleSubmit = async (e: React.ChangeEvent<HTMLFormElement>) => {
        e.preventDefault()
        try {
          let token = await props.stripe.createtoken({name: name})
        } catch (e) {
          throw e
        }
      }
    
      return (
        <>
        <form onSubmit={handleSubmit}> 
                <CardElement />
          </form>
        </>
      )
    }
    

    
    export default injectStripe(CheckoutForm)

/ * ---第二页波纹管--- * /

import React from "react"
import { ThemeProvider } from "@material-ui/styles"
import theme from "./ui/Theme"
import { Route } from "react-router-dom"

import Shoppingcart from "./routes/shoppingcart/Shoppingcart"

import { Elements,StripeProvider } from "react-stripe-elements"

function App() {

  return (
    <>
      <StripeProvider apiKey="APIKEY_WOULD_BE_HERE">
        <ThemeProvider theme={theme}>

                <Elements>
                  <Route
                    exact
                    path="/shoppingcart"
                    component={() => (
                      <Shoppingcart
                      />
                    )}
                  />
                </Elements>

        </ThemeProvider>
      </StripeProvider>
    </>
  )
}

export default App

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）