uniapp环境下对抖音泛知识内容的支付交易系统的对接

unless
1,762 阅读4分钟

抖音泛知识交易系统即pay-button支付按钮在uniapp开发环境下的使用

抖音官方文档：developer.open-douyin.com/docs/resour…

行业 SDK 交易组件接入指南

首先在小程序/页面组件中判断是否支持SDK交易组件，该方法可以写在onload或mouted方法中

onLoad(options => {
  if (tt.canIUse("industrySDK.pay-button")) {
      console.log('支持pay-button组件')
  }else {
      console.log('不支持pay-button组件')
})

另外在使用组件时需要在页面 json 文件中进行引入

在uniapp目录src/pages.josn中需要使用pay-button组件的页面进行引入组件

{
    "path": "pages/pay/index",
    "navigationStyle": "custom",
    "style": {
        "navigationBarTitleText": "商品详情",
        "enablePullDownRefresh": false,
        "usingComponents": {
            "pay-button": "ext://industry/pay-button"
        }
    }
}

引入UniappToGroup组件对交易组件在uniapp下进行兼容（重要）

首先需要使用npm进行安装：

webpack安装：

npm i uniapp-to-group
npm地址：www.npmjs.com/package/uni…

vite安装（本次使用）：

npm i vite-plugin-uniapp-to-group
地址：www.npmjs.com/package/vit…
然后在vite.config.js文件中进行配置 

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
import UniappToGroup from './node_modules/vite-plugin-uniapp-to-group/src/index'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    UniappToGroup({
      // 对应 package.json 中引入插件步骤
      package: {
        ttPlugins: {
          dependencies: {
            'microapp-trade-plugin': {
              version: '1.0.5',
              isDynamic: true
            }
          }
        }
      },
      /**
       * app 中可以是任何字段，插件会将字段和app.json对比，有就合并字段，没有就添加字段
       * 合并字段 目前只处理 Array 和 Object 类型(注：[]和{}才会合并， null 类型不会合并)
       * Object 类型字段合并，在key相同的情况会覆盖value
       * Array 类型合并 是将两个数组合并
      */
      app: {
        pages: [
          // 下单页
          'ext://microapp-trade-plugin/order-confirm',
          // 退款申请页
          'ext://microapp-trade-plugin/refund-apply',
          // 退款详情页
          'ext://microapp-trade-plugin/refund-detail'
        ]
      }
    })
      
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

完成以上引入步骤后就可以在页面中使用pay-button组件

官方文档：developer.open-douyin.com/docs/resour… 

<template>
    <pay-button class="btn" 
        @error="handleError" 
        @placeorder="userLogin" 
        :mode="2" 
        :goods-type="1" 
        :biz-line="2" 
        @getgoodsinfo="getGoodsInfo" 
        @pay="handleUnrealPay" 
        :goods-id="productId" >
    </pay-button>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
//productId为服务端接入课程库之后，提审并通过审核拿到的课程ID
let productId = ref('productId')
const handleError = (event) => {
    console.log('handleError-event',event.detail)
    const { errNo , errMsg } = event.detail
}
const getGoodsInfo = (event) => {
    console.log('getGoodsInfo-event',event)
    return new Promise(resolve => { 
        // 在此处开发者可以进行商品数据请求，获取商品信息，然后将商品信息传入 resolve 函数 
        resolve({ 
            minLimits: 1, 
            maxLimits: 2, 
            dateRule: '周一至周日可用', 
            relationType: 1,
            validation: { 
                phoneNumber: { 
                    required: true  // 手机号是否必填 
                },
                reservationType: 1,
                reservationCount: 2,
            }, 
            // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
            marketingVersion: 2, 
        }); 
    }) 
}

const userLogin = (event) => {
    console.log('event',event)
    return new Promise((resolve, reject) => {
        tt.login({
            success() {
                // 用户登录成功并获取信息，则调用 resolve 函数，跳转至提单页
                resolve();
            },
            fail() {
                // 用户登录失败，则跳转提单页失败
                reject();
            }
        });
    });
  }

const handleUnrealPay = (event) => {
    console.log('pay-event: ' + event.detail)
    const { status , orderId , outOrderNo , result } = event.detail;
    if (status === 'success') {
        const { code } = result;
        if (code === 0) {
            // 支付成功
            tt.redirectTo({
                url: "usr://pages/course/courseInfo"
                success: (res) => {
                console.log("redirectTo调用成功 ", res);
            },
            fail: (res) => {
                console.log("redirectTo调用失败 ", res);
            }
            });
        } else {
            // 支付失败（超时、取消、关闭）
            uni.showToast({
                title: '支付失败，请重试',
                icon: 'none'
            });
        }
    } else {
        const { errMsg } = result;
    }
}

onLoad(options => {
    if (tt.canIUse("industrySDK.pay-button")) {
        console.log('支持pay-button组件')
    }else {
        console.log('不支持pay-button组件')
    }
    
});
onShow(() => {
   
});
</script>

<style lang="scss" scoped>

</style>

在此调用成功之后，会跳转到下单模板页面，即提单页：

image.png

注意：

pay-button的调试必须使用真机进行调试，开发者模拟器不支持，会出现如下错误（提示未登录），并且不能进行页面跳转：

image.png

同时真机调试可能会出现如下错误，但是不影响，不必理会，正常操作即可：

image.png

对于提单页的一键获取手机号码功能，可以在App.vue或组件方法中直接写入以下方法：

getPhoneNumber({ params, success, fail }) {
    const { iv, encryptedData } = params;
    // 开发者服务端解密 encryptedData，得到手机号
    let phoneNumber = ''
    httpRequest({
        url: '/api',
        method: 'post',
        data: {
            iv: iv,
            encryptedData: encryptedData
        }
    }).then(res => {
        phoneNumber = res.data;
        const result = {phoneNumber}
        // 回调前端模板
        success(result)
    });
}

在此，还需要在小程序管理后台进行预下单配置，即服务端支付模块，否则会在调试时出现预下单失败报错问题：

image.png

配置路径：小程序管理-->开发-->解决方案配置-->泛知识代运营服务商综合解决方案-->交易扩展点能力-->预下单回调扩展点。修改完配置项之后需要返回上一页进行发布才可生效。

image.png

image.png

若服务端对接失败则调用时会提示“开发者拒绝交易”，等待后端调试成功即可

image.png

正确接入完以上步骤后，小程序即可拉起收银台，正常进行付款操作，泛知识交易流程到此结束。

退款操作同理，只需要更改pay-button的配置项，配置退款回调接口即可完成退款操作。同时，服务商还提供了泛知识交易系统服务端退款接口，有需要的可自行接入使用：developer.open-douyin.com/docs/resour…

avatar
文章
阅读
粉丝