如何设置Next.js中Stripe钱包按钮始终可见？

针对你在Next.js中集成Stripe Express Checkout Element时，Google Pay和Apple Pay按钮默认隐藏的问题，可通过以下步骤调整：

1. 确认Stripe后台配置 #

先登录Stripe Dashboard，确保Google Pay和Apple Pay支付方式已在对应账户（测试/生产）中启用，这是按钮正常显示的前提。

2. 调整ExpressCheckoutElement的配置参数 #

你的现有代码中，layout的maxColumns和maxRows设为0可能限制了按钮的显示数量。修改配置如下：

<div id="checkout-page">
  <ExpressCheckoutElement
    onConfirm={onConfirm}
    options={{
      wallets: { 
        applePay: "always", 
        googlePay: "always" 
      },
      // 调整布局，允许显示足够多的列数，避免按钮折叠
      layout: { 
        type: "horizontal", 
        maxColumns: 3, 
        maxRows: 1 
      },
      // 强制不折叠额外支付方式按钮
      collapsed: false
    }}
    onClick={onClick}
  />
  {errorMessage && <div>{errorMessage}</div>}
</div>

关键参数说明 #

• wallets: { applePay: "always", googlePay: "always" }：强制在所有设备上显示这两个钱包按钮（即使设备原生不支持，也会展示按钮引导用户）。
• layout：通过type: "horizontal"设置横向布局，maxColumns:3确保能容纳至少3个支付按钮（包括默认的Stripe按钮+GPay+Apple Pay），避免因空间不足自动折叠。
• collapsed: false：禁用默认的折叠行为，让所有配置的支付方式按钮直接展示，无需点击"See more"。

额外排查点 #

• 确保你的Stripe Elements初始化时，传入的locale和地区配置正确（部分地区可能影响支付方式的显示逻辑）。
• 测试时使用支持对应支付方式的设备/浏览器（比如Apple Pay需在Safari或iOS设备测试，Google Pay需在Chrome或Android设备测试）。

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