# "Weixin Mini Program Transaction Security Standard Display Component" access document

# I. Function Dxplaination

"The Weixin Mini Program transaction guarantee display component" is open to merchants who have obtained transaction guarantee subjects, and can voluntarily introduce this component to the Mini Program product details page to convey official recognition of the account and enhance user confidence in trading.The custom scene representations are detailed in the diagram below (the components are only the portions of the diagram below that are boxed and do not show additional information).

The "Weixin Mini Program Transaction Assurance Standard" is the certification of high-quality mini-programs that meet transaction health standards.Opening a safeguard subject requires reference to the document , and can be requested to open a safe guard subject on the MP Back-end - Functions - Safeguards -Safeguard Subjects page.See the figure below for more details.

# II. Related interfaces

# 1. Steps to introduce

1. Introduction: Add configuration in apagejson

    "plugins": {
      "shoppingGuarantee": {
        "version": "latest",
        "provider": "wxd65104595293601e"
      }
    },

In Apagejson, the value of the version field needs to be fixed to 'latest' to ensure that the function will work properly

2. Use a page, such as the test page with component configuration, such as test.json

{
  "usingComponents": {
    "guarantee-bar": "plugin://shoppingGuarantee/guarantee-bar"
  }
}

3. In the corresponding page wxml, such as test.wxml

  <guarantee-bar pageType="{{pageType}}" goodsName="{{goodsName}}" goodsImg="{{goodsImg}}" align="{{align}}" spaceSize="{{spaceSize}}" goodsPrice="{{goodsPrice}}" bannerStyle="{{bannerStyle}}"  />

# Special instructions (developed by a third-party service provider Weixin Mini Program):

If it is a third-party service provider generation development mode, then you need to add additional configuration in the ext.json file to ensure that the function can run normally

{"recompile":true}

# 2. The corresponding configuration

Examples: test.wxml

     <guarantee-bar pageType="goods_detail" goodsName="{{goodsName}}" goodsImg="{{goodsImg}}" goodsPrice="{{goodsPrice}}" align="{{align}}" spaceSize="{{spaceSize}}" bannerStyle="{{bannerStyle}}"   />

test.js

Page({
  data: {
    align: 'between',
    spaceSize: 12,
    bannerStyle: {
      fontSize: 'normal',
      fontOpacity: 'gray',
    },
    pageType: 'goods_detail',
    goodsName: '微信气泡狗零钱包',
    goodsImg: 'https://xxxxx/',
    goodsPrice: '28元'
  },
})