hbuilder的移动端APP如何实现微信支付,求具体流程详解

HBuilder 基座已实现H5 plus的支付API，现已集成支付宝快捷支付平台。使用支付功能前必须在支付宝网站开通”快捷支付“服务，并配置服务器生成订单信息。

开发指导

支付流程如下：

plus API使用步骤：
1. 调用plus.payment.getChannels()获取系统支持的支付通道；
2. 调用plus.payment.request()发起支付请求。

示例代码

1. var channel=null;
   
2. // 1. 获取支付通道
   
3. function plusReady(){
   
4.     // 获取支付通道
   
5.     plus.payment.getChannels(function(channels){
   
6.         channel=channels[0];
   
7.     },function(e){
   
8.         alert("获取支付通道失败："+e.message);
   
9.     });
   
10. }
    
11. document.addEventListener('plusready',plusReady,false);
    
12. 
    
13. var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
    
14. var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';
    
15. // 2. 发起支付请求
    
16. function pay(id){
    
17.     // 从服务器请求支付订单
    
18.     var PAYSERVER='';
    
19.     if(id=='alipay'){
    
20.         PAYSERVER=ALIPAYSERVER;
    
21.     }else if(id=='wxpay'){
    
22.         PAYSERVER=WXPAYSERVER;
    
23.     }else{
    
24.         plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");
    
25.         return;
    
26.     }
    
27.     var xhr=new XMLHttpRequest();
    
28.     xhr.onreadystatechange=function(){
    
29.         switch(xhr.readyState){
    
30.             case 4:
    
31.             if(xhr.status==200){
    
32.                 plus.payment.request(channel,xhr.responseText,function(result){
    
33.                     plus.nativeUI.alert("支付成功！",function(){
    
34.                         back();
    
35.                     });
    
36.                 },function(error){
    
37.                     plus.nativeUI.alert("支付失败：" + error.code);
    
38.                 });
    
39.             }else{
    
40.                 alert("获取订单信息失败！");
    
41.             }
    
42.             break;
    
43.             default:
    
44.             break;
    
45.         }
    
46.     }
    
47.     xhr.open('GET',PAYSERVER);
    
48.     xhr.send();
    
49. }

复制代码

注：第二步中获取到的订单数据需要在服务器通过支付宝平台获取PID和密钥生成。

HBuilder应用配置

分享插件添加方法具体步骤如下：
1. 双击应用的manifest.json文件，选中“使用第三方插件”

 

Ctrl+S保存。

• 
  
• 点击manifest.json文件的“代码视图”，在permissions节点下添加Payment节点：
  
   
  
• 在plus -> distribute -> plugins 节点下添加payment节点：
  
   
  
  
  
  alipay节点下配置支付宝相关信息
  scheme值为iOS平台调用支付宝的“快捷支付”应用返回时用到的标识，推荐使用小写字符串。
  weixin节点下配置微信支付相关信息
  appid值为在微信开放平台申请应用的AppID值。
  

支付宝功能申请

• 
  
• 登录支付宝账号，签约申请“移动快捷支付”功能，操作流程参考：
  支付宝帮助中心
• 获取PID，参考教程：
  获取合作者身份ID
• 生成密钥（公钥和私钥），并提交到支付宝，参考教程：
  生成RSA密钥
  上传公钥
  

服务器生成订单示例（PHP）
参考开源示例代码github-支付宝
C#生成支付宝订单示例

微信支付功能申请

• 
  
• 使用微信支付功能需到微信开放平台申请移动应用并开通支付功能
  微信APP支付接入商户服务中心
  申请应用后可以获取AppID和AppSecret值。
• 开通支付功能后可获取支付业务服务器配置数据
  PARTNER：财付通商户号
  PARTNER_KEY：财付通密钥
  PAYSIGNKEY：支付签名密钥
  
  

　　参考开源示例代码 github-微信支付