1. 登录支付宝开放平台

很多同学在学习前端的时候，想去实现支付的功能，但是支付功能往往需要企业认证，个人开发者无法使用，所以也就没有办法学习。好在支付宝提供了沙箱环境，里面有测试的账号可以使用。下面我们就以支付宝沙箱环境来说一下如何使用在手机端调用支付宝APP实现支付功能

首先登录支付宝开放平台

地址：open.alipay.com/platform/ho…

使用支付宝扫码即可登录，之后点击右上角的进入管理中心按钮

进入之后找到开发服务->研发服务

2. 沙箱环境

进来之后我们可以看到支付宝提供的沙箱环境

在这里可以获取到APPID，支付宝网关和密钥。密钥我们需要设置下，稍后再说。

3. 沙箱钱包

之后妇保提供了沙箱钱包用于测试支付功能，扫描二维码下载安装包文件，之后发送到手机上安装。

下面的列表是我们可以测试的功能。列表最后一个是手机网站支付

接下来我们就来实现在手机页面上实现调用支付宝钱包，完成支付的功能。

4. 手机网站支付Demo

点击手机网站支付进入文档。

同学们最好把这个文档大致过一遍，了解接入流程。

文档左侧有个 SDK&DEMO，进入

这里提供了三个版本的示例代码，我们下载PHP版，点击右侧的“点击下载”按钮即可。

这个版本的Demo需要PHP和服务器的支持，所以我们需要搭建服务器和PHP的环境。

参考：

• Mac 下配置nginx和php开发环境

• windows下搭建nginx+php开发环境

5. 创建应用和获取密钥

如果是真实环境，我们需要去创建一个应用，步骤参考官方文档：

要在您的应用中接入手机网站支付能力，您需要登录 开放平台控制台 创建应用并提交应用审核，审核通过后会生成应用唯一标识（APPID），并且可以申请开通开放产品使用权限。通过 APPID 您的应用才能调用开放产品的接口能力。需要详细了解开放平台创建应用步骤请参见 创建应用。

不过我们这里使用了沙箱环境就不必创建了。或提供给我们一个沙箱应用。

6. 配置密钥

在沙箱应用里，可以看到APPID和支付宝网关，下面就是密钥，点击设置弹出页面：

选择公钥，然后在下方选择OpenSSL(第三方工具)，你使用其他方式也可以，参考文档生成既可以。

OpenSSL工具

• Mac下默认安装了OpenSSL，可以直接使用
• Windows下需要安装，下载地址：slproweb.com/products/Wi…

选择一个下载，安装上就可以。安装完成后记得把安装目录配置到环境变量，这里不再赘述。

生成RSA密钥

启动命令行工具，进入到某个目录下，在命令行输入：

openssl

进入OpenSSL工具,

• 生成私钥：

OpenSSL> genrsa -out app_private_key.pem  2048 

• 生成公钥：

OpenSSL> rsa -in app_private_key.pem -pubout -out app_public_key.pem

• 退出程序：

OpenSSL> exit

之后在目录下就可以看到生成的私钥（app_private_key.pem）和公钥（app_public_key.pem）。

然后把公钥掐头去尾，把中间部分填入到密钥中，主要去掉换行和空格。

保存之后就可以得到支付宝公钥了：

7. 修改示例Demo

打开下载好的示例Demo，找到wappay文件夹下的config.php文件，按如下图进行修改：

• app_id 这里写沙箱应用的APPID
• merchant_private_key 这里写使用openssl工具生成的私钥
• gatewayUrl这里写沙箱应用中的支付宝网关
• alipay_public_key这里写支付宝公钥，就是我们在上一步获得的那个

8. 测试

配置完成后，把demo放入到nginx的网站根目录中，启动nginx服务器，在浏览器访问demo，可以使用局域网ip地址，这样手机和电脑再同一个局域网的话也可以访问到：

可以使用草料二维码，把当前页面的url自动生成二维码，然后用手机扫码既可以打开。

手机端需要实现安装好沙箱版的支付宝，然后在手机上使用浏览器访问页面，点击确认按钮就会调起支付宝，完成支付流程。

注意，支付密码是：111111

看完后如果觉得有一点收获的话，麻烦点个赞再走哈😁

欢迎关注：【微信公号：H5开讲啦】