接入指南

接入说明

前置优惠组件是一个小程序插件，商家可以在小程序中集成前置优惠组件，向用户展示商品优惠信息。前置优惠组件有以下几种使用场景：

场景	支持在哪里接入	是否支持页面组件
商品领券，展示券场景	小程序商品详情页接入小程序商品订单页接入	否
会员积分优惠	小程序商品详情页接入	是
会员等级专享价优惠	小程序商品详情页接入	是
消费金优惠	小程序商品详情页接入小程序商品订单页接入	是

商家接入前置优惠组件时，可以通过组件里的 获取优惠信息 函数，获取到当前商品的优惠信息。

获取优惠信息成功后，可以选择两种接入展示优惠信息的模式：

商家使用自有页面，适配商品优惠信息。

商家使用 前置优惠组件，展示商品优惠信息。

在展示商品优惠的场景，目前支持两个版本：

新版本 前置优惠组件获取优惠信息：支持查询专享价、支付券（包含小程序商品券）、全场券、平台红包等优惠信息，新版本中不包括前端样式。

老版本 支持将专享价、平台券、平台红包合并在组件中展示，限时优惠样式如下图。

接入流程

整体的接入流程如下图所示：

使用须知

使用该组件前请完成“开通交易组件”，交易组件开通完成后即开通了前置优惠组件。

使用该组件前请上报至少一个商品，如果接入消费金则提报消费金商品，其它商品类型同理。

支付宝客户端 10.1.85 及以上版本支持已使用分包的主体小程序应用组件。

不支持较早版本的 APPID 为 8 位数字的小程序接入该组件。

静态加载仅支持一个小程序最多关联 10 个组件，动态加载无限制。

本组件使用了新版框架提供的能力，需设置小程序的最低基础库版本至 2.8.9 及以上。配置操作详情可查看配置最低基础库版本。

接入指引

1、在小程序中声明使用插件

在小程序项目的根目录 app.json中声明使用插件。

tradePay指组件名，支持由用户自行定义，使用组件时以自定义名称为准。

{
  "plugins": {
    "tradePay": {
      "version": "*", // 目前只支持设置 * ，自动选择版本
      "provider": "2021003178648009" // 组件Id，固定不变
    },
  }
}

2、商品详情页获取优惠信息

在商品详情页，通过获取优惠信息函数getDetailPageDiscountInfo()获取优惠信息。参数详情可查看商品详情页获取优惠信息。

商品详情页接入组件代码示例：

// 引入插件
const plugin = requirePlugin('tradePay');
Page({
  async onLoad() {
    const params = {
      // 仅为代码说明，具体参数参考入参表格！
      itemDetailInfo: {
        outItemId: 'zh030206',
        outSkuId: 'zh030206-1',
        price: '100.1',
      },
    };
    const res = await plugin.getDetailPageDiscountInfo(params) || {};
    const {
      success,
      resultCode, // 错误码
      resultMsg, // 错误信息
      showStatus, // 是否要展示组件
      buyRestrict, // 是否允许购买
      consultDetailInfoList = [], // 商品每个sku的优惠信息详情
    } = res;
    if (!success) {
      console.error('商详前置优惠接口失败');
    }
    ......
  }
});

3、商品订单页获取优惠信息

在商品订单页，通过获取优惠信息函数getOrderPageDiscountInfo()获取优惠信息。参数详情可查看商品订单页获取优惠信息。

商品订单页接入组件代码示例：

// 引入插件
const plugin = requirePlugin('tradePay');
Page({
  async onLoad() {
    const params = {
      // 订单详细信息，仅为代码说明，具体参数参考入参表格！
      orderDetailInfo: {
        amount: '2', // 订单总金额
        itemDetailInfoList: [{
          outItemId: 'zh030206',
          outSkuId: 'zh030206-1',
          price: '100.1', // 商品价格
          quantity: 2, // 数量
        }],
      },
    };
    const discountResult = await plugin.getOrderPageDiscountInfo(params);
    const {
      success,
      resultCode, // 错误码
      resultMsg, // 错误信息
      showStatus, // 是否要展示组件
      buyRestrict, // 是否允许下单
      activityConsultId, // 咨询ID，在调用支付 API 时回传
      totalPromoAmount, // 平台优惠-总优惠金额
      totalOrderAmount, // 平台优惠-总订单金额
      voucherPromoAmount, // 券优惠金额
      couponPromoAmount, // 红包优惠金额
      channelPromoAmount, // 渠道优惠金额
      promoAmountInfoList, // 优惠金额详细信息
      itemConsultDetailInfoList, // 商品详细信息
      voucherConsultInfoList, // 优惠详细信息
    } = discountResult;
    if (!success) {
      console.error('下单前置优惠接口失败');
    }
    ......
  }
});

4、展示优惠组件

如果商户仅使用前置优惠组件查询优惠信息，则不需要通过本章节的方法展示优惠组件。

在商品详情页/商品订单页展示优惠信息可以直接调用 前置优惠组件，并将上一步获取到的优惠信息传入组件。

声明组件

组件地址填写：plugin://${app.json里面声明的组件名称}/discountCard；

"usingComponents": {
  // 商品订单页前置优惠组件
  "order-discount-card": "plugin://tradePay/orderDiscountCard",
  // 商品详情页前置优惠组件
  "detail-discount-card": "plugin://tradePay/detailDiscountCard",
}

使用组件

商户开发者可以通过style，或者class prop控制前置优惠组件的属性（如：背景色、边框）来适配小程序的页面。

此外，建议开发者前置校验一下获取优惠信息步骤拿到的接口响应的 success状态（如：接口可能返回 null / { success: false, ...... }，使用者应当自主优先判断抛弃前述异常情况下在小程序页面中做 setData() 操作引起前置优惠组件重新渲染），而不是将接口响应回传给前置优惠组件。

如果使用者使用自有的商详页，需要在用户更改了选择的商品规格后重新走本章节3，4的步骤，以更新展示成对应的优惠信息。

<view>
  <order/detail-discount-card
    class=""
    discountResponse="{ {「获取优惠信息」步骤中拿到的接口响应} }" //discountResult
  />
</view>

前置优惠组件接入文档

接入指南#

接入说明#

接入流程#

使用须知#

接入指引#

1、在小程序中声明使用插件#

2、商品详情页获取优惠信息#

3、商品订单页获取优惠信息#

4、展示优惠组件#

声明组件#

使用组件#