小程序支付系列
小程序支付，涉及一些知識。javascript
在微信提供的接口文檔中提供了一個微信支付接口，應該是直接調用這個接口就能夠發起微信支付html
文檔路徑：https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobjectjava
可是，當開始信心滿滿的去看所需參數時，懵逼了，這些參數是什麼web
在這些參數中最難理解和獲取的就是這兩個了，仔細研究後發現，package這個參數的獲取要調用微信提供的另外一個接口，統一下單接口。原來在微信中支付須要先進行一下預下單。這裏的時間戳使用的是秒值，不是毫秒值ajax
(統一下單接口 這個接口就須要後臺經過http請求來調了)算法
統一下單接口 請求參數小程序
而在這些參數中，有兩個參數很眼熟，在第一步發起微信請求時也有這兩個參數，後發現這裏的隨機字符串就是調起支付時用到的隨機字符串，並且是必須一致，那麼簽名呢，要是也認爲同樣就徹底調溝裏了，這裏的簽名我稱爲一次簽名，由於支付的時候要進行第二次簽名。
api
把這些必填的參數都準備好微信
很重要的是你要首先有個店鋪，就有商戶號了xss
訂單號必須惟一哦，通知地址就是當支付成功後微信會回調這個地址，在這裏你能夠作一些事，好比修改訂單狀態什麼的。
而後就是簽名生成，這個很重要：把須要的參數都放到一個map中，而後對這些參數進行排序，而後把商品key拼接到後面進行MD5加密就生成簽名了，我仍是建議仔細看看簽名生成算法，不要想太複雜，就是排序，拼接，加密三步完成。
最後就是準備參數傳輸了，這裏的參數傳輸是以xml的方式傳輸，下面就是傳輸的數據，其實就是一個大的字符串，
你能夠這樣
我就意思一下了，你們懂就行，其實就是一個字符串，徹底能夠經過遍歷參數map來本身拼接的。
而後就是把這個大字符串傳過去，以上沒問題的話就會返回一個字符串的xml，格式類型我們拼接的參數。
從中取出咱們須要的東西，最重要的應該就是這個，預下單id，這就是以前我們須要的package
使用時是這樣的：package='prepay_id=201411109120471241k1241240124bk1k24'
而後就是二次簽名了，簽名生成順序和第一次是同樣的，主要要肯定須要哪些參數。
----------------------------------------------------------------------------------------
html部分
<view class='container'>
<view class="money">
<text class="money-font">{{money}}</text>
<text class="title">支付金額</text>
</view>
<view class="product">
<view class="item">
<view class="item-left">產品名稱</view>
<view class="item-right">{{productName}}</view>
</view>
<view class="item">
<view class="item-left">訂單號</view>
<view class="item-right">{{order}}</view>
</view>
</view>
<view class="footer">
<view class="pay-number">
<view class="pay-title">付款</view>
<view class="pay-money">￥{{money}}</view>
</view>
<view class="btn-area">
<view class="submit" bindtap="sendPayment" hover-class='btn-hover'>去支付</view>
</view>
</view>
</view>
js部分
/**
* 頁面的初始數據
*/
data: {
money: '',
productName: '',
order: ''
},
// 調起微信原生支付
openPayment: function(obj) {
let that = this;
let prepay_id = obj.packageStr.split('=')[1];
wx.requestPayment({
'timeStamp': obj.timeStamp,
'nonceStr': obj.nonceStr,
'package': obj.packageStr,
'signType': obj.signType || 'MD5',
'paySign': obj.paySign,
'success': function(res) {
console.log(res)
},
'fail': function(res) {
console.log(res)
},
'complete': function(res) {
if (res.errMsg == 'requestPayment:ok') {
wx.redirectTo({
url: '../paymentResult/paymentResult?code=1&prepay_id=' + prepay_id
});
} else {
wx.redirectTo({
url: '../paymentResult/paymentResult?code=0'
});
}
}
})
},
// 點擊支付按鈕，
sendPayment: function() {
let that = this;
let openid = wx.getStorageSync('openid');
let linkParam = this.data.linkParam;
let a2realName = true; // a2實名開關，默認打開的
if (linkParam.miniSource == 'A2') {
this.wechartpay()
}
},
// 調用後臺支付接口，後臺會把信息傳到微信、微信傳到資金。再依次返回
wechartpay: function() {
let that = this;
let openid = wx.getStorageSync('openid');
let linkParam = this.data.linkParam;
let platNo = linkParam.platNo;
if (platNo) {
platNo = TrimAll(platNo);
platNo = linkParam.platNo.substring(0, 2);
}
ajax({
url: api.wechartpay,
data: {
policyInfo: linkParam.branchCode == '5020100' ? JSON.stringify( // 深圳地區車險天然人新保傳
linkParam.policyInfo //商業險投保單號
) : null,
systemInfo: '', //簽名來源時間戳等信息
type: null, //支付方式
branchCode: linkParam.branchCode || '', //
checkCode: '-', //校驗碼
payApplyNo: linkParam.payApplyNo || '', //支付申請號
orderAmount: linkParam.orderAmount || '', //訂單金額
productNum: linkParam.productNum || '', //訂單數量
//資金平臺用戶名 A2用戶名：PWF_017 電銷三期：PTW_008 碼上保：PMS_010 s=pwf (全流程 A2用戶名), s=ptw（支付號 電銷三期）
capitalName: linkParam.s == 'pwf' ? 'PWF_017' : linkParam.s == 'ptw' ? 'PTW_008' : 'PMS_010',
// capitalName:'PWF_017',
productCode: linkParam.productCode || '', //
productName: linkParam.productName || '', //
successUrl: null, //
failUrl: null, //
isUserPid: '0', //（不爲空傳1表明須要經過微信校驗身份證姓名信息，則userPid和userName必傳，不然不校驗。經過產險微信號支付必傳，不然沒法支付成功。）
userPid: linkParam.userPid || '0', //支付人身份證
userName: linkParam.userName || '',
friendPay: '1', //0不支持代付
showPolicy: '0', //0不顯示
openid: openid || '', // openid oIVq0ji6oXEn0hqBnlTpydxf4PX0
coverageInfo: JSON.stringify([]), // 子險（非車信息）
vehicle: linkParam.miniSource == 'A2' ? true : false, // 車險爲true,非車爲false;
isYZ: platNo == '粵Z' ? '1' : '0', // 是不是粵Z車牌
attr1: linkParam.branchCode == '5020100' ? '1' : null // 深圳地區車險天然人新保傳1 其它狀況不傳
}
}).then(function(re) {
console.log(re)
if (re.code == 1 && re.data.data) {
// re.data.data 須要支付的信息
that.openPayment(re.data.data)
} else {
//失敗頁面 code = 0
wx.redirectTo({
url: `../paymentResult/paymentResult?code=0&msg=${re.data.msg}`
});
}
})
},
wxss 樣式
/* pages/payment/payment.wxss */
page {
background-color: #eee;
}
.money {
display: flex;
flex-direction: column;
width: 100%;
background-color: #ffffff;
align-items: center;
border-top: 1rpx solid #cccccc;
padding: 80rpx 0;
box-sizing: border-box;
}
.money-font {
font-size: 58rpx;
}
.title {
font-size: 32rpx;
color:#555555;
}
.product {
width: 100%;
background-color: #ffffff;
}
.item {
border-top: 1rpx solid #cccccc;
padding: 26rpx 20rpx;
box-sizing: border-box;
font-size: 32rpx;
display: flex;
}
.item-left {
width: 30%;
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left:0;
display: flex;
background-color: #ffffff;
height:100rpx;
align-items: center;
justify-content: space-between;
}
.pay-number {
display: flex;
flex: 1;
}
.pay-title {
padding: 0 26rpx;
box-sizing: border-box;
}
.btn-area {
height:100rpx;
flex:1;
text-align: center;
}
.pay-money {
color:darkorange;
}
.btn-area .submit {
height:100rpx;
line-height: 100rpx;
color: #fff;
font-size: 34rpx;
background: -webkit-linear-gradient(left, #0094d5, #005bac);
background: linear-gradient(to right, #0094d5, #005bac);
}
.btn-hover {
opacity: 0.6;
}
相關文章
- 1. 小程序支付
- 2. uniapp小程序支付app 支付
- 3. 微信支付--小程序支付(JAVA)
- 4. 微信小程序支付（JSAPI支付）
- 5. 小程序支付流程
- 6. 小程序-支付流程
- 7. 微信小程序支付
- 8. 支付寶小程序
- 9. 微信----小程序支付
- 10. 小程序微信支付
- 更多相關文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • 算法總結-歸併排序
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 小程序支付
- 2. uniapp小程序支付app 支付
- 3. 微信支付--小程序支付(JAVA)
- 4. 微信小程序支付（JSAPI支付）
- 5. 小程序支付流程
- 6. 小程序-支付流程
- 7. 微信小程序支付
- 8. 支付寶小程序
- 9. 微信----小程序支付
- 10. 小程序微信支付