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. var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
  13. var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';
  14. // 2. 发起支付请求
  15. function pay(id){
  16.     // 从服务器请求支付订单
  17.     var PAYSERVER='';
  18.     if(id=='alipay'){
  19.         PAYSERVER=ALIPAYSERVER;
  20.     }else if(id=='wxpay'){
  21.         PAYSERVER=WXPAYSERVER;
  22.     }else{
  23.         plus.nativeUI.alert("不支持此支付通道!",null,"捐赠");
  24.         return;
  25.     }
  26.     var xhr=new XMLHttpRequest();
  27.     xhr.onreadystatechange=function(){
  28.         switch(xhr.readyState){
  29.             case 4:
  30.             if(xhr.status==200){
  31.                 plus.payment.request(channel,xhr.responseText,function(result){
  32.                     plus.nativeUI.alert("支付成功!",function(){
  33.                         back();
  34.                     });
  35.                 },function(error){
  36.                     plus.nativeUI.alert("支付失败:" + error.code);
  37.                 });
  38.             }else{
  39.                 alert("获取订单信息失败!");
  40.             }
  41.             break;
  42.             default:
  43.             break;
  44.         }
  45.     }
  46.     xhr.open('GET',PAYSERVER);
  47.     xhr.send();
  48. }
复制代码
注:第二步中获取到的订单数据需要在服务器通过支付宝平台获取PID和密钥生成。
HBuilder应用配置
分享插件添加方法具体步骤如下:
1. 双击应用的manifest.json文件,选中“使用第三方插件”
 

Ctrl+S保存。

  • 点击manifest.json文件的“代码视图”,在permissions节点下添加Payment节点:
     
  • 在plus -> distribute -> plugins 节点下添加payment节点:


    alipay节点下配置支付宝相关信息
    scheme值为iOS平台调用支付宝的“快捷支付”应用返回时用到的标识,推荐使用小写字符串。
    weixin节点下配置微信支付相关信息
    appid值为在微信开放平台申请应用的AppID值。
支付宝功能申请
服务器生成订单示例(PHP)
参考开源示例代码github-支付宝
C#生成支付宝订单示例
微信支付功能申请

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


  参考开源示例代码github-微信支付
展开阅读全文

没有更多推荐了,返回首页