Vue学习之十(用支付宝沙箱模式完成支付功能,项目开发流程)

公钥

• 成为支付宝商户,和支付宝签约
• 上传至支付宝

私钥

• 上传至服务端

美团支付的整个流程

1、前端调用后台接口，进行下单操作【美团前端】

2、美团后台，生成订单（此时订单状态为未支付）【美团后台】

3、后台会重定向到选择支付方式的页面【美团后台】

4、用户选择了某种支付方式之后，点击了确认支付，会发送请求给后台【美团前端】

5、美团后台，会拿着支付宝平台的私钥，对订单信息进行加密，然后生成一个加密之后url，返回给浏览器【美团后台】

6、前端通过window.open就可以打开支付宝【美团前端】

7、用户和支付宝交互，并且最终确认付款，发送请求给支付宝的后台【支付宝前端】

8、支付宝接收到确认付款的请求之后，就会用户的钱，把钱扣除手续费之后打给美团的账号，并且调用美团的服务器接口，告知它支付成功【支付宝后台】

9、更改该笔订单的状态为已支付【美团后台】

• 公钥私钥用 RSA2算法(SHA256)

• 支付宝提供了沙箱模式,方便开发者开发公钥和私钥的使用

订单页面

• 通过调用接口获取订单的信息,渲染页面
• 通过jq22中图片二维码插件生成二维码,给text设置支付接口地址
  
  • 导入import "../../statics/site/js/qrcode/qrcode"
  • mounted(){}渲染完毕后,初始化插件
• 轮询 每隔3秒轮询,是否支付成功,如果支付成功status==2,跳转支付成功页面this.$router.push({path:'/pcPaySuccess'})

订单成功页面

• 样式放入<template>中即可

项目开发介绍

• 需求调研: PM(product manager) 走邮件 —>需求文档
• 原型图(产品经理);标注图、切图(UI)
• 编码阶段:
  
  • 后台:写好数据接口,再写统计接口
  • 前端:负责界面,调用接口,渲染页面
  • 联调接口
• 测试
• 打包上线

项目人员配置

• 创业型:4后台 2android 2ios 2前端 1产品经理 1UI 1技术经理 2测试
• 中型公司
  5个.net后台 5个前端 yoga 2个iOS 2个Android 3个测试
  UI 2个