uni-app 接入IAP支付

<template>
  <view class="content">
    <view class="uni-list">
      <radio-group @change="(e) => { productId = event.detail.value }">
        <label
          class="uni-list-cell"
          v-for="(item, index) in productList"
          :key="index"
        >
          <radio :value="item.productid" :checked="item.productid === productId" />
          <view class="price">
            <view>
                {{ getTokens(item.price) }} 代币名称
            </view>
            <view>
                {{ item.price }} 元
            </view>
          </view>
        </label>
      </radio-group>
    </view>
    <view class="uni-padding-wrap">
      <button
        class="btn-pay"
        @click="payment"
        :loading="loading"
        :disabled="getDisabled"
      >
        确认支付
      </button>
    </view>
  </view>
</template>
<script>
import {
    Iap,
    IapTransactionState
} from "@/common/iap.js"
import BigNumber from 'bignumber.js';
import { 
    cloneDeep,
    isEqual,
    sortBy 
} from 'lodash';
const tokensIds = [
    1,
    6,
    20,
    45,
    79,
    168,
    328,
    648
]
const tokensPrefix = 'tokens_' // 苹果开发者平台，自定义的代币前缀（产品 ID）
export default {
  data() {
   return {
    tokensIdsList: [],
    productList: [],
    loading: false,
    disabled: true,
    productId: "",
   };
  },
  computed: {
   getTokens() {
    return (tokens) => {
     return new BigNumber(tokens).multipliedBy(0.7)
    }
   },
   getDisabled() {
    return this.disabled || !this.productId
   },
   getUserName() {
    return '当前登录用户的唯一标识'
   },
  },
  onLoad() {
   let list = cloneDeep(tokensIds)
   this.productList = list.map(item => {
    return {
     productid: `${tokensPrefix}${item}`,
     price: item
    }
   })
   let products = list.map(item => `${tokensPrefix}${item}`)
   this.tokensIdsList = products
   
   // #ifdef APP-PLUS
   this._iap = new Iap({
    products
   })
   this.$nextTick(() => {
    this.init();
   })
   // #endif
  },
  onShow() {
   // #ifdef APP-PLUS
      if (this._iap._ready && !this.disabled) {
    this.restore();
      }
   // #endif
  },
  methods: {
   async init() {
    uni.showLoading({
     title: '检测支付环境...'
    });
  
    try {
     // 初始化，获取iap支付通道
     await this._iap.init();
     // 从苹果服务器获取产品列表
     let list = await this._iap.getProduct();
     // 校验本地产品列表是否与苹果服务器一致
     if(isEqual(cloneDeep(tokensIds).sort(), list.map(item => item.price).sort())) {
      // 升序排序后赋值
      this.productList = sortBy(list, (item) => item.price)
     } 
     // 填充产品列表，启用界面
     this.disabled = false;
    } catch (e) {
     console.error(e)
    } finally {
     uni.hideLoading();
    }
    if (this._iap._ready) {
     this.restore();
    }
   },
   async restore() {
    // 检查上次用户已支付且未关闭的订单，可能出现原因：首次绑卡，网络中断等异常
    uni.showLoading({
     title: '正在检测已支付订单...'
    });
    try {
     // 从苹果服务器检查未关闭的订单，可选根据 username 过滤，和调用支付时透传的值一致
     const transactions = await this._iap.restoreCompletedTransactions(this.getUserName)
     if (!transactions.length) {
      return;
     }
     // 筛选出未支付的订单
     transactions.filter(item => item.transactionState === IapTransactionState.failed).forEach(item => {
      // 关闭未支付的订单
      this._iap.finishTransaction(item)
     })
     // 处理已支付的订单，此时用户已付款，在服务器端请求苹果服务器验证票据
     let transaction = transactions.find(item => item.transactionState === IapTransactionState.purchased)
     if(!transaction?.transactionReceipt){
      return;
     }
     
     // 请求后端API，根据API返回的订单数组关闭订单，数组内容为：['transactionIdentifier 交易唯一标识'，'transactionIdentifier 交易唯一标识']
     let res = await ['请求后端API']({
      'receipt-data': transaction.transactionReceipt
     })
     // 循环关闭已支付订单
     res.forEach(item => {
      this._iap.finishTransaction({
       transactionIdentifier: item
      })
     })
    } catch (e) {
     console.error(e)
    } finally {
     uni.hideLoading();
    }
   },
   async payment() {
    if (this.loading == true) {
     return;
    }
    this.loading = true;
    uni.showLoading({
     title: '支付处理中...'
    });
    try {
     // 请求苹果支付
     const transaction = await this._iap.requestPayment({
      productid: this.productId,
      username: this.getUserName, //根据业务需求透传参数，关联用户和订单关系
      manualFinishTransaction: true,
     });
     // 支付成功后关闭订单
     if (this._iap._ready) {
      this.restore();
     }
    } catch (e) {
     console.error(e)
    } finally {
     this.loading = false;
     uni.hideLoading();
    }
   }
  }
 };
</script>

<style>
.content {
  padding: 15px;
}

button {
  background-color: #007aff;
  color: #ffffff;
}

.uni-list-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.price {
  margin-left: 10px;
}

.btn-pay {
  margin-top: 30px;
}
</style>