uniapp 接入第三方支付Line
站长
· 阅读数 22
uniapp 接入第三方支付Line
本文讲解了uniapp中使用第三方支付，并且支付完成后唤醒自己APP的方法
前端对接请求方式
前端不直接请求line的接口，前端请求自己后端接口，后端直接去请求line相当于后端帮前端去请求
比如：line提供的接口是POST /v3/payments/request
我们这边后端提供了一个接口www.baidu.com/linepay/req…
那我们就可以直接访问自己后端的接口，后端去请求line的接口并且拿到line返回的内容返回给前端
line开发文档
line开发文档（国内访问line文档需要vpn）：pay.line.me/jp/develope…
line支付流程
从line开发文档提供的API发现支付主要有三个个流程
1. 请求第一个接口request
上图可以看到接口和描述（请求方式请看楼上：前端对接请求方式）
前端代码
从line文档中可以看到request首先需要生成一个订单号（必填）
goLinePay中的变量data就是request的入参，有些可选的我就没填上去
可以看到data.redirectUrls.confirmUrl和data.redirectUrls.confirmUrl看名字就知道是回调，一个是支付成功的回调一个是支付失败的回调
可以看到我填的是：
confirmUrl:'hongde://pay/payment/success', cancelUrl:'hongde://pay/payment/error',
是不是想知道我这个地址是哪里来的，其实这个地址就是其他app唤醒自己开发的app的标识意思就是所有hongde://开头的都可以唤醒你自己的app
就像line://可以唤醒linePay一样
那怎么为自己的app生成这样的标识呢：看我的下篇文章（uniapp设置UrlSchemes实现被其他app唤醒）
methods:{
// 生成唯一订单号
bigInOrderNo() {
function setTimeDateFmt(s) { // 个位数补齐十位数
return s < 10 ? '0' + s : s;
}
const now = new Date()
let month = now.getMonth() + 1
let day = now.getDate()
let hour = now.getHours()
let minutes = now.getMinutes()
let seconds = now.getSeconds()
month = setTimeDateFmt(month)
day = setTimeDateFmt(day)
hour = setTimeDateFmt(hour)
minutes = setTimeDateFmt(minutes)
seconds = setTimeDateFmt(seconds)
let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math
.round(Math.random() * 1000000)).toString();
return orderCode;
//基于年月日时分秒+随机数生成订单编号
},
// linepay支付
goLinePay(){
var that = this;
var amount = 0;
if (that.customRechargePrice !== '' && that.customRechargePrice > 0) {
amount = that.customRechargePrice
} else {
uni.showToast({
title: this.$lang('minePage.Please_select_amount'),
icon: 'none'
});
return false;
}
let orderId = this.bigInOrderNo()
// request需要的入参
let data = {
amount,
currency: 'TWD',
orderId,
packages: [{
id: orderId,
amount,
products: [{
name: '充值余额',
quantity: 1,
price: amount,
}]
}],
redirectUrls: {
confirmUrl:'hongde://pay/payment/success',
cancelUrl:'hongde://pay/payment/error',
},
options:{
payment:{
"capture":"true",
"payType":"NORMAL"
}
}
}
}
uni.showLoading({
title: '支付中'
})
//这里正常请求后端的接口就行了
linepayRequest(data).then(res => {
if (res.code == 0) {
var lineSchemesUrl = res.data.paymentUrl.app
var transactionId = res.data.transactionId
this.lineSchemesUrl = lineSchemesUrl
//这边是uni检查 你需要唤醒的第三方软件是否存在的方法 这里检查的是（linePay）这个软件 pname是你要唤醒的app的包名也可以不传 ，action是必传的line：// 就是linepay提供的唤醒，别人唤醒linepay的方法
if (plus.runtime.isApplicationExist({
pname: 'jp.naver.line.android',
action: 'line://'
})) {
console.log("该app已安装")
//这边存储一下成功和失败的回调以便支付完成或者失败后调调回自己的app执行，我这边为了方便展示就放在全局
getApp()['pay/payment/success'] = (data)=>{
console.log(data,'支付成功回调传参11')
linePay_1.linepayConfirm({
amount,
transactionId:data.transactionId,
currency:'TWD'
}).then(res=>{
console.log(res,'支付成功结果')
if(res.code == 0){
uni.showModal({
title: '消息提示',
content: '支付成功',
confirmText: '确定',
showCancel: false,
success(res) {
if (res.confirm) {
uni.hideLoading()
}
}
})
}else{
uni.showToast({
title: '充值异常',
icon: 'none',
duration: 2000
})
}
})
}
getApp()['pay/payment/error'] = (data)=>{
console.log(data,'支付失败回调传参')
uni.showModal({
title: '消息提示',
content: '支付失败，请重新支付',
confirmText: '确定',
showCancel: false,
success(res) {
}
})
}
// 回调定义完成之后就要唤醒第三方软件了
// 唤醒line pay
plus.runtime.openURL(res.data.paymentUrl.app, (e) => {
console.log(e, '打开APP失败')
uni.hideLoading()
}, 'jp.naver.line.android')
} else {
console.log("该app未安装")
uni.showModal({
title: '消息提示',
content: '请安装linePay',
confirmText: '确定',
showCancel: false,
success(res) {
//这里可以进行引导安装操作
}
})
}
} else {
}
}).catch((err)=>{
wx.hideLoading()
uni.showModal({
content:err
})
})
}
2.通过上面定义的回调地址拿到参数如果成功
注意以下代码需要写到App.vue 中的onshow中
//添加延时100 不然ios有时会拿不到唤醒参数
setTimeout(()=>{
console.log("plus.runtime.launcher: "+plus.runtime.launcher);
// 获取参数
function getUrlObj(url){
if(url.indexOf('?')>=0){
url = url.substring(url.indexOf('?') + 1)
if(!url){
return null
}
const str = url.split('&')
const url_arr = {}
for (let i = 0; i < str.length; i++) {
const sttr = str[i].split('=') // sttr = [aaa,123]
url_arr[sttr[0]] = sttr[1] // [aaa:"123"]
}
return url_arr
}else{
return null
}
}
var argsUrl= plus.runtime.arguments;
console.log(argsUrl,'这是app携带的参数')
try{
//这里匹配app唤醒地址
const Reg = /^hongde/
if(Reg.test(argsUrl)){
const regs = {
'pay/payment/success': /pay\/payment\/success/g,
'pay/payment/error': /pay\/payment\/error/g
}
//匹配支付成功回调
if(regs['pay/payment/success'].test(argsUrl)){
console.log('支付成功1111')
console.log(this['pay/payment/success'] ,'存在吗')
this['pay/payment/success'] && this['pay/payment/success'](getUrlObj(argsUrl))
//匹配支付失败回调
}else if(regs['pay/payment/error'].test(argsUrl)){
console.log('支付失败啦啦')
this['pay/payment/error'] && this['pay/payment/error'](getUrlObj(argsUrl))
}
}
}catch(e){
console.log(e,'出错')
}
},100)
以上就是linepay支付的流程拉。