以下教程基于2015-05-17发布的WeX5的3.1.1版本。如果你想先感受下支付，可以在

http://www.wex5.com/portfolio-items/demo-takeout/ 中扫码下载ios、android客户端支付来感受下（每份外卖支付金额都是1分钱哦）。

开发篇

    1. 我们需要在js中写上调用支付的代码，参考代码如下，详细代码可以参考外卖案例中的完整代码(非常推荐看下外卖中关于支付的逻辑/UI2/takeout/index.js，因为我认为这个地方对支付状态码和回调都做了比较全面的设计和实现，要不自己写起来还是有点麻烦的)。
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
  支付宝支付
**/
     var alipay = navigator.alipay;
    alipay.pay({
            "seller" : "huangyx@justep.com", //卖家支付宝账号或对应的支付宝唯一用户号
            "subject" : "x5外卖", //商品名称
            "body" : "x5外卖", //商品详情
            "price" : "0.01", //金额，单位为RMB
            "tradeNo" : tradeNo, //唯一订单号
            "timeout" : "30m", //超时设置
            "notifyUrl" : notifyUrl
    }, // 服务器通知路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
  微信支付
**/
     var weixin = navigator.weixin;
        weixin.generatePrepayId({
                "body" : "x5外卖",
                "accessToken" : accessToken,
                "feeType" : "1",
                "notifyUrl" : notifyUrl,
                "totalFee" : "1",
                "traceId" : traceID,
                "tradeNo" : traceNo
            }, function(prepayId) {
                weixin.sendPayReq(prepayId, function(message) {
                    var responseCode = parseInt(message);
                    if (responseCode === 0) {
                        payDtd.resolve(1);
                    } else if (!isNaN(responseCode)) {
                        payDtd.reject((-13) + responseCode);
                    } else {
                        payDtd.reject(-10);
                    }
                }, function(message) {
                    justep.Util.hint("微信支付失败！");
                    payDtd.reject(-10);
                });
            }, function(message) {
                justep.Util.hint("微信支付失败！");
                payDtd.reject(-11);
            });

2.其次要能支持手机支付必须使用alipay 和weixin的本地插件才能在手机上调用起支付。

这里有2个关键点

  1.    因为我们申请微信的时候应用包名填写的是com.justep.x5.takeout。所以如果你想用插件默认配置（x5申请的支付参数）的话，包名一定写com.justep.x5.takeout

2.    记得选插件alipay、weixin，当然你可以选择自动，但是自动打包需要勾选打包资源，同时勾选的资源页面的js中一定要写

1
2
3
require("cordova!com.justep.cordova.plugin.weixin");
 
require("cordova!com.justep.cordova.plugin.alipay");

所以第一次测试的时候推荐手动选择一下插件，记得用打包服务器哦，不用打包服务器是没有支付插件的，防止没有选资源，或者代码没有写require等问题造成插件没有安装正确的问题。以后熟悉了可以用自动选择插件。

pay1

好了到这里在生成的app就可以愉快的支付了。这里需要注意的地方，严格来说一个app需要在微信支付那边申请一个商户，但是如果你用的是WeX5的默认参数，就是在用WeX5商户信息在测试，所以如果你的手机上装了WeX5的外卖等app的时候（这个app也用了WeX5的商户参数），所以在微信支付完毕后可能会不知道跳到哪个应用，因为微信发现手机上有2个应用都说自己是WeX5的商户。所以遇到这种情况删掉干扰的app就可以愉快的测试自己的app了（一般是WeX5外卖）。

 

上线篇

上面说的是用WeX5的默认配置进行开发测试，但是一旦自己的app开发好了要上线，我们肯定要用自己的商户信息来打包应用（当然你要用WeX5的默认商户配置，然后把钱都支付到WeX5的账户上我们也非常欢迎^_^）,这个时候就需要修改插件中的配置来让开发的app支付到自己公司的账上。

  • 首先我们来修改weixin支付的参数 ，打开/Native/plugins/com.justep.cordova.plugin.weixin/plugin.xml

1.修改ios部分

1
2
3
<preference name="weixin_appid" value="wx832f85feb2e76b14" />
      <preference name="weixin_partner_id" value="1230177801" />
      <preference name="weixin_api_key" value="43cab6b2766381683f6cb1b4ee6db27a" />

以及

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<config-file target="*-Info.plist" parent="CFBundleURLTypes">
            <array>
                <dict>
                    <key>CFBundleTypeRole</key>
                    <string>Editor</string>
                    <key>CFBundleURLIconFile</key>
                    <string>icon-50@2x</string>
                    <key>CFBundleURLName</key>
                    <string>weixin</string>
                    <key>CFBundleURLSchemes</key>
                    <array>
                        <string>wx832f85feb2e76b14</string>
                    </array>
                </dict>
            </array>
        </config-file>

wx832f85feb2e76b14这个值也要改哦

2.android部分

1
2
3
<preference name="weixin_appid" value="wx832f85feb2e76b14" />
        <preference name="weixin_partner_id" value="1230177801" />
        <preference name="weixin_api_key" value="43cab6b2766381683f6cb1b4ee6db27a" />
1
2
3
4
5
6
7
<config-file target="AndroidManifest.xml" parent="/manifest/application/activity[@android:name='X5']">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<data android:scheme="wx832f85feb2e76b14"/>
</intent-filter>
</config-file>

wx832f85feb2e76b14这个值也要改哦

这几个参数的值为你自己从微信商户中得到的值。

  • 接下来修改alipay的参数，打开/Native/plugins/com.justep.cordova.plugin.alipay/plugin.xml

1. ios部分

1
2
3
4
5
6
7
8
9
10
11
<config-file target="config.xml" parent="/*">
            <preference name="partner" value="2088811446024912" />
            <preference name="rsa_private"
                            value="MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAM3NsYcFbce3omzhiXY1Mr8nkxuHkpVFky9JBb+vnLzje+mjZIxbHDGIU//3c88H5F6CO6CPNMa036QJ9nhS6Ea7xmEGQ2JxY0JMM2bnQxhRtwwe1nV67boFzkjrOWD1loThzK3pgVkb6D6gLqANXcPSe3JAqrvouNUYvK/+75O1AgMBAAECgYBy3IdlZUlE+x+DB0lyGPTOrSa0abEM8LzZ2jaEKl4fKhOBbXjzwPH2TzEaniAbfzsc6DChRuvcrxxWcF0IALWzqyJdGNxZjlhwyVhKc4BJnn90AUXohvB83AFd2+cHurHkAE8sEO8ihDsSOon0YpKKkA/haQ8RKshTCO8RZIlugQJBAP2WkR3BbPzgHZxKR8u0woe0ZzIkUCa/+dMr8XELE6ZBj1w3uPTq4ePHto5W9MLwzN3p3lN+WcUkAM/BdzlbUyECQQDPwsf4SYCjV5hTNY7sj1sqcO4O8Ti7HnINHkefb90TsIrQjaBYNYxeEjj028yLxKkNkNUoLZQekt0jDast24IVAkBDvM5yplJYkf0W3HilH1m/Kh9Os4h9cVZoZBqQWaccB/MlbPUI5x0D3TsUdoHW+L+gn3H115BfKqjU1hbkyVJBAkEAryckVTMKayrG9aeahd7Z2e75E8nTrRUey+ZyNX0mYZodfXNY8eS7IPe14uCHEnJKn3Ax9DxwulHQcuPsI64CfQJBAPYgBMhCX6HXpLTKUuIID1dy1ENZyEEUZCouQsuPYwirOO6z4NIi8wSa98wgM0/2NJrVs1W2/l2fn8xVycd4Ykk=" />
            <preference name="rsa_public"
                            value="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCnxj/9qwVfgoUh/y2W89L6BkRAFljhNhgPdyPuBV64bfQNN1PjbCzkIM6qRdKBoLPXmKKMiFYnkd6rAoprih3/PrQEB/VsW8OoM8fxn67UDYuyBTqA23MML9q1+ilIZwBC2AQ2UBVOrFXfFl75p6/B5KsiNG9zpgmLCUYuLkxpLQIDAQAB" />
            <feature name="Alipay">
                <param name="ios-package" value="CDVAlipay" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<config-file target="*-Info.plist" parent="CFBundleURLTypes">
            <array>
                <dict>
                    <key>CFBundleTypeRole</key>
                    <string>Editor</string>
                    <key>CFBundleURLIconFile</key>
                    <string>icon-50@2x</string>
                    <key>CFBundleURLName</key>
                    <string>alipay</string>
                    <key>CFBundleURLSchemes</key>
                    <array>
                        <string>2088811446024912</string>
                    </array>
                </dict>
            </array>
        </config-file>

2088811446024912 这个值要改
2. android部分

1
2
3
4
5
6
7
8
9
10
11
<config-file target="res/xml/config.xml" parent="/*">
            <preference name="partner" value="2088811446024912" />
            <preference name="rsa_private"
                            value="MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAM3NsYcFbce3omzhiXY1Mr8nkxuHkpVFky9JBb+vnLzje+mjZIxbHDGIU//3c88H5F6CO6CPNMa036QJ9nhS6Ea7xmEGQ2JxY0JMM2bnQxhRtwwe1nV67boFzkjrOWD1loThzK3pgVkb6D6gLqANXcPSe3JAqrvouNUYvK/+75O1AgMBAAECgYBy3IdlZUlE+x+DB0lyGPTOrSa0abEM8LzZ2jaEKl4fKhOBbXjzwPH2TzEaniAbfzsc6DChRuvcrxxWcF0IALWzqyJdGNxZjlhwyVhKc4BJnn90AUXohvB83AFd2+cHurHkAE8sEO8ihDsSOon0YpKKkA/haQ8RKshTCO8RZIlugQJBAP2WkR3BbPzgHZxKR8u0woe0ZzIkUCa/+dMr8XELE6ZBj1w3uPTq4ePHto5W9MLwzN3p3lN+WcUkAM/BdzlbUyECQQDPwsf4SYCjV5hTNY7sj1sqcO4O8Ti7HnINHkefb90TsIrQjaBYNYxeEjj028yLxKkNkNUoLZQekt0jDast24IVAkBDvM5yplJYkf0W3HilH1m/Kh9Os4h9cVZoZBqQWaccB/MlbPUI5x0D3TsUdoHW+L+gn3H115BfKqjU1hbkyVJBAkEAryckVTMKayrG9aeahd7Z2e75E8nTrRUey+ZyNX0mYZodfXNY8eS7IPe14uCHEnJKn3Ax9DxwulHQcuPsI64CfQJBAPYgBMhCX6HXpLTKUuIID1dy1ENZyEEUZCouQsuPYwirOO6z4NIi8wSa98wgM0/2NJrVs1W2/l2fn8xVycd4Ykk=" />
            <preference name="rsa_public"
                            value="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCnxj/9qwVfgoUh/y2W89L6BkRAFljhNhgPdyPuBV64bfQNN1PjbCzkIM6qRdKBoLPXmKKMiFYnkd6rAoprih3/PrQEB/VsW8OoM8fxn67UDYuyBTqA23MML9q1+ilIZwBC2AQ2UBVOrFXfFl75p6/B5KsiNG9zpgmLCUYuLkxpLQIDAQAB" />
            <feature name="Alipay">
                <param name="android-package" value="com.justep.cordova.plugin.alipay.Alipay" />
                <param name="onload" value="true" />
            </feature>
        </config-file>

修改完参数，记得新建一个app，这样你修改的参数才生效哦（以后新建的app的默认参数就是修改后的了），然后正常打包就可以了。

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443