点金计划更多文档请参考: 关于对“支付后跳转指定页面”功能升级的通知 微信官方文档:点金计划-接入前准备 微信官方文档:点金计划产品文档 电子小票说明 汇付介绍点金计划的产品文档 汇付提供了基于uniapp项目的商户小票的样例代码;点击下载一、产品介绍 点金计划是微信支付官方提供的支付后回调能力的升级计划。 1、 产品简介:微信支付平台提供支付后页面模板,支持账单展示、服务性内容展示、流量位推广等功能。其中,流量位推广指接入微信广告平台; 2、 服务商收益:服务商提供点金计划相关技术服务,由微信支付向服务商支付返佣奖励; 3、 服务商管理工具:可在服务商平台对特约商户开通/关闭点金计划,以及为特约商户配置同业过滤 标签,过滤所选行业的广告。同时,对于有需要的特约商户,服务商可为其开通商家小票功能, 即可在点金计划官方页面上方嵌入商家服务性内容,例如展示取餐码、停车时长等。 4、 产品形态:服务商为特约商户开通点金计划之后,特约商户的 JSAPI 支付(除小程序场景)完成后的页面将仅展示点金计划官方页面,同时发起支付的服务商 H5 页面将被关闭。5、服务商可根据特约商户情况,自行选择是否为特约商户开通商家小票功能: 1)若仅为特约商户开通点金计划,未开通商家小票功能,该商户 JSAPI 支付后会展示官方小票样式; 2)若为特约商户开通点金计划时,已开通了商家小票功能且已按开发文档完成接入,该商户 JSAPI 支付后会展示商家小票样式。 注:官方小票指平台自动生成的电子账单,仅展示订单金额等基础信息;商家小票指商家为用户提供的订单详情,可展示不同业务场景下的服务性内容,例如取餐码、停车时长等。二、产品优势 1、 产品开通零成本:一键加入“点金计划”,即可按月获得对应的奖励。 2、 广告对接零成本:由微信广告团队负责广告主的对接和广告内容的投放策略,服务商不需花费精 力拓展和对接广告主。 3、 广告质量有保障:微信广告提供高质量的广告内容和稳定的广告曝光率,且广告支持一键关注、 跳转小程序等能力,从而提升转化效果。 4、 商家小票灵活可配置:对于有需要为用户展示服务性内容(取餐码、停车剩余时长等)的特约商 户,服务商可为其开通商家小票功能,按开发文档快速接入后,即可在点金计划页面上方嵌入展 示商家自定义的服务性内容。三、操作指引3.1 服务商开通点金计划 首先,服务商需先自行开通点金计划。步骤如下:3.1.1 服务商申请开通 操作路径:【登录微信支付服务商平台 → 服务商功能 → 点金计划】,点击申请开通即可。3.1.2 签署承诺函点击申请开通后进入开通流程,根据指引签署承诺函并填写业务联络人,即可提交申请并开通。服务商完成点金计划开通后,即可为特约商户开通官方小票或商家小票。接下来将分别介绍官方小票 和商家小票开通指引。3.2 官方小票功能开通官方小票是指平台自动生成的电子账单,仅展示订单金额等基础信息。若特约商户无需为用户展示如取餐码、剩余停车时长等服务性内容,则仅开通官方小票即可。官方小票示意图如下:开通官方小票仅需为特约商户打开“点金计划”开关,接下来具体介绍。3.2.1 为特约商户打开“点金计划”开关在点金计划管理页面的特约商户管理列表中选择特约商户,并在“点金计划”栏下打开开关即可。直接打开“点金计划”开关后,该特约商户的点金计划页面将展示官方小票。服务商也可通过“默认开通”按钮为全量特约商户开通点金计划。如下图所示,在特约商户管理列表右上角有“默认开通点金计划”开关,打开后,只要特约商户产生 jsapi 支付,微信支付将自动为其 开通点金计划,无需服务商操作开通。(注:若特约商户 无 jsapi 支付,则不会为其自动打开点金计划。其中,若某些特约商户需使用“商家小票”功能,服 务商/渠道商需在点金计划管理页面上或通过 API 额外为其打开商家小票功能开关。)此外,微信支付侧提供“点金计划管理 API”,供服务商为特约商户批量开通点金计划,具体请查看 点金计划管理 API。 (注:主动关闭点金计划后,需间隔 24 小时方可再次开通) 3.3 商家小票功能开通“商家小票”是指商家为用户提供的订单详情,可展示不同业务场景下的服务性内容,例如取餐码、 剩余停车时长等。开通商家小票功能后,即可将商家页面嵌入到点金计划页面中。商家小票示意图如 下:商家小票的开通步骤如下:注:先为特约商户打开“商家小票”开关,再打开“点金计划”开关, 是为了保证在开通点金计划后,特约商户 JSAPI 支付后的页面可立即展示商家小票,避免开通时间差导致商家部分订单展示了官方小票的情况。操作步骤:3.3.1 第一步:配置“商家小票链接”点金计划页面上方为商家小票提供了一个 Iframe 框架,服务商在点金计划管理页面配置“商家小票链接”后,商家小票链接会嵌入该 Iframe 框架内,同时,点金计划页面会与服务商交互订单信息(如 3.4.2 所述),服务商获取订单信息并校验通过后,为用户展示对应的服务性内容即可。1、服务商维度配置商家小票链接1) 打开点金计划管理页面 操作路径:【登录微信支付服务商平台 → 服务商功能 → 点金计划】。在“商家小票链接配置” 模块中,点击“添加商家小票链接”:2) 按照页面操作指引添加一个链接商家小票链接仅支持 https 协议,同时需通过 ICP 备案的验证,且应保证该链接线上可访问。3) 下载验证文件,验证链接所有权将从添加商家小票链接页面下载的验证文件放置在要填写的链接目录下,以证明对该链接的所有权。放置完毕并确保该路径可访问后,填写链接并点击“提交”,微信支付后台会进行验证文件的查验,查验通过后即提交成功。 (注:将验证文件放置在所填链接的目录或根目录均可)4) 使用“商家小票调试工具”进行调试为了保证商家小票在点金计划页面展示的兼容性、完整性,平台还提供了便捷的商家小票调试工具供服务商进行调试。服务商可通过商家小票调试工具,使用所选链接和真实订单号对点金计划页面 的数据交互流程、前端 JSAPI 的使用进行调试。具体调试内容请参考商家小票开发指引。2、特约商户维度配置独立商家小票链接部分特约商户(例如:医院、学校等类型)有特殊的域名要求,服务商可为这些特约商户配置独立的商家小票链接。配置后,这些特约商户的点金计划页面将通过所特约商户维度的独立链接进行订单数据交互。未配置特约商户独立商家小票链接的,将依然使用服务商维度的商家小票链接。特约商户维度独立的商家小票链接入口如下,具体步骤与上述服务商维度配置相同:3.3.2 第二步:为特约商户打开“商家小票”开关完成商家小票链接配置后,服务商还需为特约商户打开商家小票的开关 (注:配置完商家小票链接后,才会出现商家小票功能开关) 在特约商户管理列表中选择特约商户,在“商家小票”栏下打开开关即可。 同时,平台提供“商家小票管理 API”,供服务商为特约商户批量开通/关闭商家小票功能,具体请查看商家小票管理 API。 3.3.3 第三步:为特约商户打开“点金计划”开关服务商为特约商户打开“商家小票”开关后,还需为其打开“点金计划”开关,若特约商户的“点金计划”未开通,即使 “商家小票”功能开通,其 JSAPI 支付后也不会展示点金计划页面和商家小票内容。 开通“点金计划”开关的操作指引可参考上文为特约商户打开“点金计划”开关。3.4 商家小票开发指引3.4.1 商家小票链接数据交互(重要) 点金计划页面会通过如下流程与商家小票链接进行数据交互,以方便商家快速获取订单基础信息,为用户展示服务性内容。 1) 通过商家小票链接获取用户订单信息:点金计划页面打开时,页面上方的 iframe 框架会请求服务商填写的商家小票链接,会在链接后附上:“特约商户号(sub_mch_id)”、“商户订单号(out_trade_no)”、“md5 校验码(check_code)”三个字段的信息,方便服务商快速定位到具体订单的同时,也保证链接的可靠性。a) 增加参数后的链接格式为:服务商链接?sub_mch_id=特约商户号&out_trade_no=商户订单号&check_code=b) 举例:若服务商配置的链接为 https://www.qq.com,特约商户号为 1234567,商户订单号为ABCDEFG,则请求的链接为https://www.qq.com?sub_mch_id=1234567&out_trade_no=ABCDEFG&check_code=39f0876dd58e4eb61b66250f69d027052) 服务商校验 check_code 服务商获取到上述完整链接时,为了保证参数没有被篡改,需要做 MD5 校验。a) 校验方式通过链接上的“商户订单号”,到后台获取该订单对应的“微信订单号”,即 transaction_id, 并拼在原有链接后(需去除 check_code,即:服务商链接?sub_mch_id=特约商户号 &out_trade_no=商户订单号&transaction_id=),进行 MD5 计算。b) 举例若 transaction_id 为 abcdefg,则 MD5 值为:String my_check_code =MD5(“https://www.qq.com?sub_mch_id=1234567&out_trade_no=ABCDEFG&transaction_id=abcdefg”);若 my_check_code 与最初链接参数中的 check_code 相等,说明该链接未被篡改,可正常跳转到商家小票内容,否则服务商需展示错误提示页。3) 商家小票尺寸适配: 点金计划页面上方的商家小票 Iframe 框架默认尺寸为 640px*600px,会根据各手机型号的屏幕宽高比自适应展示。服务商页面需兼容该尺寸,若 Iframe 框架高度不满足展示诉求,可参考点金计划页面 JSAPI 的指引调整高度。3.4.2 点金计划页面 JSAPI为了提升用户体验,满足商家各类业务需求,点金计划页面提供了一系列 JSAPI,协助商家实现以下 功能:1、按订单确认是否展示商家小票(onIframeReady 事件):已开通商家小票功能的特约商户,服务 商依然可以按照当前订单的情况决定是否展示商家小票(也可选择直接展示官方小票)。2、调整 Iframe 框架高度(onIframeReady 事件):供服务商调整商家小票区域的整体高度(规则:以宽度 640px 为基准,商家小票高度最小 600px,最大 960px。若服务商通过 jsapi 传入高度小 于 600px,页面会展示 600px,传入大于 960px,页面仅展示 960px)。3、外跳新页面(jumpOut 事件):支持从点金计划页面上方的商家小票区域,点击外跳到商家的完整页面(此处不可模拟用户点击自动外跳,否则相关能力会被处罚)。以下为具体的 jsapi 事件描述,每个事件的触发时机不同,请留意下文对每个事件的触发时机说明:3.4.2.1 onIframeReady 事件(重要):所有订单必须响应 onIframeReady 事件,否则无法正常进行商家小票的展示。 通信方式:iframe postMessage 事件通知 数据格式:json 字符串 事件名称:onIframeReady 事件功能: 1)按订单确认是否展示商家小票 2)调整 Iframe 框架高度触发时机:商家小票页面完全渲染完毕之后备注: 1) 展示商家小票时,建议在商家小票页面渲染完毕后再调用 JSAPI; 2) 从加载商家小票到响应 onIframeReady 事件之间的用时不可超过 3s,若超过 3s 未响应, 为保证用户体验,平台会为用户展示如下图所示的超时页面和刷新按钮,用户可点击刷新按 钮重新请求商家小票内容。示例:(1)展示商家小票:“let mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'}let postData = JSON. stringify(mchData)parent.postMessage(postData,'https://payapp.weixin.qq.com')”(2)展示官方小票:“let mchData ={action:'onIframeReady',displayStyle:'SHOW_OFFICIAL_PAGE'}let postData = JSON. stringify(mchData)parent.postMessage(postData,'https://payapp.weixin.qq.com')”(3)自定义高度:“let mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE',height:900}let postData = JSON. stringify(mchData)parent.postMessage(postData,'https://payapp.weixin.qq.com')”注,由于各手机屏幕尺寸不同,为避免设置固定高度值带来的体验不一致问题,服务商可按如下换算规则计 算出通过 jsapi 传给点金计划父页面的高度值: Step1:计算服务商页面当前高度 const customPageHeight = document.body.scrollHeight; // 单位 px Step2:换算传入点金计划页面的高度 传给父页面的高度(单位:px) = customPageHeight * (640 / 子页面真实宽度) const height = customPageHeight * (640 / Math.round(document.documentElement.getBoundingClientRect().width)); 其中:传给点金计划页面的 height 值需遵循文档规范,请勿超过限定范围:[600px, 960px],即 600 <= height (单位 px)<= 960; 3.4.2.2 jumpOut 事件 通信方式:iframe postMessage 事件通知 数据格式:json 字符串 事件名称:jumpOut事件功能:若商家业务流程需要从商家小票区域外跳到商家新页面,可通过该 JSAPI 传递外跳 URL,实现外跳。。 触发时机:商家页面有外跳需求,且用户主动点击时(此处不可模拟用户点击自动外跳,否则相关能力会被处罚) 示例:“let mchData ={action:'jumpOut', jumpOutUrl:'https://www.qq.com'}let postData = JSON. stringify(mchData)parent.postMessage(postData,'https://payapp.weixin.qq.com')”3.4.3 点金计划页面 JSSDK(重要)为了保证支付后生态环境的健康发展,平台会对嵌入点金计划页面的商家小票链接(含跳转链接)进 行记录,同时会对商家小票页面内容进行安全监测。 因此,所有嵌入点金计划页面的商家小票链接(包括页面内可点击跳转的链接),均需在 HTML 的 header 中引入: 若未引用,平台会根据《点金计划须知和承诺函》中的相关规定对服务商进行功能处罚。3.4.4 注意事项 1) 为了保证商家小票区域美观性,给用户更好的页面体验,商家小票设计规范建议参考《点金 计划商家小票模块设计规范建议》; 2) 请尽量降低页面请求资源包大小,提升链接打开速度,保障用户体验; 3) 微信支付将会实时对商家小票内容进行安全检测,商家小票仅可放置例如“取餐码”、“用 户评价”、“停车剩余时长”等围绕用户进行服务的内容,请勿出现涉政、黄、赌、毒等违规的内 容和行为;且不得出现模拟用户点击、自动触发跳转的行为。一经出现,平台会关闭其“商家小 票”功能,并会进一步联动处罚。 3.5 同业过滤标签设置(可选) 点金计划还为商家提供了过滤同业广告的能力(即同业过滤标签设置),服务商只需在点金计划管理 页面,选中需设置的特约商户,并点击操作栏的“修改标签”,在标签配置页面选择需过滤的行业标 签并点击确认即可。 注:特约商户默认无同业过滤标签,且每个商户最多只能设置 3 个标签。其中,未开通点金计划的特 约商户不可设置。3.6 关闭广告展示(可选)为了满足某些特约商户不展示广告的诉求,点金计划还提供了关闭广告的能力,服务商只需在点金计 划管理页面,选中需设置的特约商户,在“广告展示”栏下关闭开关即可。 同时,平台提供“关闭广告展示 API”,供服务商为特约商户批量关闭广告展示功能,具体请查看关 闭广告展示 API。若需重新打开广告展示,也可通过“开通广告展示 API“再次为特约商户批量操 作,且在打开广告展示的同时为特约商户设置同业过滤标签,具体请查看开通广告展示 API。