支付宝手机网站H5支付

news2025/2/21 20:52:34

手机网站支付产品介绍 | 网页&移动应用

为方便商家在移动端网页应用中集成支付宝支付功能,支付宝提供了手机网站支付能力。

流程简介:商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块,商家网页会跳转到支付宝中完成支付,支付完后跳回到商家网页内,最后展示支付结果。若无法唤起支付宝客户端,则在一定的时间后会自动进入网页支付流程。

正式环境下的配置方法:

用户已安装支付宝支付流程

1、用户在浏览器中访问商家网页应用,选择商品下单、确认购买,进入支付环节,选择支付宝付款,用户点击去支付,如下图 1;

2、进入到支付宝支付路由页面,支付宝处理支付请求,并尝试唤起支付宝客户端,如下图 2(此页无法自定义删除);

3、进入到支付宝页面,调起支付宝支付,出现确认支付界面,如下图 3

4、用户确认收款方和金额,点击立即支付后出现输入密码界面,如下图 4;

5、输入正确密码后,支付宝端显示支付结果,如下图 5;

6、自动回跳到浏览器中,商家根据付款结果个性化展示订单处理结果,如下图 6。

用户未安装支付宝支付流程

  1. 若用户未安装支付宝客户端,用户可先点击支付宝支付路由页面里的 点这里下载支付宝APP 蓝色链接,下载支付宝,如图 7;

  2. 成功下载并安装支付宝客户端后,点击支付宝支付路由页面里的 使用支付宝APP付款 按钮进行付款,如图 8;

  3. 点击 使用支付宝APP付款 按钮后,重新开始如上所述的“用户已安装支付宝支付流程”步骤。

    接入支付宝H5支付,首先需要在支付宝开放平台创建应用并审核,审核通过之后,会生成唯一标识 APPID。并且可以申请开通开放产品使用权限。通过 APPID 应用才能调用开放产品的接口能力。

Image 12.png

应用创建完成后,系统会自动跳转到应用详情页面。在 能力列表 中点击 添加能力 来添加 手机网站支付 功能。参考文档:

创建应用 | 网页&移动应用

开发设置

进入开发设置中完成接口加签方式、IP白名单、应用网关、接口内容加密方式开发信息设置。

参考文档:接口加签方式配置说明 | 小程序

  • 接口加签方式:必填。用于保障商户应用和支付宝交互的安全性。

  • IP白名单:选填。用于保障用户资金安全。

  • 应用网关:选填。用于接收支付宝异步通知消息。

  • 接口内容加密方式:选填。用于加/解密 OpenAPI bizContent 报文内容及加/解密部分用户隐私信息。

  • 授权回调地址:选填。第三方应用授权 或 用户信息授权 后回调地址。授权链接中配置的 redirect_uri 的值必须与此值保持一致 (如:https://www.alipay.com) ,用户成功授权后将在该 url 后携带授权码等信息并跳转至该页。当填入该地址时,系统会自动进行安全检测。

上线应用

商户在添加功能和配置密钥后,即可将应用提交审核,预计会有一个工作日的审核时间,请耐心等待。参考文档:网页&移动应用

应用上线后,还需要完成应用签约才能在线上环境(生产环境)使用功能。

签约

请在应用详情页面的功能列表右侧点击 签约,填写并提交相关信息。参考文档:网页&移动应用

以上是做开发之前的准备工作。

下面我们来讲一下 SDK的接入。

SDK的下载地址:手机网站支付 DEMO | 网页&移动应用

选择自己需要的编程语音下载demo即可。下面,我们来讲解一下PHP版本的。

首先,我们需要创建一条支付订单,这一条的逻辑可以自行完成,切记,该订单记录中需要有唯一的一个订单号,方便后面的支付完成后的异步回调时来匹配订单信息。

沙盒环境测试下的配置方法:

参考文档:沙箱环境 | 网页&移动应用

注意:需要在安卓手机上下载支付宝沙箱钱包,并且只支持安卓系统。

沙箱钱包的买家和卖家账号密码 支付宝都有提供,可点击沙箱账号进行查看,如下图:

手机下载沙箱钱包后,登录买家账号,提前在服务器站点或者局域网中将支付宝提供的DEMO进行部署并且需要配置沙箱信息如下图:

将appid,支付宝网关都替换为沙箱应用页面中提供的信息,异步通知地址在沙盒账号中用不到,所以可先注释掉。应用私钥和应用公钥需要使用支付宝提供的加密工具生成,然后要将应用公钥配置到沙盒应用里的RSA2(SHA256)密钥处,从而得到支付宝公钥:

然后将支付宝公钥配置到代码中的config.php(以PHP DEMO为例)文件中,将加密工具中生成的应用私钥直接填写到config.php的商户私钥处即可。

,然后在手机浏览器中打开项目地址,一步一步操作即可,如图:

          

          

登录沙盒商家账号到沙箱钱包,查看余额

   

钱已经到达测试商家账号,说明沙盒环境下的支付流程是没有问题的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408719.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【报错】npm install --save core-js/modules/es.array.push.js

代码写着写着,一运行突然就报了下面这么个错误 一开始没细看,以为是自己代码逻辑哪里写错,但是检查了一遍下来,好像没啥问题呀 然后后面就跟着执行了一下npm install --save core-js/modules/es.array.push.js 哦豁,还…

【自学前端】我只学这些够吗?好难

表弟也终于到了马上要大学毕业的时间,然后听说我在做前端开发工作,就想着能不能和我一起搞一搞。 我说这又不是小时候一起去地里抓兔子,说走就一起走,拿上工具一起走了,这得学啊。看着表弟期待的眼神,他问了…

【CTF】buuctf web 详解(持续更新)

buuctf web[HCTF 2018]WarmUp[极客大挑战 2019]EasySQL[极客大挑战 2019]Havefun[强网杯 2019]随便注[ACTF2020 新生赛]Include[SUCTF 2019]EasySQL[极客大挑战 2019]Secret File[ACTF2020 新生赛]Exec[极客大挑战 2019]LoveSQL[GXYCTF2019]Ping Ping Ping[极客大挑战 2019]Kni…

从零开始的「校园商铺」毕设全栈开发—开题报告

☕前言: 不知不觉已经在大学中度过了四年时光,春暖花开、桃红柳绿,又到了一年毕设季,恰逢〖新星计划2023〗活动正好有毕设相关的创作方向,号称两小时带我搞定毕设,像我这样喜欢白嫖(&#x1f61…

【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React/小程序React/小程序React/小程序&am…

cropperjs的简单使用

前言 最近发现了cropperjs,可以用于裁剪图片,特点来踩一下坑。 官方文档 参考文章: cropper.js 裁剪图片并上传(文档翻译demo) 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端 可以仿gitee的头像上传…

JavaScript WebAPI

✏️作者:银河罐头 📋系列专栏:JavaEE 🌲“种一棵树最好的时间是十年前,其次是现在” 目录DOM 基本概念选中页面元素事件初识事件三要素操作元素获取/修改元素内容获取/修改元素属性获取/修改表单元素属性valuetype获取…

JS小知识,如何将 CSV 转换为 JSON 字符串

大家好,今天和大家聊一聊,在前端开发中,我们如何将 CSV 格式的内容转换成 JSON 字符串,这个需求在我们处理数据的业务需求中十分常见,你是如何处理的呢,如果你有更好的方法欢迎在评论区补充。一、使用 csvt…

手写防抖和节流函数

一、认识防抖debounce函数 我们用一副图来理解一下它的过程: 当事件触发时,相应的函数并不会立即触发,而是会等待一定的时间;当事件密集触发时,函数的触发会被频繁的推迟;只有等待了一段时间也没有事件触…

【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【TypeScript专栏】 上篇文章讲解了TypeScript部分高级类型 详细内容请阅读如下:🔽 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可…

nvm安装node,配置npm 、cnpm

nvm 是什么? nodejs的版本管理工具,为了解决node.js各种版本存在不兼容现象可以通过它安装和切换不同版本的node.js 重要:完全卸载本地node, 下载链接 卸载完成之后,点击nvm-setup.exe安装版,直接运行n…

不是吧,阿sir,还有人不会制作影院订票系统前端页面吗?(拿来就用)

影院订票系统前端页面🎉案例分析🎉详细设计✨座位数据与样式定义✨座位的事件处理及相关的代码✨监听与数据格式化✨电影信息展示🎉动态操作演示图🎉源码(附图片素材)引言:大家好,欢…

npm和cnpm下载安装及VUE的创建

npm和cnpm下载安装及VUE的创建 1. node.js下载 node.js官网: http://nodejs.cn/download/ 下载安装后cmd输入以下命令查看版本 2. 配置npm 打开node.js的安装目录,我这里是D:\nodejs,在此目录下创建两个文件夹”node_global“和”node_ca…

【申请加入New Bing遇到的问题:当前无法使用此页面,cn.bing.com 重定向次数过多】

目录一.前言二.问题描述三.解决方案解决方案1:解决方案2:四.总结一.前言 前面的文章我们详细的讲解了如何加入New Bing,之前我们直接加入还可以直接访问,但是现在访问过多就会出现当前无法使用此页面,cn.bing.com 重定向次数过多的问题&…

eslint常见报错及解决

eslint常见报错问题1:Component name "index" should always be multi-word问题2:Newline required at end of file but not found问题3:Strings must use singlequote问题4:Expected indentation of 2 spaces but foun…

json-server|0编码实现REST API

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React框架React框架React框架&#x1f525…

uniapp中的renderjs使用

需求是用openlayers在uniapp框架下做一个移动gis类的软件,选择用renderjs实现地图与dom的交互,一开始也是小白,通过百度资料以及一步步测试后掌握了renderjs的使用,以及地图功能的实现。 一、renderjs的作用是什么? r…

初始vue3

如今新vue项目首选用vue3 typescript vite pinia……模式。在使用Vue2时,使用的是选项式api进行vue项目的开发,vue3在这里做了重大的更新,vue3使用组合式api进行对项目实例化和构建。另外需要注意vue项目需要nodeJS环境的支持,…

LaTex(1):使用在线表格生成器工具生成LaTex表格

目录 0 在线工具 1 常用命令: 1.0 编辑表格 1.1 Table—set size可以改变表格大小: 1.2 合并表格和拆分表格: 1.3 生成latex代码与复制代码: 2 示例 0 在线工具 表格生成器网页:Create LaTeX tables online –…

BootStrap基本使用

目录 BootStrap框架 BootStrap特点 bootstrap的使用 布局容器 固定宽度 完整宽度 栅格网格系统 前言 列的形式 列组合和列偏移 列排序 列嵌套 排版 标题 段落 强调 对齐效果 列表 去点列表 内联列表 定义列表 代码 表格 表单标签 文本框和文本域 单…