React / 条纹 / injectStripe HOC / "stripe.createToken is not a function"

Question

任务是创建一个测试 Stripe 实现。它所需要做的就是采用标准测试输入 (4242...) 和 return 非故障响应。我已经设法解决了大部分问题，但对如何实现 HOC injectStripe 部分感到困惑。最终结果是代码 return 出现“stripe.getToken() 不是函数”错误，我不知道如何解决这个错误。

我的猜测是答案很简单/显而易见，但是我对此完全陌生，还不知道这个答案是什么。

我不知道该怎么做才能解决这个问题。需要一些帮助/指导。感谢您的时间和关注。

这是一些代码：

paymentInfo.js

export default function PaymentInfo(stripe) {
    const handleFinishOrder = async (event) => {
        event.preventDefault()
    
        const { token } = await stripe.createToken() // <<< here is the error

        async function fetchStripe() {
            // API fetch that needs token
        }

        fetchStripe();
    }
        
    function handlers() {
        return {
            handleFinishOrder: handleFinishOrder       
        }
    }

    return (
        <StripeProvider apiKey={process.env.REACT_APP_STRIPE_PUBLIC_KEY}>
            <Elements>
                <PaymentInfoDisplay handlers={handlers()} /> // <<< see next code sample
            </Elements>
        </StripeProvider>        
    )
}

PaymentInfoDisplay.js

const PaymentInfoDisplay = ( props ) => {
    const { handleFinishOrder } = props.handlers

    return (
        // A simple <form/> with Stripe elements for card number, exp. date, etc.
    )
} 

export default injectStripe(PaymentInfoDisplay)

Answer 1

这里的根本问题是您试图在调用 <StripeProvider /> 组件的函数的内部使用 stripe 属性 。您应该改为在树中的子组件中进行 createToken() 调用（即使在您的 PaymentInfoDisplay 组件中）。下面是一个（截断的）示例：

export default function PaymentInfo(stripe) { return ( <StripeProvider apiKey={process.env.REACT_APP_STRIPE_PUBLIC_KEY}> <Elements> <PaymentInfoDisplay /> </Elements> </StripeProvider> ) }

const PaymentInfoDisplay = (props) => { const { stripe } = props const handleClick = () => stripe.createToken() return <button onClick={handleClick}>Click</button> } export default injectStripe(PaymentInfoDisplay)

但是，此 HOC 集成通常已被弃用，不再推荐使用。相反，您应该重构代码以使用 useStripe hook.

React / 条纹 / injectStripe HOC / "stripe.createToken is not a function"

React / Stripe / injectStripe HOC / "stripe.createToken is not a function"

reactjs

stripe-payments