在长期的教学过程中，了解到很多同学在进行毕业设计或课程设计时会开发一些相应的商城系统，都有在线支付的相关需求，而做为个人，想在实现在线支付在很多平台是不具备相关条件的，很多平台要求具备独立法人资格的企业或个人商业户才可以申请在线支付，而支付宝提供的沙箱环境，对于个人实现在线支付测试环境来讲，是一个不错的选择，本文主要讲解基于支付宝的沙箱环境来实现在线支付的功能。主要结合一个简易的商城系统来讲解说明在线支付的基本操作流程和相关API的应用，从而实现基于支付宝沙箱在线支付的基本功能。
本案例基于一个简易的商城系统，在这个系统基础上实现在了在线沙箱支付的基本应用。系统只保留了基本的商品展示和购物基本功能，其它功能接口全部删除。系统基于前后端分离的开发方式，前端使用VUE开发实现，后端使用Springboot结合Mybatis开发实现。
首页商品展示
商品详情
点击立即付款后进入支付宝付款流程
点击下一步：
确认付款
完成支付
看完了案例的演示，是不是有一种想试一试的冲突，感觉好简单？OK，那么我们一起开始学习支付宝沙箱支付的旅程！
2.1 支付宝沙箱介绍
沙箱环境是支付宝开放平台为开发者提供的与生产环境完全隔离的联调测试环境，开发者在沙箱环境中完成的接口调用不会对生产环境中的数据造成任何影响。
沙箱为开放的产品提供有限功能范围的支持，可以覆盖产品的绝大部分核心链路和对接逻辑，便于开发者快速学习/尝试/开发/调试。
沙箱环境会自动完成或忽略一些场景的业务门槛，例如：开发者无需等待产品开通，即可直接在沙箱环境调用接口，使得开发集成工作可以与业务流程并行，从而提高项目整体的交付效率。
注意：
- 由于沙箱环境并非 100% 与生产环境一致，接口的实际响应逻辑请以生产环境为准，沙箱环境开发调试完成后，仍然需要在生产环境进行测试验收。
- 沙箱环境拥有完全独立的数据体系，沙箱环境下返回的数据（比如用户 ID 等）在生产环境中都是不存在的，开发者不可将沙箱环境返回的数据与生产环境中的数据混淆。
2.2 支付宝沙箱注册及配置
打开支付宝开发者页面进行注册登陆：https://opendocs.alipay.com/common/02kkv7
登陆后进入开放平台控制台：选择左下解沙箱
在沙箱应用中可以查看沙箱的相关信息，其中APPID需要复制并记录，我们在进行支付时要指定APPID。
其它的均保持默认配置即可，接口的加签方式选择系统默认密钥即可，选用公钥模式，点击查看可以看到对应的公钥和私钥：做支付时需要用到。
支付宝网关地址：https://openapi.alipaydev.com/gateway.do
支付宝沙箱网关地址，开发者在沙箱环境调用 OpenAPI 发送 http(s) 请求的目标地址，需配置在AlipayClient中。此地址为固定的，在程序中需要配置。
选择左边沙账户：创建申请个人和商家对应的虚拟账户，并可以在线模拟充值和取现。
至此，我们需要准备的沙箱环境和配置己准备就绪。
支付宝沙箱支付成功后，要回调本地的服务地址进行支付结果的通知，而我们的测试环境是运行在内网中，所以需要借助内网穿透工具来实现外网调用内网的服务接口。内网穿透的工具网上有很多免费的，我们今天使用的是NATAPP这款工具。
1、打开官网注册并登陆：https://natapp.cn/login
2、登陆后选择购买隧道：选择免费隧道（有效期一个月）
3、指定名字，选择Web协议，并指定本地的应用通讯的端口
4、购买成功后会生成认证令牌：复制并保存
5、下载客户端工具:根据你电脑情况选择合适的版本下载，这里我选用Windows64位
6、创建配置文件：config.ini 具体下载：https://natapp.cn/article/config_ini
放在客户端natapp.exe同级目录下，并将其中的authtoken换成我们刚申请的免费隧道的令牌
7、启动客户端：windows下,直接双击natapp.exe 即可。红框内就是我们的隧道通信地址。
注意：每次启动客户端都会分配一个新的隧道地址：要注意后期更换程序中配置 的地址。
8、测试：此时http://t2vnvc.natappfree.cc临时域名就是代表了本地应用程序的访问地址http://localhost:80
可以直接使用此域名来访问应用程序下的任意一个接口，如能访问，则环境OK。
http://t2vnvc.natappfree.cc/order/findAll 查询所有订单：测试成功
支付宝支付提供了很多种支付应用场景以及对应的API应用，打开网址：https://open.alipay.com/api
可以看到有对应的应用类型：选中其中某一个进入，则有相关的文档介绍和API应用案例，所以学习和使用起来还是比较简单。
4.1 当面付
如果我们想通过支付宝生成二维码，让客户端扫描二维码进行支付，可以选择当面付：
https://open.alipay.com/api/detail?code=I1080300001000041016#api-detail-content
各个接口有在线文档和在线调试的案例，可以自行查看。以其中的统一收单线下交易预创建为例说明：
4.2 手机网站支付API
如果我们基于手机网站来实现在线支付，比如HTML5网站或小程序等，可以通过手机网站支付API进行实现：
https://open.alipay.com/api/detail?code=I1080300001000041949
各个接口有在线文档和在线调试的案例，可以自行查看。以其中的手机网站支付接口2.0为例说明：
4.3 电脑网站支付API
如果我们基于PC电脑网站来实现在线支付，比如相关电商平台等，可以通过电脑网站支付API进行实现：
https://open.alipay.com/api/detail?code=I1080300001000041203#api-detail-content
各个接口有在线文档和在线调试的案例，可以自行查看。以其中的统一收单下单并支付页面接口为例说明：
我们今天就以电脑网站支付为例进行讲解实现。
后台开发实现步骤：
5.1：支付功能的实现
1、创建配置类：配置沙箱相关环境信息 把配置类中相关的信息改为自己的即可。
2、定义支付接口地址：用户点击立即购买后提交请求至下单接口，添加订单成功后，发送请求到支付接口，向支付宝发送支付请求。
前端页面代码：在前端工程src/comments/mall/MallPurchase.vue中
后端对应的支付接口实现：AlipayController
业务方法实现：
此接口返回的字符串其实是一个FORM表单，并执行自动提交：所以接口执行完后自动跳转到支付宝支付平台页面。
然后就进入到了我们文章开头展示的支付流程页面：
可以对照着沙箱的商家账户和买家账户的钱数来看看是否实现了买家账户扣款和商家账户收款的功能。
5.2：回调本地接口更改支付状态
在线支付成功了，买家支付宝的账户的钱也已经转移到了商家的账户，可是本地应用怎么知道支付是否成功呢？我们在本地的应用中也需要根据支付成功与否来更改订单的支付状态，这就需要我们定义回调通知接口来实现。
我们在AlipayConfig中已经定义了回调的接口地址：
那么这个接口主要实现的功能就是根据支付的结果来实现订单状态的更新：
在AlipayController中定义alipay/notify接口：