小程序支付頁面如何實現

① H5在微信小程序及公眾號中的支付

為了解決在公眾號支付和在小程序中支付問題，寫了個js工具文件，根據當前環境執行不同的支付方法（以小程序支付流程為主）

在小程序支付中，需要注意兩個地方，第一是由於package='prepay_id=XXX'傳到小程序時會導致數據接收不完全，所以就只傳XXX，『prepay_id=』由小程序那邊拼接上了；第二點是『/pages/Pay/Pay』是與小程序約定的處理支付功能的頁面，需要對應著。

在需要調用的文件用引入【import {payTool} from './PayTool.js';】，並在獲取訂單信息後，傳入訂單信息，發起支付流程【payTool(payParam);】

在小程序中獲取訂單信息

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7

根據微信小程序支付說明文檔使用接收的參數調取支付功能

2020.12.24補充

剛學到還有個qs可以用，，，

1、npm install qs

2、var qs = require('qs')

3、不需要對package進行修改，直接傳參即可。 小程序那邊也不需要再處理了

② 微信小程序支付API

2019年12月26日

文檔：

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7

一.一般要開發的兩個介面

1.統一下單

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

2.申請退款

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_4

3.簽名規則

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3

二.小程序支付時序圖

關鍵就是wx.requestPayment(object)

2.ps商戶系統和微信支付系統主要交互：

1、小程序內調用登錄介面，獲取到用戶的openid,api參見公共api【 小程序登錄API 】

2、商戶server調用支付統一下單，api參見公共api【 統一下單API 】

3、商戶server調用再次簽名，api參見公共api【 再次簽名 】

4、商戶server接收支付通知，api參見公共api【 支付結果通知API 】

5、商戶server查詢支付結果，api參見公共api【 查詢訂單API 】

三.微信小程序支付實現步驟

1.獲取登錄憑證code 並傳給後端伺服器

2.後端伺服器請求微信伺服器獲取openid和session_key，並將openid返回給小程序

3.小程序客服端發起支付請求給後端伺服器 （帶上openid參數）

4.後端伺服器接收到openId後，調用微信支付統一下單介面（後端調用的，用來給小程序獲取支付參數）

5.拿到後端伺服器返回的5個參數後，調用最終支付介面wx.requestPayment

6.微信伺服器進行支付成功後，通知後端伺服器。

③ 微信小程序怎麼開發微信的支付功能

您好！很高興能為您解答， 1、申請微信支付。小程序認證以後，可以在小程序後台，微信支付菜單欄，申請微信支付。填寫企業信息和對公賬戶，微信支付會打一筆隨機金額到對公賬戶，輸入金額完成驗證後，在線簽署遷移，即完成了微信支付的申請流程。
微信支付申請完，會發送微信支付商戶號，商戶平台用戶名密碼等信息到注冊者郵箱。

2、配置小程序密鑰。小程序後台設置頁，點擊生成，管理員驗證二維碼後，會隨機生成AppSecret。請妥善保管好Appsecret，不要明文存儲於伺服器，AppSecret用於和微信伺服器交互。比如獲取用戶的openid介面就需要用到.

3、設置密鑰和下載證書
用申請微信支付獲得的用戶名和密碼，登錄商戶平台 ，在賬戶中心，API安全中下載證書和設置密鑰。
密鑰是32位，設置以後需要妥善保管，因為無法查看密鑰，所有微信支付相關的介面都會使用這個密鑰加密。

4、配置HTTPS伺服器 小程序的前端是使用微信提供的框架開發，但是後台依然是開發者自己的伺服器。小程序發起的是HTTPS請求，意味著小程序開發者必須配置HTTPS伺服器。配置HTTPS伺服器之前，先要獲取證書，證書可以向相關機構購買，騰訊雲目前可以向用戶提供免費的證書

5、微信支付流程
微信支付有多種支付方式，包括刷卡支付，公眾號支付，掃碼支付，APP支付，所有微信支付的介面都可以到官方找到。小程序是在微信里調起支付的，其實是公眾號支付

④ 在微信小程序中如何實現支付及退款

1.前提：要以公司的以身份去注冊一個小程序，才有微信支付許可權；綁定商戶號；在小程序填寫合法域（支付域名）
二、完成以上條件，你可以得到
「小程序appid 小程序秘鑰 」 這兩個用於獲取用戶openid；
商戶號id ,商戶號秘鑰 支付介面必須的；
支付。第一步 調取微信介面獲得統一下單號 就是告訴微信我要收openId為XX的人多少錢
第二步換算簽名（參考文檔） 第三部 前端 開啟支付 回調用戶是否支付 前端支付了 提示用戶支付成功（此時不一定支付成功了） 第4部 後台回調地址接受到微信支付成功的XML 成功了 執行你的邏輯
退款需要支付證書 開通商戶自己下載 直接調取API搞就完事

⑤ 小程序支付怎麼改成web支付

步驟如下：
1，定義web顯示h5頁面。2，定義h5頁面，因為是本地鏈接，所以需要到開發者工具里把不檢驗合格域名這一欄勾選上。3，編寫h5代碼，要與小程序保持頁面一致。4，編寫小程序支付頁。
到這里我們就完整的實現了小程序we展示h5頁面，並且做到了h5和小程序的交互，實現了小程序web的支付功能。

⑥ 微信小程序怎麼內嵌網頁實現支付

內嵌網頁中可使用JSSDK 1.3.0提供的介面，可坑就來了，居然不支持支付介面的調用，經過一番研究，總算打通了兩邊的交互。

大概流程

1、先說明涉及到的文件，下面會用到

1.1 app.js:小程序的app.js文件,在globalData里定義一個全局變數paySuccessUrl: '',用來保存支付成功跳轉url
1.2 wxminiwebview.js:小程序中放web-view的界面 1.3 wxminipay.js:小程序原生支付界面
1.4 web_pay.vue:內嵌網頁會調起支付的路由組件界面，由於我是用vue+vue-router寫的，所以你最好了解下vue和vue-router，記得引入微信jssdk1.3.0,最新版本才包含小程序相對應方法。很遺憾，微信並沒提供npm包，github有人提供的commonjs引入方式的微信jssdk版本也只有1.2.0,所以就只能這樣引入了。

<script src="./static/jweixin-1.3.0.js">script>

2、首先我們像官網那樣正常嵌入一個內嵌網頁,url是wxmini_webview.js中data中定義的變數，webview載入的就是網頁就是這個url。

<web-view src="{{url}}">web-view>

3、在內嵌網頁web_pay.vue里判斷當前是否是微信環境。

window.wx.ready(function () {
isWxMini = window.__wxjs_environment === 'miniprogram'
})

4、在內嵌網頁web_pay.vue調用支付時把支付金額，支付說明，支付成功跳轉url...(任何你想要的參數，記得encodeURIComponent)，傳給小程序原生頁面。

if (isWxMini) {
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`
window.wx.miniProgram.navigateTo({
url: path
})
}

5、在小程序支付界面wxmini_pay.js里獲取到內嵌網頁傳過來的值,這里演示方便,實際上是在page的data里存儲這些會顯示在界面的值好些。

onLoad: function (options) {
console.log(options)
// 獲取網頁傳過來的值
// TODO 用es6解構來獲取值TODO
jumpUrl = options.jumpUrl
amount = options.amount
title = options.title
...
},

6、支付成功後,把跳轉url附帶支付結果及當前時間保存到全局變數。

paySuccess () {
let currentTime = new Date().getTime()
//這是為了防止wxmini_webview.js文件里調用setData由於前後兩個url一致導致路由不觸發刷新的bug
jumpUrl = options.jumpUrl+encodeURIComponent(`?payResult=1&time=${currentTime}`)
//payResult=1表示支付成功，這里我偷懶了直接在url後面補?,實際情況比較復雜
//為了實現支付成功返回後的無刷新載入,這里的參數應該是屬於路由web_pay.vue的,而不是屬於window.location.search的
//所以要判斷路由錨點#的位置和是否已經有路由參數（如果是vue-router的history模式我沒用過,應該和window.location一樣吧）
getApp().globalData.paySuccessUrl=jumpUrl //保存跳轉url到小程序全局變數里
wx.navigateBack() //返回會上個頁面，也就是承載網頁的容器頁面wxmini_pay.js
}

7、回到小程序wxmini_webview.js,會觸發onshow,在裡面進行界面無刷新載入。

onShow: function () {
console.log('on show')
let paySuccessUrl = getApp().globalData.paySuccessUrl
getApp().globalData.paySuccessUrl="" //清空支付成功url，防止一些操作觸發onShow事件
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
//這里在次說明下步驟6中的&time=${currentTime},就是因為不加這個當你第一次支付成功回來這里
//這個url跟你第二次支付成功回來這里是一樣的，會導致第二次支付開始，這里的setData方法失效
url
})
}
},

8、步驟7中的setData會觸發webview中的網頁載入，由於我採用的是vue-router,而且前後兩個url只有路由的參數query不一樣，所以並不會觸發界面刷新，也不會觸發路由的重新載入，而是只會觸發beforeRouteUpdate 這個方法，舉個例子，現在支付前界面是https://host/#/pay,然後支付成功後跳轉https://host/?payResult=1&time=123456#/pay,此時界面不會刷新，pay路由也不會重新載入，而是觸發beforeRouteUpdate (to, from, next),你要做的只是在這里界面解析to.query里的數據，然後該幹嘛幹嘛

beforeRouteUpdate (to, from, next) {
console.log('路由發生改變，很有可能是小程序的支付成功回調')
let payResult = to.query.payResult
if (payResult) { // 小程序支付成功
if (payResult === '1') {
console.log('支付成功,下班打卡走人')
}
}
next()
},

⑦ 個人注冊的微信小程序如何實現微信支付，是通過第三方平台還是通過別的途徑求詳細說明

注冊微信程序關聯微信支付就可以，都是通過微信平台支付，現在三大支付平台就是微信，支付寶，雲閃付

⑧ 商家小程序獲取信息後支付不了收獲地址的支付功能

商家小程序獲取信息後支付不了收獲地址的支付功能這樣處理：
1、確認小程序已經申請開通支付功能且開通或綁定商戶號。
2、確認用戶的openid和appid是對應的。
3、支付回調需要再次簽名驗證。
4、小程序通過wx.requestPayment來調起微信支付，在success方法里可以實現支付成功後頁面自定義跳轉。