wx.miniapp.IAP实现 Apple 支付

使用微信Dount多端平台提供的wx.miniapp.IAP实现 Apple 支付的详细流程及注意事项

前言

微信Dount多端平台最近内测提供了可以将小程序转化为安卓和iOS的能力，想把之前做过的小程序转化为iOS，因为内容含有虚拟物品付费，所以就需要用到Apple 支付，多端平台提供了wx.miniapp.IAP一整套接口，但是并没有详细地解释，让我一个没有做过iOS开发的前端人员很是苦恼。所以在我经历各种坑之后就有了这篇文章。

准备工作

1. 首先你要有苹果后台账号创建自己的APP
2. 创建完成之后在这个顶部的商务完成各种协议和收款账户的填写
   
3. 创建虚拟商品（链接讲的很详细）
4. 创建自己的沙盒测试号必须是没有注册过苹果ID的邮箱
   
5. 完成以上步骤就可以进行开发了

Apple 支付开发流程简述

以下是微信Dount提供的接口和我自己的封装

一、添加交易队列观察者

API：wx.miniapp.IAP.addTransactionObserver

作用： 添加交易观察者以处理交易状态的更新，包括购买成功或失败等。

输入参数：

• ob：一个包含回调函数的对象，用于处理不同的交易事件。
  • updatedTransactions：处理交易状态更新。
  • restoreCompletedTransactionsFailedWithError：处理恢复购买时出现的错误。
  • paymentQueueRestoreCompletedTransactionsFinished：在恢复购买交易完成时调用。
  • shouldAddStorePayment：询问是否应该添加商店付款。
  • paymentQueueDidChangeStorefront：处理 App Store 店面变化。
  • didRevokeEntitlementsForProductIdentifiers：处理撤销某些产品的权限。

输出参数： 无直接输出参数，通过回调函数处理交易事件。

function initialize() {
   
	const ob = {
   
		updatedTransactions: (args) => {
   
			console.log('处理交易状态更新，例如购买成功或失败。:', args);
			args.transactions.forEach(item => handleTransaction(item));
		},
		restoreCompletedTransactionsFailedWithError: (args) => {
   
			console.log('处理恢复购买时出现的错误。:', args);
		},
		paymentQueueRestoreCompletedTransactionsFinished: (args) => {
   
			console.log('在恢复购买交易完成时调用。', args);
		},
		shouldAddStorePayment: (args) => {
   
			console.log('询问是否应该添加商店付款。', args);
		},
		paymentQueueDidChangeStorefront: (args) => {
   
			console.log('处理 App Store 店面变化。', args);
		},
		didRevokeEntitlementsForProductIdentifiers: (args) => {
   
			console.log('处理撤销某些产品的权限。', args);
		},
	};
	wx.miniapp.IAP.addTransactionObserver(ob);
}

二、请求商品信息

API：wx.miniapp.IAP.requestSKProducts

作用： 请求指定商品的详细信息。

输入参数：

• productIdentifiers：商品标识符数组，指定需要请求信息的商品。
• success：请求成功的回调函数，返回商品信息。
• fail：请求失败的回调函数，返回错误信息。

输出参数：

• invalidProductIdentifiers：无效的商品标识符数组。
• products：有效的商品信息数组。

function requestProduct(index, paySuccess, payFail) {
   
	const canMake = canMakePayments();
	if (!canMake) {
   
		uni.showToast({
   
			title: '没有支付环境',
			icon: 'none'
		});
		payFail();
		return;
	}

	gPaySuccess = paySuccess;
	gPayFail = payFail