如何通过customerId和PaymentMethodID在前端获取Stripe已保存卡片

首先给核心结论：客户端根本不能直接靠已存储的customerId和PaymentMethodID直接拉取卡片信息，所有这类查询必须走你自己的服务端中转，直接在客户端调用Stripe接口既没有对应权限，还会引发严重的安全问题。

你按下面的步骤实现就不会出问题：

• 客户端在用户进入「已保存支付方式」页面需要展示绑卡信息时，只需要携带当前登录用户的身份凭证（也就是你网站自身的登录Session、JWT这类鉴权标识），向你自己的后端服务发起拉取已绑卡列表的请求即可，不要在请求参数里明文传customerId或者PaymentMethodID作为查询条件。后端会根据当前鉴权通过的用户ID，匹配数据库中该用户对应的customerId和关联的所有PaymentMethodID，从根源上避免恶意用户篡改参数越权查询其他用户的卡片信息。
• 后端服务拿到当前用户合法关联的PaymentMethodID后，使用仅在服务端环境存储的Stripe Secret Key（这个密钥绝对不能泄露到客户端，不管是硬编码在前端代码还是通过接口返回都不行）调用Stripe的支付方式查询接口，拉取卡片的脱敏展示字段：包括卡组织标识（Visa/万事达/银联等）、卡号后四位、卡片过期年月、是否为默认支付方式这类前端展示需要的信息即可。

  合规提醒：Stripe本身不会返回完整卡号、卡片CVV这类高敏感信息，你也绝对不要在自己的数据库中存储这类信息，否则会违反PCI DSS合规要求，面临极大的资金安全风险。后端给前端返回数据时，只传展示需要的字段即可，不要把Stripe返回的全量原始数据直接透传给前端。

• 客户端拿到后端返回的脱敏卡片数据后，直接按照产品UI要求渲染展示即可，全程不需要客户端直接调用Stripe接口查询卡片相关信息。

• 不要将Stripe Secret Key放到任何客户端可访问的位置，一旦密钥泄露，攻击者可以直接操作你Stripe账户内的所有资金、窃取全部客户数据。
• 不要尝试通过前端引入的Stripe.js直接传入customerId拉取已绑定支付方式，Stripe客户端SDK本身就没有开放这个查询权限，强行调用只会返回权限错误。就算通过非常规方式绕过权限校验，也会造成严重的越权漏洞，恶意用户可以通过遍历customerId窃取全站所有用户的绑卡信息。
• 如果后续业务需要让用户使用已保存的卡片完成支付，也不需要前端提前拉取卡片详情，只需要让后端在创建PaymentIntent/SetupIntent时绑定好对应的PaymentMethodID，前端配合Stripe.js完成必要的支付验证流程即可。

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