微信、支付宝支付开发教程

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

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

开发篇

我们需要在js中写上调用支付的代码，参考代码如下，详细代码可以参考外卖案例中的完整代码(非常推荐看下外卖中关于支付的逻辑/UI2/takeout/index.js，因为我认为这个地方对支付状态码和回调都做了比较全面的设计和实现，要不自己写起来还是有点麻烦的)。

/**
  支付宝支付
**/
     var alipay = navigator.alipay;
	alipay.pay({
			"seller" : "huangyx@justep.com", //卖家支付宝账号或对应的支付宝唯一用户号
			"subject" : "x5外卖", //商品名称
			"body" : "x5外卖", //商品详情
			"price" : "0.01", //金额，单位为RMB
			"tradeNo" : tradeNo, //唯一订单号
			"timeout" : "30m", //超时设置
			"notifyUrl" : notifyUrl
	}, // 服务器通知路径

/**
  微信支付
**/
     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个关键点

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

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


require("cordova!com.justep.cordova.plugin.weixin");

require("cordova!com.justep.cordova.plugin.alipay");

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

好了到这里在生成的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部分

  &lt;preference name="weixin_appid" value="wx832f85feb2e76b14" /&gt;
	    &lt;preference name="weixin_partner_id" value="1230177801" /&gt;
	    &lt;preference name="weixin_api_key" value="43cab6b2766381683f6cb1b4ee6db27a" /&gt;

以及

&lt;config-file target="*-Info.plist" parent="CFBundleURLTypes"&gt;
		    &lt;array&gt;
				&lt;dict&gt;
					&lt;key&gt;CFBundleTypeRole&lt;/key&gt;
					&lt;string&gt;Editor&lt;/string&gt;
					&lt;key&gt;CFBundleURLIconFile&lt;/key&gt;
					&lt;string&gt;icon-50@2x&lt;/string&gt;
					&lt;key&gt;CFBundleURLName&lt;/key&gt;
					&lt;string&gt;weixin&lt;/string&gt;
					&lt;key&gt;CFBundleURLSchemes&lt;/key&gt;
					&lt;array&gt;
						&lt;string&gt;wx832f85feb2e76b14&lt;/string&gt;
					&lt;/array&gt;
				&lt;/dict&gt;
			&lt;/array&gt;
		&lt;/config-file&gt;

wx832f85feb2e76b14这个值也要改哦

2.android部分

&lt;preference name="weixin_appid" value="wx832f85feb2e76b14" /&gt;
	    &lt;preference name="weixin_partner_id" value="1230177801" /&gt;
	    &lt;preference name="weixin_api_key" value="43cab6b2766381683f6cb1b4ee6db27a" /&gt;

&lt;config-file target="AndroidManifest.xml" parent="/manifest/application/activity[@android:name='X5']"&gt;
&lt;intent-filter&gt;
&lt;action android:name="android.intent.action.VIEW"/&gt;
&lt;category android:name="android.intent.category.DEFAULT"/&gt;
&lt;data android:scheme="wx832f85feb2e76b14"/&gt;
&lt;/intent-filter&gt;
&lt;/config-file&gt;

wx832f85feb2e76b14这个值也要改哦

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

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

1. ios部分

&lt;config-file target="config.xml" parent="/*"&gt;
			&lt;preference name="partner" value="2088811446024912" /&gt;
			&lt;preference name="rsa_private"
			                value="MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAM3NsYcFbce3omzhiXY1Mr8nkxuHkpVFky9JBb+vnLzje+mjZIxbHDGIU//3c88H5F6CO6CPNMa036QJ9nhS6Ea7xmEGQ2JxY0JMM2bnQxhRtwwe1nV67boFzkjrOWD1loThzK3pgVkb6D6gLqANXcPSe3JAqrvouNUYvK/+75O1AgMBAAECgYBy3IdlZUlE+x+DB0lyGPTOrSa0abEM8LzZ2jaEKl4fKhOBbXjzwPH2TzEaniAbfzsc6DChRuvcrxxWcF0IALWzqyJdGNxZjlhwyVhKc4BJnn90AUXohvB83AFd2+cHurHkAE8sEO8ihDsSOon0YpKKkA/haQ8RKshTCO8RZIlugQJBAP2WkR3BbPzgHZxKR8u0woe0ZzIkUCa/+dMr8XELE6ZBj1w3uPTq4ePHto5W9MLwzN3p3lN+WcUkAM/BdzlbUyECQQDPwsf4SYCjV5hTNY7sj1sqcO4O8Ti7HnINHkefb90TsIrQjaBYNYxeEjj028yLxKkNkNUoLZQekt0jDast24IVAkBDvM5yplJYkf0W3HilH1m/Kh9Os4h9cVZoZBqQWaccB/MlbPUI5x0D3TsUdoHW+L+gn3H115BfKqjU1hbkyVJBAkEAryckVTMKayrG9aeahd7Z2e75E8nTrRUey+ZyNX0mYZodfXNY8eS7IPe14uCHEnJKn3Ax9DxwulHQcuPsI64CfQJBAPYgBMhCX6HXpLTKUuIID1dy1ENZyEEUZCouQsuPYwirOO6z4NIi8wSa98wgM0/2NJrVs1W2/l2fn8xVycd4Ykk=" /&gt;
			&lt;preference name="rsa_public"
			                value="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCnxj/9qwVfgoUh/y2W89L6BkRAFljhNhgPdyPuBV64bfQNN1PjbCzkIM6qRdKBoLPXmKKMiFYnkd6rAoprih3/PrQEB/VsW8OoM8fxn67UDYuyBTqA23MML9q1+ilIZwBC2AQ2UBVOrFXfFl75p6/B5KsiNG9zpgmLCUYuLkxpLQIDAQAB" /&gt;
			&lt;feature name="Alipay"&gt;
				&lt;param name="ios-package" value="CDVAlipay" /&gt;
				&lt;param name="onload" value="true" /&gt;
			&lt;/feature&gt;
		&lt;/config-file&gt;


&lt;config-file target="*-Info.plist" parent="CFBundleURLTypes"&gt;
		    &lt;array&gt;
				&lt;dict&gt;
					&lt;key&gt;CFBundleTypeRole&lt;/key&gt;
					&lt;string&gt;Editor&lt;/string&gt;
					&lt;key&gt;CFBundleURLIconFile&lt;/key&gt;
					&lt;string&gt;icon-50@2x&lt;/string&gt;
					&lt;key&gt;CFBundleURLName&lt;/key&gt;
					&lt;string&gt;alipay&lt;/string&gt;
					&lt;key&gt;CFBundleURLSchemes&lt;/key&gt;
					&lt;array&gt;
						&lt;string&gt;2088811446024912&lt;/string&gt;
					&lt;/array&gt;
				&lt;/dict&gt;
			&lt;/array&gt;
		&lt;/config-file&gt;

2088811446024912 这个值要改
2. android部分

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

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

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

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

17 Comments

peter 2015年5月24日于 11:31- 回复

这里的功能是否可以不用app直接放在微信里面实现?
- 007slm 2015年6月8日于 18:40- 回复
  
  这里是微信的app内支付，不是放微信里面用的，微信jssdk的支付现在外卖默认已经支持了，教程和相关东西后续会发布
ysk007 2015年5月25日于 13:17- 回复

微信公众号里面运行的报错，安卓客户端测试是正常的，花了我1分钱啊…
- 007slm 2015年6月8日于 18:45- 回复
  
  已经修复。。。-_-
summer 2015年5月29日于 16:36- 回复

能否出一个微信公众号支付的教程呢？
- 匿名 2015年6月8日于 18:42- 回复
  
  这个后续会出的，外卖默认已经带了这块能力。
summer 2015年5月29日于 16:36- 回复

出一个微信公众号微信支付的例子把
付帅 2015年6月9日于 19:40- 回复

我下载的外卖源码里面没有支付的例子，有支付例子源码的外卖实例在哪儿可以下载
匿名 2015年6月9日于 19:53- 回复

我下载的外面代码里面怎么没有支付的例子
manshow 2015年7月31日于 15:48- 回复

请问，我做成webapp怎么做支付呢？应用环境是在我的APP中打开用WEX5做的网站，里面涉及到了支付
- miko 2016年1月14日于 05:21- 回复
  
  你好，这个问题你解决了吗，我现在也是遇到这样的问题了，做的webapp里面也牵扯到支付了
2190660939 2015年8月18日于 12:26- 回复

商家支付宝是不是得开通“手机网站支付”，“移动支付”？？？
匿名 2015年8月21日于 06:33- 回复

外卖案例没有后台管理界面，用户下单，商家怎么查看订单、付款情况及发货？
泡面男 2015年10月10日于 15:38- 回复

你好，我的cordova升级到5.3.3，添加了插件https://github.com/vmlinz/cordova-plugin-alipay，编译报错at com.justep.cordova.plugin.alipay.Alipay，方法initialize(CordovaInterface cordova, CordovaWebView webView)中webView.getProperty(报错找不符号。是否新版本cordova中CordovaWebView已经废弃了getProperty方法？麻烦更新一下github上的插件啊 :)
泡面男 2015年10月10日于 15:43- 回复

您好，另外 http://doc.wex5.com/portfolio-items/demo-takeout/ 上的android app 二维码扫描不了！
MaoMao 2015年10月13日于 16:47- 回复

你说的打包服务器是不是官网的服务器？还是我们下载下来的平台服务器
刚 2015年10月23日于 13:50- 回复

新下载的5.3.1 版本的外卖例子没有支付的

微信、支付宝支付开发教程

开发篇

上线篇

Share This Story, Choose Your Platform!

17 Comments

评一波 取消回复

评一波取消回复