CapacitorJS混合应用：Android版Google Pay按钮CSS实现方案问询

安全阿岳

2026-8-24

解决CapacitorJS应用中Google Pay安卓版按钮样式问题

现成CSS资源情况

目前没有官方或通用的现成CSS资源直接适配安卓版Google Pay按钮样式。因为Web端与安卓端的Google Pay按钮规范是独立维护的，官方仅针对安卓提供SVG图标和XML资源，没有现成的Web端CSS转换方案。

手动调整实现方案

你可以基于现有Web版按钮的基础代码，手动修改CSS来匹配安卓版的样式要求，核心调整点如下：

圆角设置：安卓版按钮的圆角更大，一般设为按钮高度的一半，比如按钮高度48px时，border-radius: 24px
按钮尺寸：安卓版按钮标准高度为48px，保持与原生安卓控件尺寸一致
内边距与间距：调整左右内边距，保证图标与文字的间距符合规范
图标替换：使用官方提供的安卓版Google Pay SVG图标，替换Web版图标，确保比例和样式正确

以下是一个可参考的示例CSS代码：

.google-pay-android-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 48px;
  border: none;
  border-radius: 24px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #202124;
}

.google-pay-android-btn svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}