Stripe定价表移动设备显示异常：底部内容被截断

问题概述 #

通过<stripe-pricing-table>标签集成Stripe订阅定价表后，桌面端显示正常，但移动端底部内容被截断，调整内边距和外边距无法解决问题。

相关代码 #

export default function CheckoutForm() {
  useScript("https://js.stripe.com/v3/pricing-table.js");

  return (
    <div>
      <stripe-pricing-table
        pricing-table-id="sdfsdf"
        publishable-key="sdfeee"
      ></stripe-pricing-table>
    </div>
  );
}

显示情况 #

• 移动端：定价表底部内容（如操作按钮、说明文本）被屏幕边缘截断，无法完整查看
• 桌面端：所有内容完整展示

解决方案 #

1. 给包裹容器添加高度与溢出处理 #

Stripe定价表为动态渲染组件，移动端容器高度可能计算不足，给外层容器设置最小高度和溢出规则：

.stripe-pricing-wrap {
  min-height: 650px; /* 根据实际定价表高度调整数值 */
  overflow-y: auto;
  padding-bottom: 30px; /* 给底部预留额外空间 */
}

修改组件中的容器：

<div className="stripe-pricing-wrap">
  <stripe-pricing-table
    pricing-table-id="sdfsdf"
    publishable-key="sdfeee"
  ></stripe-pricing-table>
</div>

2. 检查Stripe后台的定价表响应式配置 #

登录Stripe Dashboard，进入对应定价表的编辑界面，确认响应式布局设置是否开启移动端自适应，比如是否允许移动端堆叠展示，避免后台设置了过窄的宽度限制导致内容挤压截断。

3. 排查父级容器的overflow属性 #

检查页面中定价表的父级容器是否设置了overflow: hidden，该属性会导致超出容器范围的内容被截断。找到对应父元素，移除该属性，或给定价表容器设置独立的溢出规则。

4. 使用Stripe自定义样式属性 #

通过data-options属性传递自定义样式配置，为移动端设置底部内边距：

<stripe-pricing-table
  pricing-table-id="sdfsdf"
  publishable-key="sdfeee"
  data-options='{"style": {"padding": {"bottom": "2rem"}}}'
></stripe-pricing-table>

注：该配置需符合Stripe官方文档的样式规范，可根据实际需求调整参数。

内容的提问来源于stack exchange，提问作者Captai-N