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

【问题标题】：Why is my payment button not displaying the pop up? (Stripe)为什么我的付款按钮不显示弹出窗口？（条纹）
【发布时间】：2021-10-14 21:33:15
【问题描述】：

我的 Stripe 按钮不起作用。代码如下：

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 $29 / Month. Cancel anytime."
            panelLabel="Sign Up"
            
            currency='USD'
            locale='auto'
            stripeKey='pk_test_my-token'
            token={onToken}
            >
            <Button 
                title="Sign Up"
                color={"#06bd43"}
            />
     </StripeCheckout>
  )
}

当我点击按钮时什么都没有发生。屏幕上应该会出现一个弹出窗口。

我做错了什么？

【问题讨论】：

标签： reactjs react-native stripe-payments

【解决方案1】：

在这种情况下，您不需要添加额外的按钮标签，因为 Stripecheckout 本身会生成一个按钮。您还需要像 this.onToken 这样调用 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 $29 / Month. Cancel anytime."
    panelLabel="Sign Up"
    currency='USD'
    locale='auto'
    stripeKey='pk_test_my-token'
    token={this.onToken}
></StripeCheckout>

这是我通过上述修改运行您的代码时收到的结果

https://prnt.sc/1munr4d

【讨论】：

谢谢。那解决了它。你知道如何更新按钮的外观吗？

【解决方案2】：

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

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

【讨论】：

谢谢。我可能会使用付款链接。这看起来是个不错的选择。