wx.miniapp.IAP实现 Apple 支付
使用微信Dount多端平台提供的wx.miniapp.IAP实现 Apple 支付的详细流程及注意事项
前言
微信Dount多端平台最近内测提供了可以将小程序转化为安卓和iOS的能力，想把之前做过的小程序转化为iOS，因为内容含有虚拟物品付费，所以就需要用到[代码]Apple 支付[代码]，多端平台提供了wx.miniapp.IAP一整套接口，但是并没有详细地解释，让我一个没有做过iOS开发的前端人员很是苦恼。所以在我经历各种坑之后就有了这篇文章。
准备工作
首先你要有苹果后台账号创建自己的APP
创建完成之后在这个顶部的[代码]商务[代码]完成各种协议和收款账户的填写
[图片]
创建虚拟商品（链接讲的很详细）
创建自己的沙盒测试号必须是没有注册过苹果ID的邮箱
[图片]
退出测试设备的苹果商店账号
完成以上步骤就可以进行开发了
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;
wx.miniapp.IAP.requestSKProducts({
productIdentifiers: [],// 这里是用户要购买的商品ID
success: (ret) => {
console.log(ret.invalidProductIdentifiers, '无效商品标识');
console.log(ret.products, '商品标识');
if (ret.products.length > 0) {
startPayment(null, ret.products);
} else {
startPayment('未查到商品', ret.products);
uni.hideLoading();
}
},
fail: (error) => {
console.error(`获取商品信息失败: ${error}`);
gPayFail();
uni.hideLoading();
}
});
}
[代码]
三、发起支付
API：[代码]wx.miniapp.IAP.addPaymentByProductIdentifiers[代码]
作用： 发起支付请求。
输入参数：
[代码]productIdentifier[代码]：商品标识符，指定需要支付的商品。
[代码]success[代码]：支付请求成功的回调函数，返回支付请求的结果。
[代码]fail[代码]：支付请求失败的回调函数，返回错误信息。
输出参数： 无直接输出参数，通过回调函数处理支付请求的结果。
[代码]function startPayment(err, productIdentifier) {
if (err) {
uni.showToast({
title: err,
icon: "none",
});
gPayFail();
uni.hideLoading();
return;
}
wx.miniapp.IAP.addPaymentByProductIdentifiers({
productIdentifier: productIdentifier[0].productIdentifier,
success: (args) => {
console.log('拉起支付成功', args);
uni.hideLoading();
},
fail: (args) => {
console.error('拉起支付失败', args);
gPayFail();
uni.hideLoading();
}
});
}
[代码]
四、处理交易
作用： 处理交易状态更新，包括成功、失败、恢复等。
输入参数：
[代码]transaction[代码]：交易对象，包含交易状态、交易收据等信息。
输出参数： 无直接输出参数，通过交易状态处理不同的逻辑。
[代码]function handleTransaction(transaction) {
if (transaction.transactionState === "SKPaymentTransactionStatePurchased" ||
transaction.transactionState === "SKPaymentTransactionStateRestored") {
console.log(transaction.transactionReceipt, '订单收据');
finishTransaction(null, transaction);
} else if (transaction.transactionState === "SKPaymentTransactionStateFailed") {
finishTransaction('交易失败', transaction);
gPayFail();
} else if (transaction.transactionState === "SKPaymentTransactionStateDeferred") {
finishTransaction('等待外部操作', transaction);
}
}
[代码]
五、结束交易
API：[代码]wx.miniapp.IAP.finishTransaction[代码]
作用： 完成交易，通知系统交易已经处理完毕。
输入参数：
[代码]transactionIdentifier[代码]：交易标识符，指定需要结束的交易。
[代码]success[代码]：结束交易成功的回调函数，返回结果。
[代码]fail[代码]：结束交易失败的回调函数，返回错误信息。
输出参数： 无直接输出参数，通过回调函数处理结束交易的结果。
[代码]function finishTransaction(err, transaction) {
if (err) {
uni.showToast({
title: err,
icon: "none",
});
return;
}
wx.miniapp.IAP.finishTransaction({
transactionIdentifier: transaction.transactionIdentifier,
success: (args) => {
console.log('完成交易 success', args);
gPaySuccess();
},
fail: (args) => {
console.error('完成交易 fail', args);
gPayFail();
}
});
}
[代码]
六、检查支付环境
API：[代码]wx.miniapp.IAP.canMakePayments[代码]
作用： 检查当前设备是否支持支付功能。
输入参数： 无
输出参数：
返回值：布尔值，表示设备是否支持支付功能。
[代码]function canMakePayments() {
const canMake = wx.miniapp.IAP.canMakePayments();
console.log(canMake, "检查是否可以发起支付");
return canMake;
}
[代码]
七、获取交易列表
API：[代码]wx.miniapp.IAP.getTransactions[代码]
作用： 获取当前未完成的交易列表。
输入参数：
[代码]success[代码]：获取交易列表成功的回调函数，返回交易列表。
[代码]fail[代码]：获取交易列表失败的回调函数，返回错误信息。
输出参数：
[代码]transactions[代码]：未完成的交易列表。
[代码]function getTransactions(callback) {
wx.miniapp.IAP.getTransactions({
success: (transactions) => {
console.log('当前交易列表', transactions);
callback(null, transactions);
},
fail: (error) => {
console.error('获取交易列表失败', error);
callback('获取交易列表失败');
}
});
}
[代码]
八、恢复已完成的交易
API：[代码]wx.miniapp.IAP.restoreCompletedTransactions[代码]
作用： 恢复已完成的交易。
输入参数：
[代码]success[代码]：恢复交易成功的回调函数，返回交易列表。
[代码]fail[代码]：恢复交易失败的回调函数，返回错误信息。
输出参数：
[代码]transactions[代码]：恢复的交易列表。
[代码]function restoreTransactions(callback) {
wx.miniapp.IAP.restoreCompletedTransactions({
success: (transactions) => {
console.log('恢复的交易', transactions);
callback(null, transactions);
},
fail: (error) => {
console.error('恢复交易失败', error);
callback(error);
}
});
}
[代码]
九、获取交易收据 URL
API：[代码]wx.miniapp.IAP.getAppStoreReceiptURL[代码]
作用： 获取交易收据的 URL。
输入参数：
[代码]success[代码]：获取收据 URL 成功的回调函数，返回收据 URL。
[代码]fail[代码]：获取收据 URL 失败的回调函数，返回错误信息。
输出参数：
[代码]url[代码]：交易收据的 URL。
[代码]function getReceiptURL() {
wx.miniapp.IAP.getAppStore
ReceiptURL({
success: (url) => {
console.log('交易收据 URL', url);
getReceiptData(null, url);
},
fail: (error) => {
console.error('获取收据 URL 失败', error);
getReceiptData('获取收据 URL 失败');
}
});
}
[代码]
十、获取交易收据数据
API：[代码]wx.miniapp.IAP.getAppStoreReceiptData[代码]
作用： 获取交易收据数据。
输入参数：
[代码]success[代码]：获取收据数据成功的回调函数，返回收据数据。
[代码]fail[代码]：获取收据数据失败的回调函数，返回错误信息。
输出参数：
[代码]data[代码]：交易收据数据。
[代码]function getReceiptData(err) {
if (err) {
uni.showToast({
title: err,
icon: "none",
});
return;
}
wx.miniapp.IAP.getAppStoreReceiptData({
success: (data) => {
console.log('交易收据数据', data);
// 调用后端接口传送交易数据
},
fail: (error) => {
console.error('获取收据数据失败', error);
}
});
}
[代码]
十一、刷新收据
API：[代码]wx.miniapp.IAP.requestSKReceiptRefreshRequest[代码]
作用： 发起请求刷新收据。
输入参数：
[代码]success[代码]：刷新收据成功的回调函数，返回结果。
[代码]fail[代码]：刷新收据失败的回调函数，返回错误信息。
输出参数：
[代码]args[代码]：刷新收据的结果。
[代码]function refreshReceipt(err, callback) {
if (err) {
uni.showToast({
title: err,
icon: "none",
});
return;
}
wx.miniapp.IAP.requestSKReceiptRefreshRequest({
success: (args) => {
console.log('刷新收据成功', args);
callback(null, args);
},
fail: (error) => {
console.error('刷新收据失败', error);
callback(error);
}
});
}
[代码]
十二、获取 App Store 信息
API：[代码]wx.miniapp.IAP.getStorefront[代码]
作用： 获取当前 App Store 店面的信息。
输入参数：
[代码]success[代码]：获取店面信息成功的回调函数，返回店面信息。
[代码]fail[代码]：获取店面信息失败的回调函数，返回错误信息。
输出参数：
[代码]info[代码]：App Store 店面信息。
[代码]function getStorefront(callback) {
wx.miniapp.IAP.getStorefront({
success: (info) => {
console.log('App Store 信息', info);
callback(null, info);
},
fail: (error) => {
console.error('获取 App Store 信息失败', error);
callback(error);
}
});
}
[代码]
十三、移除交易观察者
API：[代码]wx.miniapp.IAP.removeTransactionObserver[代码]
作用： 移除交易观察者。
输入参数：
[代码]success[代码]：移除交易观察者成功的回调函数，返回结果。
[代码]fail[代码]：移除交易观察者失败的回调函数，返回错误信息。
输出参数：
[代码]args[代码]：移除交易观察者的结果。
[代码]function removeObserver() {
wx.miniapp.IAP.removeTransactionObserver(ob);
}
[代码]
完整流程及注意事项
初始化：在应用启动时调用 [代码]initialize[代码] 函数添加交易队列观察者，以便处理交易状态的更新。
请求商品信息：用户选择商品后，调用 [代码]requestProduct[代码] 函数请求商品信息。首先检查设备是否支持支付（[代码]canMakePayments[代码]），然后通过 [代码]wx.miniapp.IAP.requestSKProducts[代码] 请求商品信息。
发起支付：在成功获取商品信息后，调用 [代码]startPayment[代码] 函数发起支付请求，通过 [代码]wx.miniapp.IAP.addPaymentByProductIdentifiers[代码] 实现。
处理交易：交易状态更新会触发观察者的 [代码]updatedTransactions[代码] 回调函数，调用 [代码]handleTransaction[代码] 函数处理不同的交易状态。
结束交易：在处理完交易后，调用 [代码]finishTransaction[代码] 函数结束交易，通知系统交易已经处理完毕。
恢复交易：提供恢复已完成交易的功能，方便用户在重新安装应用或更换设备后恢复已购买的内容。
获取交易收据：在交易完成后，可以通过 [代码]getReceiptURL[代码] 和 [代码]getReceiptData[代码] 获取交易收据，并发送到后端进行验证。
注意事项
检查支付环境：确保设备可以进行支付（[代码]canMakePayments[代码]），如果设备不支持支付，应提示用户并终止支付流程。
错误处理：每一步操作都需要进行错误处理，并且在错误发生时应向用户展示友好的提示信息。
安全性：获取订单收据后应及时发送到后端进行验证，确保支付的真实性。
交易状态处理：对于不同的交易状态，需要分别处理，确保在用户支付成功后能够正确提供商品或服务。
恢复交易：提供恢复已完成交易的功能，方便用户在重新安装应用或更换设备后恢复已购买的内容。
用户体验：在每一步操作（如请求商品信息、发起支付等）时应显示加载提示，确保用户了解当前正在进行的操作。
通过上述步骤和注意事项，可以完成苹果支付的流程，并确保在支付过程中为用户提供良好的体验。
