uniapp 实现苹果应用内支付(可直接复制使用)

  1. 先根据uniapp官方链接,按步骤实行(了解官方操作,方便出现BUG不懵逼,也可直接复制下方代码直接使用)

  2. 如果沙箱环境遇到疑问可以参考

  3. 根据uniapp官方demo并加以改正 ApplePay.js :

/* 
    需求:两个或多个页面会使用到充值逻辑。
    
    思考:根据uniapp官方案例,一个页面需要写的代码太多,不适合多页面这么玩,冗余代码会很多,还不易维护;
    所以基于demo,再次封装,此次封装不是最好,只是刚好适合当前需求,后续可能还会迭代,可以根据自己需求修改。
    
    由于需求暂定,所以直接将 api请求 直接引入到当前页面使用。
*/
import api from '@/common/api/api.js'
import app from '@/utils/app.js'

const IapTransactionState = {
    purchasing: "0", // 应用程序商店正在处理的交易.
    purchased: "1", // 成功处理的交易.
    failed: "2", // 一个失败的交易.
    restored: "3", // 恢复用户以前购买的内容的事务.
    deferred: "4" // 处于队列中的事务,但其最终状态为等待外部操作
};

class Iap {

    _channel = null; // 支付渠道

    _channelError = null; // 获取支付渠道失败的对象

    _productIds = []; // Apple 官网后台 配置的内部购买项目列表

    _ready = false; // 是否还有未处理的交易

    constructor({
        products
    }) {
        this._productIds = products;
    }
    
    /* 
        初始化、获取支付渠道
    */
    init() {
        return new Promise((resolve, reject) => {
            this.getChannels((channel) => {
                this._ready = true;
                resolve(channel);
            }, (err) => {
                reject(err);
            })
        })
    }

    /** 
     * @description 向苹果服务器获取产品列表
     * @param productIds 产品列表
     */
    getProduct(productIds) {
        return new Promise((resolve, reject) => {
            this._channel.requestProduct(productIds || this._productIds, (res) => {
                resolve(res);
            }, (err) => {
                reject(err);
            })
        });
    }

    /**
     * @description 发起支付请求
     * @param orderInfo 订单信息
     */
    requestPayment(orderInfo) {
        return new Promise((resolve, reject) => {
            uni.requestPayment({
                provider: 'appleiap',
                orderInfo: orderInfo,
                success: (res) => {
                    resolve(res);
                },
                fail: (err) => {
                    uni.hideLoading();
                    reject(err);
                }
            });
        });
    }

    /**
     * @description 获取苹果服务器已支付且未关闭的交易列表
     * @param username 用户姓名
     */
    restoreCompletedTransactions(username) {
        return new Promise((resolve, reject) => {
            this._channel.restoreCompletedTransactions({
                manualFinishTransaction: true,
                username,
            }, (res) => {
                resolve(res);
            }, (err) => {
                reject(err);
            })
        });
    }

    /**
     * @description 关闭订单
     * @param transaction 订单对象
     */
    finishTransaction(transaction) {
        return new Promise((resolve, reject) => {
            this._channel.finishTransaction(transaction, (res) => {
                resolve(res);
            }, (err) => {
                uni.hideLoading();
                reject(err);
            });
        });
    }

    /**
     * @description 获取支付渠道
     * @param success 成功获取回调
     * @param fail    失败获取回调
     */
    getChannels(success, fail) {
        if (this._channel !== null) {
            success(this._channel)
            return
        }

        if (this._channelError !== null) {
            fail(this._channelError)
            return
        }

        uni.getProvider({
            service: 'payment',
            success: (res) => {
                this._channel = res.providers.find((channel) => {
                    return (channel.id === 'appleiap')
                })

                if (this._channel) {
                    success(this._channel)
                } else {
                    this._channelError = {
                        errMsg: 'paymentContext:fail iap service not found'
                    }
                    fail(this._channelError)
                }
            }
        });
    }

    get channel() {
        return this._channel;
    }
}

/* 实现支付 自定义逻辑   */
class realize {

    productItem = null; // 当前选择充值项id

    loading = false; // 是否允许提交充值

    //应用内购项目
    productList = ['leanmaster.app.rmb6', 'leanmaster.app.rmb18', 'leanmaster.app.rmb68',
        'leanmaster.app.rmb128',
        'leanmaster.app.rmb298', 'leanmaster.app.rmb698'
    ];

    // 调用官方案例
    _iap = new Iap({
        products: this.productList,
    });

    async init() {
        try {

            // 初始化,获取iap支付通道
            await this._iap.init();

            // 从苹果服务器获取产品列表
            this.productList = await this._iap.getProduct();

            // 将列表按照从小到大的顺序排好
            this.productList.sort((a, b) => {
                return a.price - b.price
            })

            // 默认选择第一个产品
            this.productItem = this.productList[0];

        } catch (e) {
            uni.showModal({
                title: "init",
                content: e.message,
                showCancel: false
            });
        } finally {
            uni.hideLoading();
        }

        if (this._iap._ready) {
            this.restore();
        }

    }

    async payment() {

        if (this.loading == true) {
            return;
        }

        this.loading = true;

        uni.showLoading({
            title: '支付处理中...'
        });

        // 请求苹果支付
        let transaction;
        try {

            // 从开发者服务器创建订单
            const orderId = await api.payApple({
                productId: this.productItem.productid,
                price: this.productItem.price
            });

            transaction = await this._iap.requestPayment({
                productid: this.productItem.productid,
                manualFinishTransaction: true,
                username: app.username, //根据业务需求透传参数,关联用户和订单关系
            });

            // 在此处请求开发者服务器,在服务器端请求苹果服务器验证票据 
            let verifyRes = await api.payAppleVerify(transaction);

            // 验证成功后关闭订单
            await this._iap.finishTransaction(transaction);

            if (verifyRes) {
                app.toast('支付成功')
            } else {
                app.toast('支付失败')
            }

            // 支付成功
        } catch (e) {

            this._iap.finishTransaction(transaction);

            if (e.errCode == 2) {
                app.toast('取消支付')
                return false;
            }

            app.toast('支付失败')
        } finally {
            this.loading = false;
            uni.hideLoading();
        }

    }


}

export {
    realize
}

  1. 调用页面 index.vue :
import {  realize } from "@/utils/ApplePay.js"

this._iap = new realize()
this._iap.init();

  1. 如有报错,仔细看看是否改动了代码,产生的bug。

ios 沙箱测试注意事项

一个测试账号相同产品仅能购买一次,重复测试需要去Apple后台清除购买记录(清除记录也需要等待很久时间,具体可以看请求时产生的订单时间,如果没有清掉,相同产品无论你买多少次,orderId是不会变的,而且会直接返回购买成功!!!)或重新添加 沙箱测试账号。

如果你的Apple ID在测试成员中,则可以不需要添加沙箱账号了,本身你的账号是有权限使用沙箱环境的;而且使用时也不需要去后台清除购买记录;会自动清掉。

微信截图_20230421163322.png

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值