为什么我的付款按钮不显示弹出窗口？ （条纹）

Question

我的条纹按钮不起作用。这是代码：

import StripeCheckout from 'react-stripe-checkout';

export default function SignUpOne({ ... }) {
...

  const onToken = (token) => {
        console.log("onToken fired: ", token);
        handlePost(token);
    }

  return(
  ...
     <StripeCheckout
            label='Start Your Free Trial'
            
            // image='https://static.thenounproject.com/png/1259474-200.png'
            name='Native Notify Sign Up'
            description="It's free for 7 days. Then it's  / Month. Cancel anytime."
            panelLabel="Sign Up"
            
            currency='USD'
            locale='auto'
            stripeKey='pk_test_my-token'
            token={onToken}
            >
            <Button 
                title="Sign Up"
                color={"#06bd43"}
            />
     </StripeCheckout>
  )
}

单击按钮时没有任何反应。屏幕上应该会出现一个弹出窗口。

我做错了什么？

Answer 1

在这种情况下您不需要添加额外的按钮标签，因为 Stripecheckout 本身会生成一个按钮。您还需要像这样调用 onToken 函数 this.onToken 。这是给你的新标签。

<StripeCheckout
    label='Start Your Free Trial'
    // image='https://static.thenounproject.com/png/1259474-200.png'
    name='Native Notify Sign Up'
    description="It's free for 7 days. Then it's  / Month. Cancel anytime."
    panelLabel="Sign Up"
    currency='USD'
    locale='auto'
    stripeKey='pk_test_my-token'
    token={this.onToken}
></StripeCheckout>

这是我 运行 对您的代码进行上述修改后收到的结果

https://prnt.sc/1munr4d

Answer 2

请注意，react-stripe-checkout 软件包已经过时，并且使用不再推荐的旧“结帐”集成。 Stripe 建议 migrating to the new Checkout experience 利用所有最新功能。

虽然这确实需要服务器来创建会话，但您也可以使用 Payment Links 将您的客户发送到 Checkout，无需任何代码。