如何在stripe.js中为客户添加PayPal与Google Pay支付方式

完全可以在现有Rails+Stripe架构中添加PayPal和Google Pay，这类钱包支付方式的实现逻辑和银行卡的card元素不同，Stripe提供了专门的组件和流程，具体实现步骤如下：

一、推荐方案：切换到Stripe Payment Element #

Stripe官方推荐用Payment Element替代单独的card元素，它能自动识别并展示所有你账号已启用的支付方式（包括银行卡、PayPal、Google Pay等），无需单独创建不同元素：

前端调整 #

1. 初始化Stripe和Elements时，补充必要配置：

const stripe_key = 'pk_test_xxx';
const stripe = Stripe(stripe_key);
const elements = stripe.elements({
  mode: 'setup', // 保存支付方式而非直接付款，使用setup模式
  currency: 'usd', // 替换为你的业务币种
  customer: '{{customer_id}}', // 传入当前用户在Stripe的Customer ID，由后端返回给前端
});

2. 创建并挂载Payment Element：

const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element-container'); // 页面需提前准备好对应容器div

3. 调整提交逻辑，改用createPaymentMethod（替代旧的createToken，符合Stripe最新API规范）：

document.getElementById('submitBtn').addEventListener('click', async function(event) {
  event.preventDefault();

  const { error, paymentMethod } = await stripe.createPaymentMethod({
    elements,
    params: {
      billing_details: {
        // 可选：传入用户账单信息，如name: 'John Doe'
      },
    },
  });

  if (error) {
    console.error(error);
    return;
  }

  // 将paymentMethod.id发送至后端
  fetch('http://localhost:3000/api/v2/payment_methods', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`
    },
    body: JSON.stringify({ 
      payment_method_id: paymentMethod.id, // 替换原token参数
      is_default_payment_method: document.getElementById('set_as_default').checked
    })
  }).then(function(response) {
    if (response.ok) {
      // 支付方式保存成功逻辑
    } else {
      // 保存失败逻辑
    }
  }).catch(function(error) {
    console.error('Error:', error);
  });
});

后端Rails调整 #

将原基于Token的逻辑改为使用Payment Method ID：

# 示例：PaymentMethodsController的create动作
def create
  customer = Stripe::Customer.retrieve(current_user.stripe_customer_id)
  payment_method = Stripe::PaymentMethod.attach(
    params[:payment_method_id],
    { customer: customer.id }
  )

  # 若用户勾选设为默认，则更新客户默认支付方式
  if params[:is_default_payment_method]
    customer.default_payment_method = payment_method.id
    customer.save
  end

  render json: { status: 'success' }, status: :ok
rescue Stripe::StripeError => e
  render json: { error: e.message }, status: :unprocessable_entity
end

二、单独集成PayPal或Google Pay（无需Payment Element） #

如果只想单独添加某一种钱包支付方式，可使用Stripe专门的组件：

1. Google Pay集成 #

• 初始化Elements时配置Google Pay支持：

const elements = stripe.elements({
  mode: 'setup',
  currency: 'usd',
  customer: '{{customer_id}}',
  paymentMethodCreation: 'manual',
});

const googlePay = elements.create('googlePay', {
  // 可选配置：如buttonColor: 'black'
});
googlePay.mount('#google-pay-button');

• 提交逻辑与Payment Element一致，使用createPaymentMethod即可。

2. PayPal集成 #

PayPal需先通过后端生成Setup Intent，因为涉及跳转授权：

• 后端生成Setup Intent：

def create_setup_intent
  customer = Stripe::Customer.retrieve(current_user.stripe_customer_id)
  setup_intent = Stripe::SetupIntent.create({
    customer: customer.id,
    payment_method_types: ['paypal'],
  })
  render json: { client_secret: setup_intent.client_secret }
end

• 前端调用授权流程：

// 先从后端获取client_secret
fetch('/api/v2/setup_intent', { headers: { 'Authorization': `Bearer ${bearerToken}` } })
  .then(res => res.json())
  .then(data => {
    stripe.confirmPayPalSetup(
      data.client_secret,
      {
        payment_method: {
          paypal: {},
        },
      }
    ).then(({ setupIntent, error }) => {
      if (error) {
        console.error(error);
      } else if (setupIntent.status === 'succeeded') {
        // PayPal支付方式已保存，setupIntent.payment_method为对应ID
        // 可通知后端完成后续逻辑
      }
    });
  });

关键注意事项 #

• 需在Stripe后台的支付设置中，开启PayPal和Google Pay的支付方式支持。
• 旧的createToken属于Stripe Legacy API，建议切换到createPaymentMethod或Payment Element，兼容性与扩展性更强。
• 测试阶段可使用Stripe提供的测试资源：Google Pay可直接模拟授权，PayPal可使用Stripe官方测试账号完成流程。

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