如何通过PayPal API展示JS对象、跨页查看支付详情并存储至数据库

现有代码的核心问题 #

当前流程在前端拿到PayPal返回的支付详情details后直接硬跳转，没有建立数据传递链路，既无法把详情传到成功页，也没有对接后端完成数据库写入。

第一步：改造前端onApprove回调逻辑 #

调整支付成功后的处理流程，拿到details后先触发后端存库接口，存库成功后再携带核心交易标识跳转成功页，代码改造如下：

onApprove: function (data, actions) {
  return actions.order.capture().then(function (details) {
    // 提取支付核心字段，提交到自有后端接口
    const paymentPayload = {
      orderId: data.orderID,
      transactionId: details.purchase_units[0].payments.captures[0].id,
      payerEmail: details.payer.email_address,
      paidAmount: details.purchase_units[0].payments.captures[0].amount.value,
      currency: details.purchase_units[0].payments.captures[0].amount.currency_code,
      paymentStatus: details.status
    }
    // 调用后端接口完成数据提交
    return fetch('/Product/SubmitPaymentRecord', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(paymentPayload)
    }).then(response => response.json()).then(submitResult => {
      if (submitResult.isSuccess) {
        // 存库成功后跳转成功页，仅携带交易号作为查询参数，不暴露完整支付对象
        window.location.replace(`/Product/Success?transactionId=${paymentPayload.transactionId}`)
      } else {
        // 存库失败给出明确提示，附上交易号方便后续手动补单，不直接跳转成功页
        alert(`支付完成但记录同步失败，请联系客服并提供交易号：${paymentPayload.transactionId}`)
      }
    })
  })
}

第二步：后端实现数据库持久化 #

在对应业务控制器中新增SubmitPaymentRecord接口，处理逻辑：

• 接收前端传的支付核心字段
• 必须做二次校验：根据传过来的orderId调用PayPal服务端接口，核对实际支付状态、支付金额、交易号和前端传值是否一致，避免被前端篡改数据造成漏记、错记
• 校验通过后，将支付字段写入支付业务表（建议表结构包含：订单号、PayPal交易号、付款人邮箱、实付金额、币种、支付状态、支付完成时间）
• 写入成功后返回{isSuccess: true}的响应给前端

第三步：支付成功页实现详情展示 #

成功页的展示逻辑完全由后端驱动，无需依赖前端跨页传值：

1. 在Success接口中，从URL查询参数获取传入的transactionId
2. 根据transactionId查询之前存入数据库的支付记录
3. 将查询到的记录传递给视图，直接渲染为页面展示内容，参考匹配你当前路由结构的ASP.NET MVC接口写法：

   public ActionResult Success(string transactionId)
   {
       var record = _dbContext.PaymentRecords.FirstOrDefault(x => x.TransactionId == transactionId);
       if (record == null)
       {
           return RedirectToAction("Unsuccessfulpayment");
       }
       return View(record);
   }
   

4. 视图中直接读取数据库返回的记录字段，展示交易号、支付金额、付款人、完成时间等信息即可。

常见踩坑提醒 #

• 不要把完整details对象拼到URL、存在localStorage/sessionStorage里跨页传递：一方面对象体积过大URL无法承载，另一方面存在信息泄露、数据被手动篡改、多窗口支付串号的风险
• 不要跳过后端校验直接存库：前端返回的所有字段都可以被拦截篡改，必须通过后端调用PayPal接口核对真实支付状态，避免实际收0.01元却记录成高额订单的资损问题
• 不要在未完成存库的情况下直接跳转成功页：如果用户跳转时网络中断，会造成支付记录丢失，形成漏单

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