MIP 支付组件,支付流程:
MIP 支付组件,支付流程:
标题 | 内容 |
---|---|
类型 | 通用 |
支持布局 | responsive,fixed-height,fill,container,fixed |
所需脚本 | https://c.mipcdn.com/static/v1/mip-simple-pay/mip-simple-pay.js,https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js |
注意:支付组件所需脚本链接需要前置到登录组件脚本链接前面。
示例
多组件联调数据
<mip-simple-pay data-endpoint="https://pay.mipengine.org"id="mypay"
><!-- 可以配置多个静态的支付数据 --><script type="application/json">{}</script>
</mip-simple-pay><!-- 自定义组件,如订单生成组件,成功后触发支付组件的添加数据接口,并提交支付 -->
<mip-demo on="success:mypay.addEventData success:mypay.pay">
</mip-demo><mip-login-xzh data-endpoint="https://xzh.mip.xuexb.com"data-autologin="true"on="login:mypay.setSessionId"id="user">
</mip-login-xzh><!-- mip-demo 触发添加数据示例 -->
<script>var viewer = require('viewer');Demo.prototype.build = function () {// 在订单成功后触发自身组件的 success 提交成功事件viewer.eventAction.execute('success', this.element, {data: {orderId: 1,// 这里的数据将直接合并到支付数据中}});};</script>
属性
data-endpoint
说明:后端源站支付接口链接,需要使用 https:// 或者 // 开头的源站地址,需要接口支持 HTTPS ,使用 POST 形式发送数据
必选项:是
类型:string
示例:data-endpoint=”https://api.example.com/pay.php”
说明:后端跨域说明 、后端数据说明 、会话凭证 sessionId
组件方法和事件
设置会话标识方法 - <mip-login-xzh on="login:支付组件id.setSessionId">
由登录组件完成登录后透传会话标识到支付组件,源字段为:event.sessionId 。
添加支付数据方法 - <mip-demo on="事件名称:支付组件id.addEventData">
由其他组件透传数据到支付组件中,源字段为:event.data ,会深度合并到支付数据中,常见于订单生成成功、收货地址保存成功等场景,如:
var viewer = require('viewer');Demo.prototype.build = function () {viewer.eventAction.execute('事件名称', this.element, {data: {orderId: 1,// 这里的数据将直接合并到支付数据中}});
};
提交支付方法 - <mip-demo on="事件名称:支付组件id.pay">
触发提交支付数据,常见于订单生成功后添加数据到支付组件后调用,也可由用户点击按钮时调用。
提交数据前事件 - <mip-simple-pay on="ajaxBefore:其他组件id.其他组件行为">
提交支付数据前触发。
提交数据完成事件 - <mip-simple-pay on="ajaxComplete:其他组件id.其他组件行为">
提交支付数据完成后触发,不论成功或者失败都会触发。
提交数据失败事件 - <mip-simple-pay on="error:其他组件id.其他组件行为">
提交支付数据失败时触发。
注意事项
1、后端需要支持 CORS + withCredentials
CORS 文档
withCredentials
附带身份凭证的请求
支付组件(mip-simple-pay)已经在前端发送请求时处理了 withCredentials
,需要对应的接口服务响应头设置:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: 对应请求的 origin
注意:出于安全考虑请对来源的 origin
进行判断,并正确的返回 Access-Control-Allow-Origin
字段,不能为 *
。
2. 后端数据说明
请求:
名称 | 说明 |
---|---|
请求链接 |
data-endpoint
|
请求类型 | POST |
请求参数 |
{sessionId: '会话凭证', state: '需要在支付完成后回传给 MIP oob 回调链接中', ...}
|
异常情况,status
非 0
时为失败:
{"status": 403}
成功:
{"status": 0,"data": {"url": "https://付款链接"}}
注意:付款成功后回调链接应该为源站后端订单处理链接,如:https://支付链接?callback=urlencode('https://api.mipengine.org/order?id=1')
,回调链接(https://api.mipengine.org/order?id=1
)在支付完成后处理完成订单数据后重定向到 MIP oob 支付回调链接中,并携带参数,如:
格式如:
https://域名(.换成-).mipcdn.com/static/oob/simple-pay.html?state=回传&redirect_url=显示支付完成页面,必须是MIP页面
示例如:
https://www-mipengine-org.mipcdn.com/static/oob/simple-pay.html?state=xxxxx&redirect_url=urlencode(‘https://mip.mipengine.org/order.html?id=1‘)
会话凭证
sessionId
由于在 iOS 对跨域透传cookie
的限制(https://webkit.org/blog/7675/intelligent-tracking-prevention/
),由登录组件统一记录会话标识,并透传给支付组件,在发送支付请求时携带,后端应该优先使用cookie > sessionId
校验登录状态。百度搜索结果页降级处理
在百度搜索页打开使用该组件页面时,由于有些支付密码输入框在iframe
框架下有问题,在调用提交支付接口时做了降级处理,处理方式为跳转源站。包括以下设备、浏览器:
iOS设备下的手百App
MIP 支付组件,支付流程:相关推荐
- H5接入支付流程-微信支付支付宝支付
业务场景: H5对接微信支付和支付宝支付,app无法发版,需要支持在app内和浏览器内同时使用. 于是借此机会对前端接入对第三方支付进行了调研,本次只讨论微信支付,和支付宝支付. 微信支付 文档地址: ...
- 移动端---混合开发1 + 支付相关操作(手机app支付、网页支付)--支付流程
混合开发 1️⃣ 以前端为主导进行开发(Hybrid app)(即所有的页面部分都是用网页 h5 的技术来做的,Hybrid 是做编辑器的) uniapp.mui 是国内主流的小公司做混合开发的技术. ...
- 为微信开发填坑:微信网页支付的开发流程及填坑技巧
GitChat 作者:极笔北客 原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
- 为微信开发填坑:微信网页支付的开发流程及填坑技巧 1
GitChat 作者:极笔北客 原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
- jsapi支付签名_PHP实现微信支付(jsapi支付)流程步骤详解
最近接触到一个项目,涉及到微信支付,搞微信开发这么久以来,还没搞过支付,之前也就搞过公众号发红包,感谢前辈们的探索,我看了他们的博文,让我少走了很多弯路. 前期准备: 1.微信认证服务号,并且开通了微 ...
- WIN7 64位系统注册银行支付组件
WIN7 64位系统注册银行支付组件 目前只尝试注册了银联的chinapay.dll和工行的icbcebankutil.dll 1.将dll文件拷贝到windows\syswow64\文件夹下(Win ...
- 实战:微信小程序支付开发具体流程
2019独角兽企业重金招聘Python工程师标准>>> 来源:授权地址 作者:会编码的熊 该文章纪录了我在开发小程序支付过程中的具体流程 1. 申请微信支付 小程序认证后进入微信支付 ...
- php如何接入微信支付接口,PHP实现微信支付(jsapi支付)流程的方法
最近接触到一个项目,涉及到微信支付,搞微信开发这么久以来,还没搞过支付,之前也就搞过公众号发红包,感谢前辈们的探索,我看了他们的博文,让我少走了很多弯路. 前期准备: 1.微信认证服务号,并且开通了微 ...
- java在线支付---02_分析易宝支付的工作流程
2013/5/30 02_分析易宝支付的工作流程 Java技术qq交流群:JavaDream:251572072 ------------------------------------------- ...
最新文章
- python删除指定位置的字符串_python去除区域 python删除字符串中指定位置字符
- 写给未来程序员的建议
- Git 远程操作详解
- JAVA学习之路 不走弯路,就是捷径
- Python 中__new__()和__init__()的区别
- SAP AUT10 查看修改记录
- 通过ADB命令获取Android手机的分辨率(升级版)
- python中loop函数_python + Django 的forloop功能试验讲解
- 阿里云前端周刊 - 第 33 期
- 如何在Javascript中创建范围
- Scala学习(三、函数)
- bcm94352屏蔽第20针脚图_10核20线程的性能怪兽 十代酷睿首发评测
- H.264/AVC原理介绍
- 内网渗透-域管理员定位
- 免费的音频视频压缩工具和方法
- 深度解析PHP数组函数array_merge
- C++中带.h与不带.h的头文件
- tensorflow各个版本的CUDA以及Cudnn版本对应关系
- PMP是什么?PMP证书在国用处大吗?
- LabVIEW学习心得
热门文章
- windows如何生成ssh密钥
- 从尾到头打印单链表(C语言)
- java script中==和===_Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑...
- centos eclipse java_CentOS7 安装 Eclipse
- mysql查询按值多的排序_MySQL查询结果按某值排序
- mysql没有创建数据库的权限设置_mysql 创建数据库,用户并给用户设置权限
- oracle如何规则显示,Oracle语句优化规则汇总
- linux中tags文件能删除吗,Git 详细介绍查看、删除、重命名远程分支和tag
- mysql 事务 引擎_mysql引擎和事务
- mastercam加工报表生成_2020北京加工中心编程培训工厂教学行业