如何移除Stripe Payment Element的支付方式标签？

要直接显示卡号输入框、移除包括"Card"在内的顶部支付选项标签，同时保留PaymentElement的完整功能（不用CardElement），可以按以下步骤操作：

• 第一步：限制PaymentElement仅加载卡片支付方式
  初始化Stripe Elements时，指定paymentMethodTypes只包含card，这样PaymentElement不会加载其他支付选项，从根源减少多余标签：

  const stripe = Stripe('你的Stripe公钥');
  const elements = stripe.elements({
    clientSecret: '后端返回的client_secret',
    paymentMethodTypes: ['card'] // 仅启用卡片支付
  });
  

• 第二步：隐藏顶部的"Card"标签栏
  仅限制支付方式后，PaymentElement默认仍会显示"Card"标签，可通过两种方式隐藏：

  1. 通过Stripe官方配置隐藏（推荐）
     创建PaymentElement时，配置layout参数关闭标签显示：

     const paymentElement = elements.create('payment', {
       layout: {
         type: 'tabs',
         tabs: {
           showLabels: false, // 隐藏标签文字
           showIcons: false, // 隐藏标签图标
           defaultActive: 'card'
         }
       }
     });
     paymentElement.mount('#payment-element');
     

  2. CSS兜底隐藏
     如果配置不生效，直接用CSS定位隐藏标签容器：

     /* 隐藏PaymentElement顶部的标签容器 */
     #payment-element > div:first-of-type {
       display: none !important;
     }
     

完成设置后，页面会直接显示卡号输入框，同时保留PaymentElement支持的3DS验证、支付方式保存等CardElement不具备的功能。

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