Stripe与Rails自定义UI集成：如何展示已保存的支付方式

后端前置准备 #

首先确保你已经完成基础配置：

• Gemfile中引入Stripe官方SDK：gem 'stripe'，执行bundle install完成安装
• 在Rails配置中初始化Stripe密钥，建议存放在Rails凭据或环境变量中，不要硬编码提交到代码库
• User表已经添加stripe_customer_id字段，和Stripe侧的客户ID一一绑定

支付方式拉取接口实现 #

你可以在用户相关控制器中新增接口拉取当前用户的支付方式，示例代码如下：

# app/controllers/users_controller.rb
def payment_methods
  # 从Stripe拉取当前用户的所有银行卡支付方式
  payment_methods = Stripe::PaymentMethod.list(
    customer: current_user.stripe_customer_id,
    type: 'card'
  )
  # 提取用户需要的非敏感字段，同时匹配默认支付方式
  default_pm_id = current_user.stripe_default_payment_method_id # 你可以存在本地字段，或者调用Stripe::Customer.retrieve获取invoice_settings.default_payment_method
  @payment_methods = payment_methods.data.map do |pm|
    {
      id: pm.id,
      card: {
        brand: pm.card.brand,
        last4: pm.card.last4,
        exp_month: pm.card.exp_month,
        exp_year: pm.card.exp_year
      },
      default: pm.id == default_pm_id
    }
  end
  # 接口请求的话返回json，ERB渲染的话直接用@payment_methods变量即可
  respond_to do |format|
    format.html
    format.json { render json: @payment_methods }
  end
end

前端自定义UI实现 #

你可以完全自定义支付方式列表的样式，不需要依赖Stripe的内置组件，核心只需要展示非敏感的卡信息即可，这里给一个ERB实现示例：

<!-- app/views/users/payment_methods.html.erb -->
<div class="payment-methods-container">
  <h3>我的支付方式</h3>
  <div class="payment-methods-list">
    <% @payment_methods.each do |pm| %>
      <div class="payment-method-card <%= pm[:default] ? 'default-card' : '' %>">
        <div class="card-brand-area">
          <!-- 自行准备对应卡品牌的图标存放在assets目录即可 -->
          <img src="<%= asset_path("card_brands/#{pm[:card][:brand]}.svg") %>" alt="<%= pm[:card][:brand] %>卡">
        </div>
        <div class="card-info-area">
          <p class="card-number">•••• •••• •••• <%= pm[:card][:last4] %></p>
          <p class="card-expire">到期时间 <%= pm[:card][:exp_month] %>/<%= pm[:card][:exp_year] %></p>
          <% if pm[:default] %>
            <span class="default-tag">*默认*</span>
          <% end %>
        </div>
        <div class="card-action-area">
          <button class="btn-sm set-default-btn" data-pm-id="<%= pm[:id] %>">设为默认</button>
          <button class="btn-sm delete-pm-btn" data-pm-id="<%= pm[:id] %>">删除</button>
        </div>
      </div>
    <% end %>
  </div>
  <button class="add-pm-btn">新增支付方式</button>
</div>

如果是前后端分离的架构，直接用JS拉取后端返回的JSON数据，遍历渲染对应组件即可，逻辑完全一致。

注意事项 #

• 绝对不要存储银行卡的完整卡号、CVV等敏感信息，所有敏感数据都保存在Stripe侧，你只需要维护Stripe返回的支付方式ID和非敏感展示字段即可
• 可以在后端对支付方式列表做缓存，减少重复请求Stripe接口的延迟，用户新增、删除、修改支付方式时清理对应缓存即可
• 如果需要在下单页面嵌入支付方式选择，只需要在列表的每个支付方式卡片前加单选框，选中后记录对应支付方式ID提交给后端调用Stripe接口发起支付即可

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