微信官方提供小程序接入商品审核回调通知会收到回调

为了帮助开发者通过视频直播账号变现，微信官方提供了小程序访问视频账号的能力。这是新功能，不能说是新开的，因为从内测到半完整版已经有一段时间了。

这个小程序包括微信端开的小店，以及商家自己开发的小程序。对应的官方用语是标准版事务组件和自定义版事务组件。

当视频账号与小程序打通后，视频账号的商业价值逐渐体现出来。视频号不仅可以为商家做品牌推广，还可以利用视频号为自己的小程序商城吸引流量。

我想说的是，你可以在视频号里开始直播，也可以列出自己小程序的产品。用户在观看直播的过程中，点击商品链接，直接跳转到商家小程序下单。商家可以自行开发。可以说，这个功能是万千想通过视频账号直播卖货的小程序开发者期待已久的功能。

我们说的是自定义版本的交易组件，按照官方文档操作，记录流程，然后就可以打开自定义版本的交易组件了。

上传产品评论

准备调用接口工具，例如接口地址：

请求参数：

{
    "out_product_id": "719",
    "title": "毛毯百搭休闲珊瑚绒毯子100*150cm",
    "path": "pages/productDetail/productDetail?id=719",
    "head_img": 
    [
       "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/2262470a04834b81a6e35cd4ccea3022.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/bfe16244f4bb4d38b26bb7aca797eac9.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/0f9a584041a04872baf368c2278f5cbb.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/0592d8b6b31e431d90096fd50a79fd3b.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/613e7388c84c4bd4a8dde3f8f4077d6c.png"
    ],
    "qualification_pics": [],
    "desc_info": 
    {
        "desc": "旅行毯办公室午睡毯空调毯子小被子",
        "imgs": 
        [
            "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/a2d499638f0d41c1b63a6f3243895e11.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/3fcf472a369b4353b53b6195dbe9c5ab.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/cc6ae3d7bd8648dda51ece5d6a3486e3.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/6a9c7bc9b5ab4284a1757289d8bba257.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/84ecce2caa0d4920bccb8b046e176085.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/1eb2d60219294f1d91c90d9f2984eb24.png"
        ]
    },
    "third_cat_id": 1445,
    "brand_id": 2100000000,
    "info_version": "1.0.0",
    "skus":
    [
        {
            "out_product_id": "719",
            "out_sku_id": "27359029914",
            "thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/4c8666db52914f60aac3a1d9dc362cb0.png",
            "sale_price": 990,
            "market_price": 1990,
            "stock_num": 200,
            "sku_code": "sku27359029914",
            "barcode": "9029914",
            "sku_attrs": 
            [
                {
                    "attr_key": "选择颜色",
                    "attr_value": "酒红"
                },
                {
                    "attr_key": "选择套装",
                    "attr_value": "100cm*150cm"
                },
                {
                    "attr_key": "选择面料",
                    "attr_value": "珊瑚绒毯"
                }
            ]
        },
{
            "out_product_id": "719",
            "out_sku_id": "27359029915",
            "thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/12164a04b6174c2ca363029e38541d33.png",
            "sale_price": 990,
            "market_price": 1990,
            "stock_num": 300,
            "sku_code": "sku27359029915",
            "barcode": "9029915",
            "sku_attrs": 
            [
                {
                    "attr_key": "选择颜色",
                    "attr_value": "蓝色"
                },
                {
                    "attr_key": "选择套装",
                    "attr_value": "100cm*150cm"
                },
                {
                    "attr_key": "选择面料",
                    "attr_value": "珊瑚绒毯"
                }
            ]
        },
{
            "out_product_id": "719",
            "out_sku_id": "27359029916",
            "thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/86ce2ecdb9ef489ebfb62aa1634990db.png",
            "sale_price": 990,
            "market_price": 1990,
            "stock_num": 400,
            "sku_code": "sku27359029916",
            "barcode": "9029916",
            "sku_attrs": 
            [
                {
                    "attr_key": "选择颜色",
                    "attr_value": "米黄"
                },
                {
                    "attr_key": "选择套装",
                    "attr_value": "100cm*150cm"
                },
                {
                    "attr_key": "选择面料",
                    "attr_value": "珊瑚绒毯"
                }
            ]
        },
{
            "out_product_id": "719",
            "out_sku_id": "27359029917",
            "thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/ea6957f402df49e587b19a3742befd53.png",
            "sale_price": 990,
            "market_price": 1990,
            "stock_num": 500,
            "sku_code": "sku27359029917",
            "barcode": "9029917",
            "sku_attrs": 
            [
                {
                    "attr_key": "选择颜色",
                    "attr_value": "深灰"
                },
                {
                    "attr_key": "选择套装",
                    "attr_value": "100cm*150cm"
                },
                {
                    "attr_key": "选择面料",
                    "attr_value": "珊瑚绒毯"
                }
            ]
        }
    ]
}

复制

返回参数：

{"errcode":0,"errmsg":"","data":{"product_id":403741756,"out_product_id":"719","create_time":"2021-04-09 18:06:03","skus":[{"sku_id":332295576,"out_sku_id":"27359029914"},{"sku_id":332296576,"out_sku_id":"27359029915"},{"sku_id":332297576,"out_sku_id":"27359029916"},{"sku_id":332298576,"out_sku_id":"27359029917"}]}}

复制

看到这个说明产品已经上传成功。如果没有大问题，几分钟后就会被批准

是的，如果您有权访问产品评论回拨通知，您将收到回拨通知。如果没有，可以调用获取产品接口查看结果。审核通过的产品默认上架。

下单

调用微信jsapi支付接口生成唤起收银台所需参数，包括 、 、 ，支持普通支付和组合支付。注意，访问微信支付回调，需要在回调中获取并支付时间。同步订单时使用。对微信支付不清楚的同学可以参考我之前的文章，这里不再赘述。

前端小程序代码修改基础库配置支持新组件配置，在开发分支流程app.json中添加["":true]参数设置，然后编写调用收银台的方法，支付注意，和传统的支付方式不同的是多了一个参数，就是订单数据。还有一点要提醒的是-""-""需要在微信端传入预付订单id和预付时间

wx.requestOrderPayment({
      timeStamp: '1617464449815',
      nonceStr: '35ZR2CmUp2zF1wkb',
      package: 'prepay_id=wx0923190624398bf8905108e4db42c80000',
      signType: 'MD5',
      paySign: 'D95618D55A23D90BF5878DFAE598034E',
      orderInfo: {
        "create_time": "2021-04-09 23:20:25",
        "type": 0, 
        "out_order_id": "mg2021023009984231904112",
        "openid": "omFMi5ZtFu9KXB9u9YL7UvOpoz7U",
        "path": "/pages/order?out_order_id=mg2021023009984231904112",
        "out_user_id": "273590",
        "order_detail":
        {
            "product_infos":
            [
                {
                    "out_product_id": "719",
                    "out_sku_id":"27359029915",
                    "product_cnt": 2,
                    "sale_price": 2, 
                    "path": "pages/productDetail/productDetail?id=719",
                    "title" : "蓝色-毛毯百搭休闲珊瑚绒毯子100*150cm",
                    "head_img": "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/12164a04b6174c2ca363029e38541d33.png",
                },
                {
                    "out_product_id": "719",
                    "out_sku_id":"27359029916",
                    "product_cnt": 3,
                    "sale_price": 3, 
                    "path": "pages/productDetail/productDetail?id=719",
                    "title" : "米黄-毛毯百搭休闲珊瑚绒毯子100*150cm",
                    "head_img": "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/86ce2ecdb9ef489ebfb62aa1634990db.png",
                }
],
            "pay_info": {
                "pay_method": "微信支付",
                "prepay_id": "wx0923190624398bf8905108e4db42c80000",
                "prepay_time": "2021-04-09 23:19:06"
            },
            "price_info": {
                "order_price": 6,
                "freight": 1,
                "discounted_price":1,
                "additional_price": 1,
                "additional_remarks": "税费"
            }
        },
        "delivery_detail": {
            "delivery_type": 1,
        },
        "address_info": {
            "receiver_name": "大大",
            "detailed_address": "福建省厦门市思明区莲前街道",
            "tel_number": "18205980089",
            "country": "中国",
            "province": "福建",
            "city": "厦门",
            "town": "思明区莲前街道"
        }
    },
      success (res) { },
      fail (res) { }
    })

复制

同步订单支付结果

第二步下单成功后，必须同步订单支付结果，

接口地址：

请求参数：

{
    "out_order_id": "mg2021023009984231904112",
    "openid": "omFMi5ZtFu9KXB9u9YL7UvOpoz7U",
    "action_type": 1, 
    "transaction_id": "4200000986923274282021040793",
    "pay_time": "2021-04-09 23:21:43"
}

复制

如果顺利，界面返回成功，MP后台也会收到新的通知如下。恭喜，到这一步，组件已经完成访问。

接下来进入视频账号测试效果微信视频号交易，先关联商家小程序，然后开始直播，点击添加商品，就会出现刚刚上传的商品。直播过程中，用户点击商品，直接进入商户小程序下单。

请注意，完成这些操作后，仅连接组件。未来将进行直播。播出前需将商品信息上传至微信端审核。只有通过审核的产品才会加入直播间带货。只有审核通过的产品才会添加到直播间进行投放，只有审核通过的产品才会添加到直播间进行投放。重要的事情会说三遍。

至此微信视频号交易，自定义版交易组件的接入就完成了，我们上直播带货吧。

上一篇：vue集成-china-area-data实现PC端省市三级联动选择器