# "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.

# 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

  1. Use a page, such as the test page with component configuration, such as test.json
{
  "usingComponents": {
    "guarantee-bar": "plugin://shoppingGuarantee/guarantee-bar"
  }
}
  1. 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

attribute type Default values Required to fill in Introductions
pageType string goods_detail no Page type (enumeration value), as follows
Legal value Interpretation
goods_detail Item Details Page Type
goodsName string - yes Product Name
goodsImg string - yes Image of the product
goodsPrice string - yes Product price (specified price or price range)
align string - yes The cell alignment (enumeration value) is as follows
Legal value Interpretation
between Ends aligned, unmodifiable spaceSize, default value
left Left-aligned, you can modify the left-aligned spacing spaceSize after selecting Left-aligned (12 or more required)
spaceSize string 12 no Align Left alignment spacing after selecting left alignment (left alignment only works)
bannerStyle object - yes The right copy style corresponds to the property (enumerated value, and is of type string), with the following values
Legal value of bannerStyle.fontSize Interpretation
mini The corresponding character number is 14
normal The corresponding character number is 15
middle The corresponding character number is 16
large The corresponding character number is 17
BannerStyle.fontOpacity Legal Value Interpretation
gray gray
dark black

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元'
  },
})