PayPal按钮设置horizontal布局时信用卡按钮不显示问题求助

问题原因及解决方法 #

• 父容器宽度不足
  横向布局需要父容器有足够的水平承载空间，官方要求最小宽度不低于320px，你可以给PayPalButtons的外层父元素添加min-width: 350px的样式，空间不足时SDK会自动隐藏信用卡按钮，仅保留主PayPal按钮。
• 高度配置不符合布局要求
  你当前设置的按钮高度为30px，低于官方推荐的横向布局最小高度要求35px，高度不足会导致副按钮无法正常渲染，可先将height值调整到40测试。
• 未显式启用信用卡资金源
  你可以在PayPalButtons组件中显式声明需要渲染的支付方式，避免SDK自动过滤，修改后代码参考：

<PayPalButtons 
    style={{
    layout: 'horizontal',
    color:  'silver',
    shape:  'pill',
    label:  'pay',
    tagline: false,
    height: 40}} 
    fundingSource={[paypal.FUNDING.PAYPAL, paypal.FUNDING.CARD]}
    createOrder={(data, actions) => {return onCreate(data, actions);}}
    onCancel={() => onCancel()}
    onError={(err) => onError()}
    onApprove={(data, actions) => onSuccess(data, actions)}
/>

• 检查SDK初始化参数
  确认你引入PayPal JS SDK的时候没有添加disable-funding=card参数，该参数会全局禁用信用卡按钮渲染，同时确保没有限制父元素的overflow属性为hidden。

内容的提问来源于stack exchange，提问作者AlwaysLearning