如何隐藏Stripe Payment Element中的银行卡图标？

方法一：自定义CSS覆盖 #

Stripe Payment Element生成的DOM带有特定类名，你可以通过CSS直接隐藏图标元素：

/* 隐藏银行卡品牌图标（通用选择器） */
.StripeElement .CardIcon-container {
  display: none !important;
}

/* 针对新版Element的精准选择器 */
.StripeElement [data-testid="card-brand-icon"] {
  display: none !important;
}

你可以用更精确的父级选择器提升样式优先级，替代!important，避免全局样式冲突。

方法二：通过Elements Appearance API内置规则配置 #

无需额外写全局CSS，直接在初始化Elements时通过appearance.rules指定样式：

const appearance = {
  rules: {
    '.CardIcon-container': {
      display: 'none'
    }
  }
};

// 初始化Elements并挂载Payment Element
const elements = stripe.elements({ clientSecret, appearance });
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

这种方式样式由Stripe的Elements系统注入，适配性更强。

注意要点 #

• 测试时覆盖不同支付场景，确认所有品牌图标都被隐藏
• 不要直接修改Stripe生成的DOM结构，防止版本更新导致样式失效
• 若使用React/Vue等框架，避免用组件scoped样式，或使用框架的深度选择器（如Vue的::v-deep）

内容的提问来源于stack exchange，提问作者Emre Apaydın