如何使用ReactJs在Stripe Payment中展示已绑定银行账户

DevOps 小满

2026-8-26

可行实现方案

Stripe 本身没有提供现成的已绑定银行账户展示组件，@stripe-js 和 @react-stripe-js 这两个包的定位是做绑卡流程、支付要素收集的前端交互，本身就不覆盖已绑定支付方式的定制化展示场景，你可以按设计稿自行实现，核心要点如下：

所有银行账户数据必须走自有服务端拉取：不要在前端直接请求 Stripe 接口，由服务端调用 Stripe 侧接口查询已绑定的银行账户信息后，仅向前端返回展示所需的非敏感字段即可，比如银行名称、银行卡后四位、发卡地区、账户校验状态，不要透传完整卡号、全量路由编码等敏感信息。
拿到返回字段后直接按设计稿编写 UI 组件即可，基础 React 实现参考：

const LinkedBankCard = ({ bankData }) => {
  return (
    <div className="bound-bank-card">
      <div className="bank-logo">
        {/* 放置对应银行logo，无匹配logo时用通用银行图标兜底 */}
      </div>
      <div className="bank-detail">
        <div className="bank-name">{bankData.bankName}</div>
        <div className="card-suffix">尾号 {bankData.last4}</div>
      </div>
      <div className="status-tag">已绑定</div>
    </div>
  )
}

银行logo建议自行维护映射表：不要依赖Stripe接口返回的logo资源，不同地区、不同银行的返回字段兼容性差，自己维护银行名和logo的对应关系，加通用图标兜底，可控性更高。
展示前务必校验账户状态：仅当接口返回账户状态为verified时，才展示为绑定成功；如果状态是校验失败、异常，要引导用户重新走绑卡流程。