银豹怎么对接小程序线上支付

银豹怎么对接小程序线上支付,第1张

豹支付支持小程序支付,可以通过以下步骤实现小程序支付:

1 在豹支付官网注册账号,申请开通小程序支付功能

2 将小程序的AppID和AppSecret提交给豹支付,申请绑定小程序;

3 豹支付审核通过后,会提供小程序支付的API接口;

4 将API接口集成到小程序中,实现小程序支付功能;

5 将小程序提交审核,审核通过后,就可以实现小程序支付功能。

(1)需要去微信开放平台注册账号

(2)将对应的配置写入配置文件中(配置文件可以参考我下面封装的微信类)

(3)创建订单表

微信小程序是可以接入微信支付的接口的,比如目前还xyk的小程序就可以通过微信支付来完成xyk的还款;

要使用此功能,用户只需在微信中关联一张yhk,并完成身份认证,即可将装有app的智能手机变成一个全能钱包,之后即可购买合作商户的商品及服务,在付费时只需在自己的智能手机上输入密码,无需任何刷卡步骤即可完成整个过程且简便流畅

不能。

微信小程序支付功能页用于帮助插件完成支付,相当于wxrequestPayment的功能。插件使用支付功能,需要进行额外的权限申请,申请位置位于管理后台的设置项中。

另外,无论是否通过申请,主体为个人小程序在使用插件时,都无法正常使用插件里的支付功能。

扩展资料

支付功能页需要插件开发者在插件所有者小程序中提供一个函数来响应插件中的支付调用。

在插件中跳转到支付功能页时,这个函数就会在合适的时机被调用,来帮助完成支付。如果不提供功能页函数,功能页调用将通过fail事件返回失败。

功能页函数不应require其他非functional-pages目录中的文件,其他非functional-pages目录中的文件也不应require这个目录中的文件。这样的require调用在未来将不被支持。

这个目录和文件应当被放置在插件所有者小程序代码中(而非插件代码中),它是插件所有者小程序的一部分(而非插件的一部分)。

如果需要新增或更改这段代码,需要发布插件所有者小程序,才能在正式版中生效;需要重新预览插件所有者小程序,才能在开发版中生效。

参考资料来源:微信小程序——支付功能页

1申请注册小程序,开通微信支付账户

登录微信公众平台,选择小程序,点击注册,填写注册信息,填写完成后,提交认证,支付300元认证费用,然后开通微信支付账户。

2选择开发商制作小程序

注册好了小程序之后,就是制作小程序了,一般商家是不具备自己开发能力的,所以需要找一个靠谱的第三方开发商来帮助你快速打造一个小程序。

3确定小程序功能

如支付功能,商品管理,会员管理等等功能。

4制作小程序

确定好了功能之后,开发商就可以根据你需要的功能来定制开发,制作完成后,可以内部测试,测试通过后,提交审核。

5提交上线

小程序审核通过后,就可以上线运营了。

内嵌网页中可使用JSSDK 130提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互。

大概流程

1、先说明涉及到的文件,下面会用到

11 appjs:小程序的appjs文件,在globalData里定义一个全局变量paySuccessUrl: '',用来保存支付成功跳转url

12 wxminiwebviewjs:小程序中放web-view的界面 13 wxminipayjs:小程序原生支付界面

14 web_payvue:内嵌网页会调起支付的路由组件界面,由于我是用vue+vue-router写的,所以你最好了解下vue和vue-router,记得引入微信jssdk130,最新版本才包含小程序相对应方法。很遗憾,微信并没提供npm包,github有人提供的commonjs引入方式的微信jssdk版本也只有120,所以就只能这样引入了。

<script src="/static/jweixin-130js">script>

2、首先我们像官网那样正常嵌入一个内嵌网页,url是wxmini_webviewjs中data中定义的变量,webview加载的就是网页就是这个url。

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

3、在内嵌网页web_payvue里判断当前是否是微信环境。

windowwxready(function () {

isWxMini = window__wxjs_environment === 'miniprogram'

})

4、在内嵌网页web_payvue调用支付时把支付金额,支付说明,支付成功跳转url(任何你想要的参数,记得encodeURIComponent),传给小程序原生页面。

if (isWxMini) {

let jumpUrl = encodeURIComponent(windowlocation)

let path = `/page/pay/payamount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`

windowwxminiProgramnavigateTo({

url: path

})

}

5、在小程序支付界面wxmini_payjs里获取到内嵌网页传过来的值,这里演示方便,实际上是在page的data里存储这些会显示在界面的值好些。

onLoad: function (options) {

consolelog(options)

// 获取网页传过来的值

// TODO 用es6解构来获取值TODO

jumpUrl = optionsjumpUrl

amount = optionsamount

title = optionstitle

},

6、支付成功后,把跳转url附带支付结果及当前时间保存到全局变量。

paySuccess () {

let currentTime = new Date()getTime()

//这是为了防止wxmini_webviewjs文件里调用setData由于前后两个url一致导致路由不触发刷新的bug

jumpUrl = optionsjumpUrl+encodeURIComponent(`payResult=1&time=${currentTime}`)

//payResult=1表示支付成功,这里我偷懒了直接在url后面补,实际情况比较复杂

//为了实现支付成功返回后的无刷新加载,这里的参数应该是属于路由web_payvue的,而不是属于windowlocationsearch的

//所以要判断路由锚点#的位置和是否已经有路由参数(如果是vue-router的history模式我没用过,应该和windowlocation一样吧)

getApp()globalDatapaySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里

wxnavigateBack() //返回会上个页面,也就是承载网页的容器页面wxmini_payjs

}

7、回到小程序wxmini_webviewjs,会触发onshow,在里面进行界面无刷新加载。

onShow: function () {

consolelog('on show')

let paySuccessUrl = getApp()globalDatapaySuccessUrl

getApp()globalDatapaySuccessUrl="" //清空支付成功url,防止一些 *** 作触发onShow事件

if (paySuccessUrl) {

let url = decodeURIComponent(paySuccessUrl)

thissetData({

//这里在次说明下步骤6中的&time=${currentTime},就是因为不加这个当你第一次支付成功回来这里

//这个url跟你第二次支付成功回来这里是一样的,会导致第二次支付开始,这里的setData方法失效

url

})

}

},

8、步骤7中的setData会触发webview中的网页加载,由于我采用的是vue-router,而且前后两个url只有路由的参数query不一样,所以并不会触发界面刷新,也不会触发路由的重新加载,而是只会触发beforeRouteUpdate 这个方法,举个例子,现在支付前界面是>

beforeRouteUpdate (to, from, next) {

consolelog('路由发生改变,很有可能是小程序的支付成功回调')

let payResult = toquerypayResult

if (payResult) { // 小程序支付成功

if (payResult === '1') {

consolelog('支付成功,下班打卡走人')

}

}

next()

},

申请微信支付,配置小程序秘钥,设置秘钥和下载证书,配置>

具体步骤

1、申请微信支付。小程序认证以后,可以在小程序后台,微信支付菜单栏,申请微信支付。填写企业信息和对公账户,微信支付会打一笔随机金额到对公账户,输入金额完成验证后,在线签署迁移,即完成了微信支付的申请流程。微信支付申请完,会发送微信支付商户号,商户平台用户名密码等信息到注册者邮箱。

2、配置小程序密钥。小程序后台设置页,点击生成,管理员验证二维码后,会随机生成AppSecret。请妥善保管好Appsecret,不要明文存储于服务器,AppSecret用于和微信服务器交互。比如获取用户的openid接口就需要用到。

3、设置密钥和下载证书用申请微信支付获得的用户名和密码,登录商户平台。(payweixinqqcom),在账户中心,API安全中下载证书和设置密钥。密钥是32位,设置以后需要妥善保管,因为无法查看密钥,所有微信支付相关的接口都会使用这个密钥加密。

4、配置>

5、微信支付流程。微信支付有多种支付方式,包括刷卡支付,公众号支付,扫码支付,APP支付,所有微信支付的接口都可以到官方找到。

以上就是关于银豹怎么对接小程序线上支付全部的内容,包括:银豹怎么对接小程序线上支付、TP5 实现APP/二维码/小程序/H5等微信支付(详细步骤)、微信小程序怎么实现其他支付方式等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/10088336.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存