当前位置:首页 » 网页前端 » 如何利用web后端制作支付页面
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

如何利用web后端制作支付页面

发布时间: 2022-07-05 12:50:30

㈠ 如何制作收费网页

除了制作网站外,还必须要编写程序才能够完成网上支付功能的。否则的话,是不可能实现这样的功能的。

㈡ 微信小程序怎么内嵌网页实现支付

内嵌网页中可使用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()
},

㈢ 如何制作带有微信支付的h5网页

方法/步骤

点击制作栏目,进入模板选择页
1、选择空模板,自由创作;
2、选择主题模板,更快速的创作出炫丽的展示。

选择模板后,进入创作界面

预览树操作
1、显示的页面的显示顺序;
2、右键调整页面的显示顺序;
3、点击页面右上角的X,可以把不需要的页面删除。

功能—添加修改文字
1、添加文字:点击右侧的文字选项→主编辑区会出现文字输入框→双击修改
2、文字属性修改:右侧文字属性修改选项,包括字体种类,字体大小、颜色等等。

功能—添加修改图片
1、上传图片:点击右侧图片选项→上传按钮→选择图片→确定
2、截图:点击截图按钮→选择图片区域→双击

功能—添加修改按钮
添加按键:点击右侧按钮选项→点击编辑区的按钮→修改文字、链接

功能—添加修改表单
1、添加表单:点击右侧的添加表单按钮,在弹出的窗口中填写提交数据的名称
2、修改表单样式:在右侧的属性栏中,修改表单的显示样式
3、查看及下载数据:客户提交数据后,可以在表单数据中看到,并提供下载

功能—添加修改底图
1、修改背景颜色:点击右侧底图选项→选择颜色
2、上传底图:点击右侧底图选项→点击上传按钮→确定

功能—添加修改背景音乐
添加背景音乐:点击右侧音乐选项→点击选择文件按钮→确定→点击上传按钮

功能—添加修改切换效果
添加切换效果:选择页面→点击配置选项→选择切换效果

功能—添加修改动画效果
添加动画效果:点击添加动画的组件→点击动画选项→点击动画效果

保存
点击导航栏的保存按钮→再点击预览按钮→进入发布页面

生成
1、添加标题、描述、缩略图
2、生成的二维码和链接可以用于分享到微信、微博等
3、点击生成按钮,即完成了一个作品的制作过程。

END
注意事项
关于层叠关系:右击主编辑区的组件,可以修改组件间的层叠关系。
关于保存:建议每创建完成一个组件后,点击左上角的保存,保存一次。
关于预览:点击左侧的预览树页面,可以预览该页面的展示效果。

㈣ 如何在网页上添加支付按钮

两种方法:
1、首先在网站首页加入网银在线提供的链接logo,然后安装调试接口,安装方法为首先登录商户管理后台首页,进入商家工具—网银支付网关按钮,然后按照页面提示操作,即可生成网上支付代码,将这些代码拷贝/粘贴到网站适当的位置,就可以实现网上支付了。接着与支付宝签订合同,支付合同文件夹中有两种合同供选择,即人民币支付合同和人民币+外币支付合同,根据网站面向的消费者类型进行选择,合同签订后,在线支付服务即可生效。
2、进入支付宝网站—点击商家服务—网站集成支付宝—让我的网站也能让用户使用支付宝来付款—销售型网站—马上申请,即可申请支付宝在线支付。本服务适用于数码、服装、家电、游戏点卡、手机充值卡等各种交易。

㈤ web网站用支付宝收款、在线支付等怎么做,怎么实现呢

支付宝的收款产品涵盖各类消费场景,包括线上支付和线下支付。线上支付包含有电脑网站支付(比如在电脑上逛淘宝然后付款)、手机APP支付(比如在手机上逛淘宝然后付款);线下支付主要指线下实体店或摊位等(如街边摊买个煎饼果子然后用手机支付宝付款)。其中web网站收款签约的接口名字叫做【手机网站支付】,
以上所有的收款产品都可以到蚂蚁金服的商家服务官网https://b.alipay.com/?ynsrc=bdss1上开通,开通成功后,技术人员做集成即可进行收款。蚂蚁金服商家服务官网不仅有支付宝的各类收款产品,也提供蚂蚁金服其他的各类商家服务,例如芝麻信用、余利宝企业理财等。

㈥ php网站如何做个页面接入网银在线支付接口

有两个是用来接收网银在线的反馈传递页面(这两个页面一般是进行下面的第四步)
一个是配置文件
一个是网银在线的一些函数(一般不需要修改)

1 先做商品支付页面
2 用户确定提交订单(同时本地写入数据库一个唯一的订单号,并设定成未支付状态)
3.提交订单到网银在线支付页面
4用户支付成功后返回网站操作页面(对用户进行操作,数据中的当前订单更改成已支付)

㈦ 移动端web支付怎么调用支付宝,微信等客户端完成支付

通常来讲支付过程是需要与后台进行交互的
原因是如果您是使用web端来拉起微信支付,一般的解决方案是显示一下微信支付的二维码,该二维码需要和后台交互获取金额;
所以除非您在支付环节由用户手动来输入金额,否则是需要与后台交互的

㈧ javaweb根据不同的用户需求如何共用一个支付页面

接受同样的输入参数,返回相同的数据、记住来源的页面、返回该页面 。。。。。。。。。。。。。

㈨ 网站如何做个页面接入网银在线支付接口

一、申请网银在线;
1、注册网银在线 http://www.shouxufei.net/ ;
2、下载并安装支付接口 ;
3、合同的签订 (需要和网银在线的销售人员联系,确定收费价格,并索要合同,流程完后就是后面的一些资料寄送) ;
4、合同生效开始提供服务。
二、做页面:
有两个是用来接收网银在线的反馈传递页面(这两个页面一般是进行下面的第四步)
一个是配置文件
一个是网银在线的一些函数(一般不需要修改)
1 、先做商品支付页面;
2、 用户确定提交订单(同时本地写入数据库一个唯一的订单号,并设定成未支付状态);
3、提交订单到网银在线支付页面;
4、用户支付成功后返回网站操作页面(对用户进行操作,数据中的当前订单更改成已支付)。