在看这篇文章之前，希望你先看上一篇文章支付宝支付（一）—H5手机网站支付2.0（alipay.trade.wap.pay） ，涉及到的部分准备工作这里就不再重复了，有疑问的看上一篇文章或者查阅官方文档。
一、PC收银台产品介绍
这篇文章我们先来介绍一下支付宝Page支付（也叫作电脑网站支付）。
电脑网站支付产品帮助用户在商家 PC 网站购买商品支付时，跳转到支付宝 PC 网站收银台完成付款。 交易资金直接打入商家支付宝账户，实时到账。
用户可以通过输入支付宝账号、密码完成支付。也可以通过支付宝APP扫码完成支付。
用户交易款项即时到账，提供退款、资金分账、对账等配套服务。
1、应用场景
以下流程仅供参考，开发者可根据自身网站进行调整：
步骤1：买家在商户网站选择需购买的商品，填写订单信息后，点击立即购买，如下图所示。
步骤2：网页跳转到支付宝收银台页面，此时有两种付款方式供用户选择：
用户可以使用支付宝 APP 扫一扫屏幕二维码，待手机提示付款后选择支付工具输入密码即可完成支付，如图1所示；
如果不使用手机支付，也可以点击图 1 页面右侧的 登录账户付款，输入支付宝账号和支付密码登录 PC 收银台，如图 2 所示。
步骤3：用户选择付款方式，输入支付密码后点击 确认付款，跳转到付款成功页后则表示付款成功。
例如我们常用的优酷网页版购买会员即可以使用电脑网站支付，露出前置支付宝二维码扫码支付，开发者可以自行前往体验。
2、准入条件
企业支付宝账户或个体工商户均可申请，
提供真实有效的营业执照，且支付宝账户名称需与营业执照主体一致；
提供能正常访问的网站地址且页面显示完整，且页面有完整商品和价格信息；
网站通过ICP备案，有明确的运营内容与完整的商品和价格信息。
注意： 团购类网站不支持个体商家签约。
3、计费模式
电脑网站支付的签约费率如下表所示：
服务名称
费率
服务期限
单笔费率
0.6%
1年
4、使用说明
电脑网站支付产品包含的接口和描述如下：
接口英文名接口中文名
alipay.trade.page.pay
统一收单下单并支付页面接口
alipay.trade.refund
统一收单交易退款接口
alipay.trade.fastpay.refund.query
统一收单交易退款查询接口
alipay.trade.query
统一收单线下交易查询接口
alipay.trade.close
统一收单交易关闭接口
alipay.data.dataservice.bill.downloadurl.query
查询对账单下载地址
注意：其实除了alipay.trade.page.pay 手机网站支付接口，其他接口对于其他产品都是通用的
二、准备工作
还是先上官方文档入口
【官方电脑网站支付快速接入文档】
前四个步骤这里就不再重复了，有兴趣有疑问的查看上一篇文章支付宝支付（一）—H5手机网站支付2.0（alipay.trade.wap.pay）
1、创建应用并获取APPID
2、配置应用环境
3、配置沙箱环境
4、服务端实现（集成并且配置SDK）
5、调用接口
电脑网站支付产品包含两类API：
页面跳转类：需要从前端页面以Form表单的形式发起请求，浏览器会自动跳转至支付宝的相关页面（一般是收银台或签约页面），用户在该页面完成相关业务操作后再回跳到商户指定页面。例如本产品中的电脑网站支付接口alipay.trade.page.pay。
系统调用类：直接从服务端发起HTTP请求，支付宝会同步返回请求结果。例如本产品中的交易查询等配套API。
6、调用流程图
三、服务端具体封装和操作过程
前三个步骤这里就不再重复了，有兴趣有疑问的查看上一篇文章支付宝支付（一）—H5手机网站支付2.0（alipay.trade.wap.pay）
1、将支付宝通用参数独立配置在一个属性文件中方便管理
2、读取配置文件信息
3、加载接入参数并初始化AlipayClient
4、利用sdk封装page支付代码
通用模块，就在demo里面的 AliPayUtil.java 里面
/**
* alipay.trade.page.pay：统一收单下单并支付页面接口（PC场景下单并支付）
* @param aliPayMap
* @return
*/
public static String alipayTradePagePay(String out_trade_no, String total_amount){
try {
//（1）封装bizmodel信息
AlipayTradePagePayModel model = new AlipayTradePagePayModel();
model.setOutTradeNo(out_trade_no);
model.setSubject("支付宝电脑网站支付");
model.setBody("支付宝电脑网站支付");
model.setProductCode("FAST_INSTANT_TRADE_PAY");
model.setTotalAmount(total_amount);
model.setTimeoutExpress(staticAliPayProperties.getAli_timeout_express());
//（2）设置请求参数
AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
alipayRequest.setReturnUrl(staticAliPayProperties.getAli_return_url());
alipayRequest.setNotifyUrl(staticAliPayProperties.getAli_notify_url());
alipayRequest.setBizModel(model);
//（3）请求
String form = alipayClient.pageExecute(alipayRequest).getBody();
System.out.println("*********************\n返回结果为："+form);
return form;
} catch (AlipayApiException e) {
e.printStackTrace();
return null;
}
}
PC电脑网站支付和H5手机网站支付的区别重点看我标黄部分
5、模拟支付请求
步骤1：控制层 AliPayController.java 写请求方法 alipayTradePagePay
步骤2：调取的接口和实现类
注意：
（1）这里我随机生成了商户订单号 out_trade_no，交易金额 total_amount 写死了，正常业务处理中，我们是根据你的业务实际情况处理
（2）里面涉及到的其他的工具类，最后的demo里面会提供。当然，你也可以自己随机商城，保持不重复的原则即可
（3）实际操作中，在调取之前，我们需要处理具体的业务逻辑，因为本文只总结支付宝相关的，就不补充了。例如：订单金额计算处理；商户订单和支付宝订单的关联和存储，商户订单和支付宝订单可能是多对一的关系；支付宝订单需要保存，因为在回调的时候你需要根据支付宝订单的 out_trade_no 识别支付宝通知的订单结果；你可以把它存储在redis或者持久化到数据库中。
步骤3：模拟支付请求
这里，我是写了一个html页面，通过前端请求到后台调取控制层方法模拟实际支付请求的
对于返回的form内容处理方式有多种，这里继续采取前端处理模式，其他的不做过多说明了，有兴趣的看上一篇文章。
6、运行查看测试结果
点击“统一收单下单并支付页面”按钮，其他按钮功能开发后面有时间会发博文介绍，不过demo里面已经有了，你也可以自己先测试，请求后控制台日志显示
详细form内容如下：
我们可以很清楚的看到，支付宝返回的是一个form表单的内容，我们在前端接收后按照上面前端的处理方法处理后，发现点击“统一收单下单并支付页面”按钮之后，直接跳到了支付宝下面页面，按照以下步骤操作就行
方式一：沙箱钱包扫描二维码支付
方拾二：账号密码登录支付
四、同异步结果处理
这部分处理与H5手机网站支付一样，不再重复啰嗦了，有疑问的查看上一篇文章支付宝支付（一）—H5手机网站支付2.0（alipay.trade.wap.pay）
五、demo示例下载
查看上一篇文章支付宝支付（一）—H5手机网站支付2.0（alipay.trade.wap.pay）