# Mini Program Transaction Guarantee Badge Display Component Integration Guide

# I. Function Description

The Mini Program Transaction Guarantee Badge Display Component is available to Merchants who have obtained the transaction guarantee badge. They can incorporate this component into their Mini Program product detail pages to demonstrate official recognition of their accounts, thereby enhancing users’ trust in transactions. For a detailed illustration of custom scenarios, please refer to the figure below (the component shown is only the boxed area in the image; no additional information is displayed).

The Mini Program Transaction Guarantee Badge serves as certification for high-quality Mini Programs that meet transaction health standards. For requirements and application procedures, please refer to the document „Transaction Guarantee Badge Product Description“. You can apply for the transaction guarantee badge on the „MP Backend – Features – Transaction Guarantee – Transaction Guarantee Badge“ page. See the figure below for details.

# II. Related Interfaces

# 1. Integration Steps

1. Integration Method: Add configuration to app.json

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

Ensure the version field is set to 'latest' to ensure proper functionality.

2. Using the Component: Add component configuration in the page file, such as test.json:

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

3. In the Corresponding Page WXML: Use the component in test.wxml:

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

# Special Note (for Mini Programs Developed by Third-Party Service Providers):

If the Mini Program was developed by a third-party service provider, additional configuration must be added to ext.json to ensure proper functionality:

{"recompile": true}

# 2. Corresponding Configurations

Example: 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: 'WeChat Bubble Dog Zero Wallet',
    goodsImg: 'https://xxxxx/',
    goodsPrice: '28 yuan'
  },
});