支付宝手机网站支付遇到的问题

By paopao | | No Comments | 支付宝

因公司业务需求需要在手机网站中加入支付的功能，且指明需要支付宝支付。因为之前没做过，特地去官方的文档上查阅了下。文档地址如下：https://doc.open.alipay.com/

具体页面如下图所示：

1

进入API列表后查看到的页面如下图所示：

2

我们只需要做支付因此也就选择了alipay.trade.wap.pay

点击进入的页面如下图所示：

3

然后就没有然后了…

还好往下走，有“请求示例”，果断研究起来，具体页面如下图所示：

4

尼玛这什么鬼，完全看不懂也压根不了解该以什么样式提交给支付宝，坑啊…

还好想到了之前目录中有提到Demo，果断前往下载，具体页面如下图所示：

5

下载解压，目录结构如下图所示：

6

我采用的RSA的签名方式，后端使用的是PHP，进入到具体页面后，如下图所示：

7

官方还配有readme，有对整个项目的说明，这点还是挺不错的。按照一贯的做法，将项目搁到自己的环境下跑起来再说，具体页面如下图所示：

8

这里又忍不住要吐槽一句了，既然是手机网站，为什么我以iPhone 6 plus设备打开是这样的：

9

哥，你们好歹加两行代码让它兼容移动端，也好方便操作啊。

吐槽先到这，接下来进入正题。

在配置完相关的参数，就可以进行测试，具体配置文件如下图所示：

10

看到了熟悉支付界面各种开心，具体页面如下图所示：

11

既然官方demo没什么问题，那就吧啦吧啦（拟声词，具体的意思是研究下代码把该拷贝的东西拷贝出来为己用）。然后就懵逼了…

结算页面源码中什么都看不到这什么情况，具体页面如下图所示：

12

唯一的脚本还只是将需要的东西写入对应的input中，然后就没有然后了，毕竟我是拍黄片的，这点事可难不倒我，如果是纯前端就麻烦了，所以这边建议公司前端该协助的时候还是需要去协助的。

在研究了N久之后（其实也没多久），找到了相关的代码。具体页面如下图所示：跟官方demo还是有点区别的，我稍微修改了下，不过问题不大。它是通过php将需要提交的参数以及地址重新写入到对应的表单中，哎为什么要这么整呢，就不能直接写死在html里面嘛。

13

重点来了这部分代码在页面运行的时候是不可见的，我还得一点点去深拔它都添加了那些参数，这工作累得慌，还好我机智。将代码稍微修改就可以在页面上看到了，修改部分如下图所示：14

 

修改之后再次运行，出来的代码如下图所示：

15

 

终于搞清楚它所提交的地址以及参数，接下来妥妥的拷贝粘贴去吧…

为了方便你们不用再像我一样去修改源码什么的，我直接贴出上图的内容：

<form id=’alipaysubmit’ name=’alipaysubmit’ action=’https://mapi.alipay.com/gateway.do?_input_charset=utf-8′ method=’get’>

<div>_input_charset</div><input type=’text’ name=’_input_charset’ value=’utf-8’/>

<div>notify_url</div><input type=’text’ name=’notify_url’ value=’http://商户网关网址/alipay.wap.create.direct.pay.by.user-PHPUTF-8/notify_url.php’/>

<div>out_trade_no</div><input type=’text’ name=’out_trade_no’ value=’201611251047341’/>

<div>partner</div><input type=’text’ name=’partner’ value=’partner’ 此处为’partner’ />

<div>payment_type</div><input type=’text’ name=’payment_type’ value=’1’/>

<div>return_url</div><input type=’text’ name=’return_url’ value=’http://商户网址/alipay.wap.create.direct.pay.by.user-PHP-UTF-8/return_url.php’/>

<div>seller_id</div><input type=’text’ name=’seller_id’ value=此处为seller_id/>

<div>service</div><input type=’text’ name=’service’ value=’alipay.wap.create.direct.pay.by.user’/>

<div>subject</div><input type=’text’ name=’subject’ value=’测试’/>

<div>total_fee</div><input type=’text’ name=’total_fee’ value=’0.01’/>

<div>sign</div><input type=’text’ name=’sign’ value=’此处为sigh’/>

<div>sign_type</div><input type=’text’ name=’sign_type’ value=’RSA’/>

<input type=’submit’ value=’确认’ style=’display:none;’>

</form>

 

如果还有什么不明白的地方，欢迎加我QQ进行咨询

本人QQ：980569038

也可以扫码本人微信：

本人原创，转载请注明出处?http://www.itinfor.cn/archives/777

若该文章对您有一定帮助，欢迎打赏

Tagged ,