uni-app小程序开发-商家会员卡接入

发表于 | 分类于
uni-app小程序开发-商家会员卡接入

前言

商家会员卡有3.1极速版和3.0两个版本，3.1极速版接入更简单，这里使用3.1极速版。

https://opendocs.alipay.com/open/03sx7u?pathHash=1abe9241

订购支付宝卡包插件

https://business.alipay.com/page/fw-market/home/detail/AM010401000000053393

注意

订购成功后，小程序模拟器要重启，否则可能无法加载新订购的插件。

添加SPI

https://open.alipay.com/develop/manage

SPI就是支付宝调用我们的API

开放平台 => API管理 => 实现官方标准API => 添加产品

选择 商家会员卡

添加后

API管理 => 实现官方标准API 找到 商家会员卡，点击 去开发就能配置地址，后台要根据支付宝要求进行接口开发。

开发文档

https://opendocs.alipay.com/apis/03bjlu

创建会员卡模板

这里在商家后台直接创建。没有通过接口创建。

https://b.alipay.com/page/member-operation/vip-card/base/home

创建后需要两个信息

  • 开卡的卡模板ID
  • 卡模板ID 所关联的 AppId

订阅消息

alipay.user.opencard.result.notify

开放平台 => 开发设置 => From 平台 中

搜索alipay.user.opencard.result.notify 并订阅。

开卡组件

配置组件

在小程序配置manifest.json 文件中加入如下配置

1
2
3
4
5
6
7
8
9
10
11
{
  "mp-alipay": {
    "usingComponents": true,
    "plugins":{
      "alipassToolKit": { 
        "version": "*",
        "provider": "2021001107697072" 
      }
    }
  },
}

页面中嵌入组件

1
2
3
4
5
6
7
8
9
<view class="action">
  <button
          type="ghost"
          class="btn-integration"
          @click="onOpenCard"
          >
    领取会员卡
  </button>
</view>

页面逻辑处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  methods: {
    onOpenCard() {
      var plugin = requirePlugin('alipassToolKit'); // 引用名称需与 app.json 中定义名称相同
      let params = {
        cardParams: {
          templateId: 'xxx', // 开卡的卡模板ID
          templateAppId: 'xxx', // 卡模板ID 所关联的 AppId
          outString: 'MembershipCard', //商家自定义透传信息
          pageType: 'half' //默认是 half
        },
        callback: function (res) {
          console.log('======', res);
          if (res.success === true) {
            console.log('----- success');
          }
        }
      };
      plugin && plugin.openCard(params);
    },
  }
}