如何在React+Django电商项目中集成Google Pay支付网关？求指导

1. 只显示银行卡选项的修复 #

Google Pay按钮默认仅启用银行卡支付，要显示UPI/钱包等本地支付方式，需在paymentRequest的allowedPaymentMethods中明确配置支持的支付类型，同时确保商户信息符合目标地区要求（比如印度地区用INR货币和IN国家码）。

前端React配置示例 #

import { GooglePayButton } from '@google-pay/button-react';

const GooglePayCheckout = ({ amount, orderId, onPaymentSuccess }) => {
  const paymentRequest = {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      // 配置UPI支付（印度地区常用）
      {
        type: 'UPI',
        parameters: {
          vpa: '你的商户UPI ID@upi',
          payeeName: '你的店铺名称'
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: '你的收单机构ID',
            gatewayMerchantId: '你的商户ID'
          }
        }
      },
      // 保留银行卡支付
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA']
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: '你的收单机构ID',
            gatewayMerchantId: '你的商户ID'
          }
        }
      }
    ],
    merchantInfo: {
      merchantId: 'Google Pay控制台申请的商户ID',
      merchantName: '你的店铺名称'
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: '订单总额',
      totalPrice: amount.toString(),
      currencyCode: 'INR',
      countryCode: 'IN'
    }
  };

  const handleLoadPaymentData = async (paymentData) => {
    // 提取Google Pay返回的支付令牌
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    // 传给Django后端处理实际扣款
    const response = await fetch('/api/process-google-pay/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': document.cookie.split('; ').find(row => row.startsWith('csrftoken=')).split('=')[1]
      },
      body: JSON.stringify({
        token: paymentToken,
        amount: amount,
        order_id: orderId
      })
    });
    const result = await response.json();
    if (result.success) {
      onPaymentSuccess(result.transaction_id); // 拿到后端返回的交易ID
    } else {
      alert(`支付失败：${result.error}`);
    }
  };

  return (
    <GooglePayButton
      environment="TEST" // 上线前改为PRODUCTION
      paymentRequest={paymentRequest}
      onLoadPaymentData={handleLoadPaymentData}
      buttonColor="black"
      buttonType="buy"
    />
  );
};

export default GooglePayCheckout;

2. 获取交易ID的流程 #

Google Pay前端仅负责生成支付令牌，不会直接返回交易ID——交易ID是由你的收单机构（或支付处理服务商）在完成实际扣款后生成的。正确流程：

1. 前端拿到支付令牌后，立即传给Django后端
2. 后端用令牌调用收单机构的API发起扣款请求
3. 收单机构返回成功响应时，会附带交易ID，后端将其与订单关联并存库
4. 后端把交易ID返回给前端，用于更新订单状态或展示

Django后端视图示例 #

from django.http import JsonResponse
import requests
from django.views.decorators.csrf import csrf_exempt
from .models import Order

@csrf_exempt
def process_google_pay(request):
    if request.method != 'POST':
        return JsonResponse({'error': '无效请求方式'}, status=400)
    
    data = request.json()
    payment_token = data.get('token')
    amount = data.get('amount')
    order_id = data.get('order_id')

    # 调用收单机构API（示例替换为你的服务商接口）
    try:
        response = requests.post(
            'https://你的收单机构API地址/charge',
            json={
                'payment_token': payment_token,
                'amount': amount,
                'currency': 'INR',
                'order_reference': order_id,
                'merchant_key': '你的服务商API密钥'
            },
            timeout=10
        )
        response.raise_for_status()
        transaction_data = response.json()
        
        # 更新订单状态并保存交易ID
        order = Order.objects.get(id=order_id)
        order.transaction_id = transaction_data['transaction_id']
        order.status = 'PAID'
        order.save()

        return JsonResponse({
            'success': True,
            'transaction_id': transaction_data['transaction_id']
        })
    except Exception as e:
        return JsonResponse({
            'success': False,
            'error': str(e)
        })

额外注意事项 #

• 必须在Google Pay商户控制台完成注册，获取有效的merchantId
• 上线前务必将environment从TEST切换为PRODUCTION
• 不同地区支持的支付方式不同，可根据目标市场调整allowedPaymentMethods配置
• 绝对不能仅依赖前端令牌标记订单为已支付，必须通过后端验证扣款结果，防止伪造请求

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