uniapp ios 沙盒支付（苹果支付）

文章发布于2021年07月17日 19:34，归类于：未分类

此文带书名号"《》"的链接为文档地址，不带书名号的链接为跳转地址。

一、创建项目

1、打开 App Store Connect，创建项目。

App Store Connect：https://developer.apple.com/app-store-connect/

App Store Connect 创建项目

2、创建内购项目

《App 内购买项目》：https://developer.apple.com/cn/in-app-purchase/，随便创建一个内购项目，此文创建的是“消耗型项目”，内购项目的“产品ID”必须唯一。

applepay 创建内购项目

二、沙盒测试

《沙盒测试》：https://developer.apple.com/cn/apple-pay/sandbox-testing/

1、创建沙盒-测试员

沙盒测试员的账号，需要使用从未与 Apple ID 关联的电子邮件地址。

沙盒-测试员：https://appstoreconnect.apple.com/access/testers

apple 沙盒测试员

2、添加测试卡号

1、从 iPhone 设备上退出 iCloud 登录，登录沙盒-测试员的账号。

登录沙盒-测试员的账号

2、打开“钱包”，添加信用卡或借记卡到“钱包”，在《沙盒测试》内找到适用于 App 和网页的测试卡，随便输入一个适合你的地区的卡号，此文使用的是 Discover 测试卡片。

iPhone 添加信用卡或借记卡到“钱包”

三、打包自定义调试基座

测试沙盒支付需要使用自定义调试基座!

打开HBuilder X，manifest.json。

1、App模块配置-Payment(支付)-勾选“苹果应用内支付”。

App模块配置-苹果应用内支付

2、如果勾选微信支付，需要取消勾选 ios 的微信支付。（如果勾选了，即使 ios 版本 App 内没有使用 ios 微信支付，也可能审核不通过）

3、然后打包 ios 自定义调试基座。

uniapp 打包 ios 自定义调试基座

四、uniap iap 支付测试

<template>
	<view class="Test-container">
		<view class="btns">
			<button type="primary" @click="getChannels">获取支付通道</button>
			<button type="primary" @click="restoreComplateRequest" v-if="iap">获取已购买商品</button>
		</view>

		<view class="list">
			<view class="item" v-for="i in product_list" :key="i.productid">
				<view class="title">{{i.title}}</view>
				<view class="price">{{i.price}}元</view>
				<button type="warn" @click="pay(i)">支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iap: null, // 支付通道
				ids: ['app_store_order_balance_1', 'app_store_order_balance_12',
				'app_store_order_balance_50'], // 应用内购项目产品 ID 数组
				product_list: [] // 应用内购项目列表
			};
		},
		methods: {
			// 获取支付通道
			getChannels() {
				// #ifdef APP-PLUS
				plus.payment.getChannels(res => {
					let channel = res.find(i => i.id === 'appleiap')
					this.iap = channel ? channel : null
					this.requestOrder()
				}, function(e) {
					// plus.nativeUI.alert("获取支付通道失败，请稍后重试。", function() {}, "提示");
				})
				// #endif
			},
			// 获取内购项目列表
			requestOrder() {
				// #ifdef APP-PLUS
				this.iap.requestOrder(
					this.ids,
					res => {
						this.product_list = res
					},
					function(errormsg) {
						plus.nativeUI.alert("获取应用内购项目失败，请稍后重试。", function() {}, "提示");
					}
				)
				// #endif
			},
			// 调起支付
			pay(i) {
				// #ifdef APP-PLUS
				plus.payment.request(this.iap, {
					productid: i.productid,
					optimize: true // 支付时设置 optimize: true  
				}, result => {
					// 支付成功回调
					console.log("plus.payment.request-success--------------------",JSON.stringify(results));
				}, e => {
					// 用户取消支付或者调起支付失败回调
					restoreComplateRequest()
				});
				// #endif
			},
			// 获取已购的非消耗性商品和订阅商品
			restoreComplateRequest() {
				this.iap.restoreComplateRequest({}, results => {
					// results 格式为数组存放恢复的IAP商品交易信息对象 IAPTransaction，通用需将返回的支付凭证传给后端进行二次认证  
					console.log('restoreComplateRequest-results---', JSON.stringify(results))
				}, e => {
					// 错误回调
					console.log('restoreComplateRequest-results ---fail---', JSON.stringify(e))
				});
			}
		}
	}
</script>

<style lang="scss">
	.Test-container {
		padding: 24rpx;

		.btns {
			button {
				margin-bottom: 24rpx;
			}
		}

		.list {
			margin-top: 24rpx;

			.item {
				margin-bottom: 24rpx;
				padding: 30rpx;
				border-radius: 24rpx;
				box-shadow: 0rpx 12rpx 36rpx 0rpx rgba(0, 0, 0, 0.04);
				background-color: #252526;

				.title {
					margin-bottom: 24rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.price {
					margin-bottom: 24rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #FF2C4C;
				}
			}
		}
	}
</style>

uniap iap 支付

问题记录

1、requestOrder 获取内购项目列表时，第一个参数是一个数组，即应用内购项目产品 ID 的数组。

['app_store_order_balance_1', 'app_store_order_balance_12','app_store_order_balance_50']

iap 支付测试

2、plus.payment.request 成功后回调返回一个参数，里面的内容如下，一般需要把 transactionReceipt 传给后台。

{
	"payment": {
		"productid": "balance_6",
		"quantity": "1"
	},
	"transactionDate": "2021-07-17 12:02:43",
	"transactionIdentifier": "1000000843800112", // 交易id
	"transactionReceipt": "ewoJInNpZ25hdHVyZSIg", // 校验体，次数省略几百字
	"transactionState": "1"
}

3、restoreComplateRequest 成功回调，如果有数据，返回的是数组。

[{
		"payment": {
			"productid": "balance_6",
			"quantity": "1"
		},
		"transactionDate": "2021-07-17 12:02:43",
		"transactionIdentifier": "1000000843800112",
		"transactionReceipt": "ewoJInNpZ25hdHVyZSIg",
		"transactionState": "1"
	},
	{
		"payment": {
			"productid": "balance_12",
			"quantity": "1"
		},
		"transactionDate": "2021-07-17 12:04:23",
		"transactionIdentifier": "1000000343800112",
		"transactionReceipt": "ewosdqdInNpZ25hdHVyZdqqSIg",
		"transactionState": "1"
	}
]

1、使用自定义调试基座测试

使用自定义调试基座测试会有很多问题，例如 plus.payment.request 的回调会提前执行或者不执行。每次支付操作都要重复暂停、运行自定义调试基座测试。

打开HBuilder X。

1、运行-运行基座选择-自定义调试基座（iOS）

运行-运行基座选择-自定义调试基座

2、运行-运行到手机或者模拟器-运行到 iPhone

运行到手机或者模拟器

2、使用原生 App 云打包测试

原生 App 云打包测试，选择开发证书打包。这个比自定义调试基座测试体验更好，plus.payment.request 不会出问题。