更新记录

1.0.0（2026-04-11） 下载此版本

上传

平台兼容性

uni-app(3.7.3)

muqian-pay 支付组件

组件介绍

这是ai生成的文档，主要是把uni-pay的ios支付功能抽了出来，去掉了uniCloud依赖

muqian-pay 是一个基于 uni-app 框架开发的支付组件，目前主要支持苹果内购支付（Apple IAP）功能。该组件提供了完整的苹果内购支付流程，包括订单创建、支付请求、票据验证、漏单处理等功能。

功能特性

• 支持苹果内购支付（Apple IAP）
• 提供完整的支付流程处理
• 内置漏单检测和处理机制
• 本地缓存订单信息，防止丢单
• 支持支付结果回调通知

安装方法

将组件文件复制到项目的 uni_modules 目录下即可使用。

使用方法

1. 引入组件

在需要使用支付功能的页面中引入组件：

<template>
  <view>
    <muqian-pay ref="pay" @success="onPaySuccess" @cancel="onPayCancel" @fail="onPayFail" :verify="verify" />
    <button @click="handlePay">发起支付</button>
  </view>
</template>

<script>
import muqianPay from '@/uni_modules/muqian-pay/components/muqian-pay/muqian-pay.vue'

export default {
  components: {
    muqianPay
  },
  methods: {
    // 发起支付
    handlePay() {
      this.$refs.pay.pay({
        type: 'appleiap',
        productid: 'com.example.product',
        order_no: 'ORDER123456'
      })
    },

    // 支付成功回调
    onPaySuccess() {
      console.log('支付成功')
    },

    // 支付取消回调
    onPayCancel(err) {
      console.log('用户取消支付', err)
    },

    // 支付失败回调
    onPayFail(err) {
      console.log('支付失败', err)
    },

    // 验证函数
    async verify(params) {
      // 这里调用后端接口验证苹果支付票据
      // 返回 true 表示验证成功，false 表示验证失败
      const res = await uni.request({
        url: 'https://api.example.com/verify-apple-pay',
        method: 'POST',
        data: params
      })
      return res.data.success
    }
  }
}
</script>

2. 初始化漏单检测

在应用启动时，可以调用 appleiapRestore 方法检测是否有漏单：

// 在 App.vue 的 onLaunch 中
onLaunch() {
  // 初始化漏单检测
  const payComponent = this.$refs.pay
  if (payComponent) {
    payComponent.appleiapRestore()
  }
}

API 说明

1. props

2. methods

pay 方法参数说明

3. 事件

注意事项

1. 苹果内购配置：使用前需要在苹果开发者后台配置好内购商品，并确保应用已正确配置了内购权限。
2. 验证服务器：必须实现 verify 函数，用于向服务器验证苹果支付票据的有效性，防止伪造支付。
3. 漏单处理：建议在应用启动时调用 appleiapRestore 方法检测是否有漏单，确保用户支付后能够正确获取商品。
4. 订单号：order_no 参数非常重要，用于标识订单，建议使用唯一的订单号。
5. 支付流程：组件会自动处理支付流程，包括初始化支付通道、请求支付、验证票据等步骤。
6. 错误处理：组件会捕获并处理支付过程中的错误，通过 cancel 和 fail 事件通知调用方。

支付流程

1. 调用 pay 方法发起支付
2. 组件初始化苹果内购 SDK
3. 获取产品信息
4. 请求苹果支付
5. 用户完成支付
6. 调用 verify 函数验证支付票据
7. 验证成功后完结订单并触发 success 事件

漏单处理机制

1. 组件会将订单信息缓存到本地存储
2. 调用 appleiapRestore 方法时，会查询苹果服务器获取已完成的交易
3. 对未验证的交易进行票据验证
4. 验证成功后完结订单

示例代码

完整使用示例

<template>
  <view class="container">
    <muqian-pay ref="pay" @success="onPaySuccess" @cancel="onPayCancel" @fail="onPayFail" :verify="verify" />
    <button class="pay-btn" @click="handlePay">购买商品</button>
  </view>
</template>

<script>
import muqianPay from '@/uni_modules/muqian-pay/components/muqian-pay/muqian-pay.vue'

export default {
  components: {
    muqianPay
  },
  data() {
    return {
      productId: 'com.example.product',
      orderNo: ''
    }
  },
  methods: {
    // 生成订单号
    generateOrderNo() {
      return 'ORDER_' + Date.now() + '_' + Math.floor(Math.random() * 10000)
    },

    // 发起支付
    handlePay() {
      this.orderNo = this.generateOrderNo()
      this.$refs.pay.pay({
        type: 'appleiap',
        productid: this.productId,
        order_no: this.orderNo
      })
    },

    // 支付成功回调
    onPaySuccess() {
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })
      // 这里可以处理支付成功后的逻辑，如更新用户状态、发放商品等
    },

    // 支付取消回调
    onPayCancel(err) {
      console.log('用户取消支付', err)
    },

    // 支付失败回调
    onPayFail(err) {
      uni.showToast({
        title: '支付失败',
        icon: 'none'
      })
      console.log('支付失败', err)
    },

    // 验证函数
    async verify(params) {
      try {
        const res = await uni.request({
          url: 'https://api.example.com/verify-apple-pay',
          method: 'POST',
          data: params
        })
        return res.data.success
      } catch (error) {
        console.error('验证失败', error)
        return false
      }
    }
  },
  onLoad() {
    // 检测漏单
    setTimeout(() => {
      if (this.$refs.pay) {
        this.$refs.pay.appleiapRestore()
      }
    }, 1000)
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.pay-btn {
  width: 100%;
  height: 45px;
  background-color: #007AFF;
  color: white;
  border-radius: 8px;
  font-size: 16px;
}
</style>

常见问题

1. 支付时提示 "无法连接到 iTunes Store"

解决方案：

• 检查网络连接
• 确保设备已登录 Apple ID
• 确保应用已正确配置内购权限

2. 支付成功但订单未完成

解决方案：

• 检查 verify 函数是否正确实现
• 确保服务器能够正确验证苹果支付票据
• 调用 appleiapRestore 方法检测漏单

3. 商品 ID 无效

解决方案：

• 确保商品 ID 在苹果开发者后台已配置
• 确保商品状态为 "已批准"
• 确保应用已通过审核并上架

版本历史

• v1.0.0：初始版本，支持苹果内购支付功能

联系我们

如有任何问题或建议，请联系我们的开发团队。