Nuxt.js技术咨询：如何在Vue文件中获取POST参数及Paytm回调数据

我来帮你搞定这个Paytm支付回调的问题！在Nuxt.js里直接在Vue组件里拿POST数据是行不通的——因为Paytm是把POST请求发送到服务器端，前端路由根本接收不到请求体。下面分两步给你解决：

不管你用的是Nuxt3还是Nuxt2，都得通过服务器端的接口来接收Paytm的POST数据，不能直接让前端页面接。

Nuxt3 实现方式 #

在项目的server/api目录下新建paytm-callback.js文件，用Nitro的API路由来处理：

export default defineEventHandler(async (event) => {
  // 读取Paytm发送的POST请求体数据
  const paytmCallbackData = await readBody(event);

  // 🔴 关键步骤：一定要验证Paytm的签名！
  // 这里用Paytm官方提供的签名校验逻辑，比如用他们的SDK或者自己实现
  // 示例伪代码：const isValid = verifyPaytmSignature(paytmCallbackData, YOUR_MERCHANT_KEY);

  if (/* 签名验证通过 */) {
    // 可以把交易数据存在session或者数据库里，方便前端后续获取
    event.context.session.paymentResult = paytmCallbackData;
    // 重定向到前端的结果页面，带个简单的状态参数
    return sendRedirect(event, `/payment-success?txnId=${paytmCallbackData.TXNID}`);
  } else {
    return sendRedirect(event, `/payment-failed?reason=invalid_signature`);
  }
});

Nuxt2 实现方式 #

Nuxt2用的是Express风格的中间件，在server/middleware目录新建paytm-callback.js：

export default function(req, res) {
  // 读取POST请求体
  const paytmCallbackData = req.body;

  // 同样要做签名验证！
  // const isValid = verifyPaytmSignature(paytmCallbackData, YOUR_MERCHANT_KEY);

  if (/* 签名合法 */) {
    // 存到session或者数据库
    req.session.paymentResult = paytmCallbackData;
    // 跳转到前端页面
    res.redirect(`/payment-success?txnId=${paytmCallbackData.TXNID}`);
  } else {
    res.redirect('/payment-failed?reason=invalid_signature');
  }
}

然后把Paytm商户后台的回调URL设置成你的API接口地址，比如https://your-domain.com/api/paytm-callback（Nuxt3）或者https://your-domain.com/paytm-callback（Nuxt2，需要配置路由）。

后端处理完POST数据后，我们可以通过两种方式把数据传给前端Vue组件：

方式1：通过URL查询参数获取 #

如果后端跳转时带了query参数（比如上面的txnId），直接在Vue组件里用路由对象拿：

Nuxt3 代码 #

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

// 获取URL里的交易ID和状态
const txnId = route.query.txnId;
const paymentStatus = route.query.status;
</script>

<template>
  <div v-if="txnId">
    <h2>支付成功！</h2>
    <p>交易ID：{{ txnId }}</p>
  </div>
  <div v-else>
    <h2>支付失败</h2>
  </div>
</template>

Nuxt2 代码 #

<script>
export default {
  mounted() {
    const txnId = this.$route.query.txnId;
    const paymentStatus = this.$route.query.status;
    // 处理逻辑
  }
}
</script>

方式2：通过API接口获取完整数据 #

如果需要获取更多交易细节（比如金额、用户信息），可以在后端把数据存在session或数据库，然后前端调用一个API接口来拿：

比如在server/api/payment-detail.js（Nuxt3）里写：

export default defineEventHandler(async (event) => {
  // 从session里取出之前存的支付数据
  const paymentDetail = event.context.session.paymentResult;
  if (!paymentDetail) {
    return { error: 'No payment data found' };
  }
  return paymentDetail;
});

然后Vue组件里调用这个接口：

<script setup>
const { data: paymentDetail, error } = await useFetch('/api/payment-detail');
</script>

<template>
  <div v-if="paymentDetail">
    <h2>支付详情</h2>
    <p>交易金额：{{ paymentDetail.TXNAMOUNT }}</p>
    <p>交易状态：{{ paymentDetail.STATUS }}</p>
  </div>
  <div v-if="error">
    <p>{{ error.message }}</p>
  </div>
</template>

千万别忘了签名验证！这是防止恶意伪造支付回调的关键，一定要按照Paytm官方文档的步骤，用你的商户密钥来校验回调数据的签名，不能跳过这一步。

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