小叶的前端笔记

Appearance

一、支付方案选择 ​

1. 主流支付方式 ​

支付类型适用场景代表服务商
第三方支付快速接入、中小型企业支付宝、微信支付、Stripe、PayPal
聚合支付统一对接多个支付渠道Ping++、BeeCloud
银行直连大额交易、对账需求各银行网关
数字货币特定用户群体Coinbase Commerce

2. 方案对比 ​

  • 直接对接（如支付宝官方 API）：控制力强但开发成本高
  • 聚合支付：一次对接多平台，费率略高
  • SaaS 解决方案（如有赞云）：适合电商场景，包含完整订单系统

二、安全前置要求 ​

    1. 必须后端实现的环节：
    • 支付签名生成
    • 订单金额校验
    • 回调通知处理
    • 交易记录存储
    1. 前端禁止操作：
    javascript
    // 危险！绝对禁止在前端暴露密钥
const API_KEY = "sk_test_xxx"; // ❌
    1. 强制要求：
    • 全站启用 HTTPS
    • 金额计算在后端完成
    • 使用 CSP 安全策略
    • 定期更换 API 密钥

三、支付宝接入示例（Web 前端） ​

1. 后端准备（Node.js 示例） ​

javascript
// 生成支付参数
router.post("/create-order", async (req, res) => {
  const order = {
    out_trade_no: generateOrderNo(),
    total_amount: 9.9, // 来自后端计算
    subject: "VIP会员",
  };

  const params = await alipaySdk.pageExec("alipay.trade.page.pay", {
    notifyUrl: "https://yourdomain.com/notify",
    returnUrl: "https://yourdomain.com/success",
    bizContent: order,
  });

  res.json({ payUrl: params.toString() });
});

2. 前端实现 ​

vue
<template>
  <div>
    <button @click="handlePayment">支付￥9.9</button>
    <div id="alipay-container"></div>
  </div>
</template>

<script>
export default {
  methods: {
    async handlePayment() {
      try {
        const res = await axios.post("/api/create-order");
        const formHtml = res.data.payUrl;

        // 动态渲染支付表单
        const div = document.createElement("div");
        div.innerHTML = formHtml;
        document.body.appendChild(div);
        div.querySelector("form").submit();
      } catch (error) {
        this.$message.error("支付发起失败");
      }
    },
  },
};
</script>

四、微信支付（JSAPI）关键代码 ​

javascript
// 获取微信支付配置
async function getWxPayConfig(orderId) {
  const res = await axios.post("/api/wxpay-config", { orderId });
  return res.data;
}

// 发起支付
function wxPay() {
  WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: "wx1234567890",
      timeStamp: "1627534567",
      nonceStr: "5K8264ILTKCH16CQ",
      package: "prepay_id=wx2014102720093955226576900",
      signType: "RSA",
      paySign: "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7va...",
    },
    function (res) {
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        // 支付成功
      }
    }
  );
}

五、Stripe 信用卡支付集成 ​

1. 安装 SDK ​

bash
npm install @stripe/stripe-js

2. 前端实现 ​

react
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardElement),
    });

    if (error) {
      console.log('[error]', error);
    } else {
      const res = await axios.post('/api/charge', {
        paymentMethodId: paymentMethod.id,
        amount: 1999 // 单位：分
      });
      handlePaymentResult(res.data);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit">支付</button>
    </form>
  );
}

六、支付状态管理方案 ​

  1. 支付状态机设计：

    mermaid
    graph LR
A[待支付] -->|用户操作| B[支付中]
B -->|成功| C[支付成功]
B -->|失败| D[支付失败]
C --> E[订单完成]
D --> F[失败处理]

  2. 轮询检查方案：

javascript
async function checkPaymentStatus(orderId) {
  const MAX_RETRY = 5;
  let retryCount = 0;

  const poll = setInterval(async () => {
    const res = await fetch(`/api/orders/${orderId}/status`);
    const { status } = await res.json();

    if (status === "paid" || retryCount >= MAX_RETRY) {
      clearInterval(poll);
      handleStatusUpdate(status);
    }

    retryCount++;
  }, 3000);
}

七、防欺诈与风控措施 ​

  1. 前端监控点：

    • 异常设备指纹（通过 FingerprintJS 采集）
    • 支付行为模式分析（点击频率、操作路径）
    • 地理位置与 IP 分析（通过 MaxMind 数据库）

  2. 验证码集成：

javascript
import Turnstile from "react-turnstile";

<Turnstile
  sitekey="your-sitekey"
  onVerify={(token) => setCaptchaToken(token)}
/>;
  1. 黑名单拦截示例：
javascript
// 调用风控服务
async function checkRisk(params) {
  const riskData = await riskService.check({
    userId: currentUser.id,
    ip: getClientIP(),
    deviceId: fingerprint,
  });

  if (riskData.score > 80) {
    throw new Error("交易存在风险");
  }
}

八、调试与测试策略 ​

  1. 测试卡号列表：

    支付方式测试卡号结果
    Visa4242 4242 4242 4242成功支付
    MasterCard5555 5555 5555 4444失败

  2. 支付宝沙箱环境配置：

javascript
// 开发环境配置
const alipaySdk = new AlipaySdk({
  appId: "沙箱APP_ID",
  privateKey: fs.readFileSync("./sandbox-pem/private_key.pem"),
  alipayPublicKey: fs.readFileSync("./sandbox-pem/alipay_public_key.pem"),
  gateway: "https://openapi.alipaydev.com/gateway.do",
});

九、合规性要求 ​

  1. 必备要素：

    • 清晰的商户名称（与营业执照一致）
    • 备案域名（中国大陆）
    • 用户协议和隐私政策
    • 发票开具入口

  2. PCI DSS 合规要点：

    • 禁止存储 CVV/CVC 码
    • 支付页面不能嵌入第三方 iframe
    • 使用 TLS 1.2+加密传输

十、性能优化方案 ​

  1. 支付 SDK 按需加载：
javascript
const loadStripe = () => import("@stripe/stripe-js");

async function initPayment() {
  const stripe = await loadStripe();
  // 初始化支付
}
  1. 预创建订单：
javascript
// 页面加载时预创建未支付订单
useEffect(() => {
  createPreOrder().then((orderId) => {
    setOrderId(orderId);
  });
}, []);

通过以上方案，可以实现安全、合规且高性能的支付功能集成。建议：

  1. 生产环境使用 HTTPS 并启用 HSTS
  2. 定期进行安全审计
  3. 保持支付 SDK 版本更新
  4. 使用 Webhook 双重验证机制
  5. 实施全链路监控（如 Sentry+Prometheus）