logo

支付环节

如果你已经设置了正确的 ZPay 支付的相关环境变量，你应该已经可以在本地环境中完成的实现支付了。 但是因为 ZPay 无法通知到本地 localhost 环境，所以在支付成功后，需要你收到触发支付成功，具体请看下文本地调试。

在本教程中，我们将详细介绍如何更改示例项目中的商品类目和价格。确保你已经按照《快速开始-准备工作》中的步骤注册并开通了 ZPay 支付服务，以及至少一个支付渠道（支付宝或微信）。

1. 准备工作

在开始之前，请确保你已经正确注册了 ZPay 支付，并在server/.env文件中配置了以下信息：

ZPAY_PAY_KEY=你的_zpay_pay_key
ZPAY_PAY_PID=你的_zpay_pay_pid
ZPAY_NOTIFY_URL=http://localhost:7010

完成环境变量配置后，分别在前端和后端运行启动命令，跑起来前端后端：

npm run dev

后端会自动读取环境变量的文件，并在zpay.config.ts中进行保存。NuxtBase默认支持alipay，如果你在ZPay中申请的的是微信渠道，请修改为wxpay。

const config = {
  sevenPay: {
    // zpay支付的key
    payKey: process.env.ZPAY_PAY_KEY,
    // zpay支付的pid
    payPid: process.env.ZPAY_PAY_PID,
    // notifyUrl
    notifyUrl: process.env.ZPAY_NOTIFY_URL,
    // zpay支付的支付类型(支付宝:alipay,微信:wxpay)
    payType: 'alipay',
  },
};

export default config;

启动成功后，点击「购买」按钮，如果配置正确，你应该会跳转到支付页面。默认支付金额为 0.1 元，支付成功后，你可以在 ZPay 后台查看支付通知。

2. 支付流程概览

下图展示了 NuxtBase 前端、后端和 ZPay 支付之间的交互流程，NuxtBase 已经为你封装好了完整的流程，你需要做的就是更改你的商品信息和价格。

3. 支付信息修改

3.1 购买商品类模板

商品的对应信息应该配置在后端，要修改商品价格和相关信息，请打开server/src/config/product.config.ts文件，并按如下示例进行编辑：

export const PRODUCT_LIST = [
  {
    // 商品ID（数据库和数据处理时使用，需确保唯一）
    id: "nuxbabase-01",
    // 商品名称（显示在支付页面）
    name: "购买NuxtBase模板",
    // 价格（单位：元）
    price: 0.1,
    // 描述
    desc: "NuxtBase基础模板，用户购买一次性商品",
  },
];
  • id: 商品 id，唯一标识符。此id将保存在数据库中，并用于标识用户购买的具体商品。请确保每个商品 id 唯一。
  • name: 商品名称。这将在支付页面和支付二维码上显示，建议名称简洁明了。
  • price: 商品价格，单位为元。可根据需要进行调整。
  • desc: 商品描述。目前用于前端/myself页面展示，帮助用户区分不同商品。

用户在需要支付时，我们会将orderId和returnUrl传递给后端，已获得支付链接，然后跳转到支付链接后，用户就可以实现支付。非订阅制模板的代码可以参考：/browser/components/Price.vue。

async function onPay() {
  // 请求后端
  const body = {
    // 商品id（需要和服务端config.production.config.ts保持一致）
    orderId: "nuxbabase-01",
    // 购买成功后回调地址
    returnUrl: `${location.origin}/myself`,
  };

  const res = await payStore.getPaymentUrl(body);

  if (res.success) {
    window.open(res.data, "_blank");
  }
}

前端需要确保支付时提交的orderId和后端配置的id保持一致！

3.2 订阅制模板

订阅制模板的商品价格配置同样在server/src/config/product.config.ts文件中，你可以根据需要进行修改。

export const PRODUCT_LIST = [
  {
    id: "nuxtbase-month",
    name: "NuxtBase月度会员",
    price: 0.1,
    duration: 30 * 24 * 60 * 60 * 1000,
    desc: "NuxtBase月度会员，用户购买后一个月内有效",
  },
  {
    id: "nuxtbase-quarter",
    name: "NuxtBase季度会员",
    price: 0.2,
    duration: 3 * 30 * 24 * 60 * 60 * 1000,
    desc: "NuxtBase季度会员，用户购买后三个月内有效",
  },
  {
    id: "nuxtbase-year",
    name: "NuxtBase年度会员",
    price: 0.3,
    duration: 365 * 24 * 60 * 60 * 1000,
    desc: "NuxtBase年度会员，用户购买后一年内有效",
  },
];

订阅制模板的代码可以参考：/browser/components/SubscribePrice.vue。

const onSubscribe = async (plan) => {
  const body = {
    // 商品id（需要和服务端config.production.config.ts保持一致）
    orderId: plan.id,
    // 购买成功后回调地址
    returnUrl: `${location.origin}/myself`,
  };

  const res = await payStore.getPaymentUrl(body);

  if (res.success) {
    window.open(res.data, "_blank");
  }
};

4. 本地调试（重要）

在本地调试时，ZPAY_NOTIFY_URL 设置为了http://localhost:7010/api/payment/notify。因为是本地环境地址，在你测试支付成功后，ZPay 支付是无法回调到你的本地服务的。所以这个回调需要你自己实现触发，以确保支付成功后的后续逻辑能够正常执行。

那么如何自己实现触发呢？

在支付成功后，ZPay 支付会跳转回你配置的前端页面，默认为http://localhost:3000/myself?key1=value1&key2=value2。此时，你可以将http://localhost:3000/myself的前端地址，替换成为http://localhost:7010/api/payment/notify，然后在浏览器访问即可，记得务必保留后面所有的参数！

完整的地址应该是：http://localhost:7010/api/payment/notify?key1=value1&key2=value2。

5. 注意事项

  1. 在本地调试期间，ZPAY_NOTIFY_URL 设置为了http ://localhost:7010/api/payment/notify，确保回调通知能够正确接收。上线前，请务必将此 URL 修改为实际服务器地址。
  2. 建议在测试期间，将价格设置为0.1元，上线前再修改为实际价格进行几遍完整的测试，避免扣没有必要的的服务费。

6. 上线前准备

上线前，请务必完成以下步骤：

  1. 修改server/.env中的ZPAY_NOTIFY_URL为你的服务器地址。例如：
ZPAY_NOTIFY_URL=https://yourdomain.com/api/payment/notify
  1. 确认所有配置正确应用，并在生产环境中进行全面测试。

通过以上步骤，你就可以成功修改示例项目的商品类目和价格，并确保支付流程顺畅无误!