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 支付组件，支付流程：的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。