react-native 接QQ钱包支付的SDK

目前没有npm安装，需要自行引入第三方sdk

因业务需求需要接QQ钱包支付，网上也没有相应的教程、步骤。只好自己摸索，在这里写下我的解决方案给需要用到的人，更快的接好QQ钱包支付，也给自己记下笔记（目前接触react-native才1个月多不是很深入了解其原理，只停留在实现业务功能的层面，解决方案不是很到位）

配置步骤

android (ios 要走内购流程IAP)

1.去QQ钱包商户平台下载需要的SDK把下载好的 mqqopenpay.jar 放在 android>app>libs 目录下

2.在android>app>src>main>java>cn>test下创建qqwallet文件夹（cn>test为你的包名具体按各自的目录名字来）里面分别放三个文件（拷贝即可）

CallbackActivity.java （处理支付回调）
QqWalletModule.java （编写react-native可以使用的方法）
QqWalletPackage.java （连接android跟react-native）

CallbackAcvity.java

package cn.test.qqwallet; // test改成你项目中的包名import com.tencent.mobileqq.openpay.api.IOpenApi;
import com.tencent.mobileqq.openpay.api.IOpenApiListener;
import com.tencent.mobileqq.openpay.api.OpenApiFactory;
import com.tencent.mobileqq.openpay.data.base.BaseResponse;
import com.tencent.mobileqq.openpay.data.pay.PayResponse;import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;import com.facebook.react.bridge.ReadableMap;public class CallbackActivity extends Activity implements IOpenApiListener {IOpenApi openApi;// 处理支付回调@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);openApi = OpenApiFactory.getInstance(this, QqWalletModule.APP_ID);openApi.handleIntent(getIntent(), this);}// 处理支付回调@Overrideprotected void onNewIntent(Intent intent) {super.onNewIntent(intent);setIntent(intent);openApi.handleIntent(intent, this);}// 返回支付结果@Overridepublic void onOpenResponse(BaseResponse response) {String message;if (response == null) {message = null;return;} else {if (response instanceof PayResponse) {PayResponse payResponse = (PayResponse) response;message = "{\"apiName\":\"" + payResponse.apiName + "\","+ "\"serialnumber\":\"" + payResponse.serialNumber + "\","+ "\"isSucess\":" + payResponse.isSuccess() + ","+ "\"retCode\":" + payResponse.retCode + ","+ "\"retMsg\":\"" + payResponse.retMsg + "\"";message += "}";} else {message = "notPayResponse";}}QqWalletModule.promise.resolve(message);finish();}}

QqWalletPackage.java

package cn.test.qqwallet; // test改成你的包名import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;public class QqWalletPackage implements ReactPackage {@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new QqWalletModule(reactContext));return modules;}}

QqWalletModule.java

package cn.test.qqwallet; // test改成你的包名import java.io.IOException;import android.os.Bundle;
import android.text.TextUtils;
import android.widget.Toast;
import android.app.Activity;import com.tencent.mobileqq.openpay.api.IOpenApi;
import com.tencent.mobileqq.openpay.api.OpenApiFactory;
import com.tencent.mobileqq.openpay.constants.OpenConstants;
import com.tencent.mobileqq.openpay.data.pay.PayApi;import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.Promise;public class QqWalletModule extends ReactContextBaseJavaModule {private final static String INVOKE_FAILED = "qq API invoke returns false.";static Promise promise = null;QqWalletModule(ReactApplicationContext reactContext) {super(reactContext);}@Overridepublic String getName() {return "QqWallet";}int paySerial = 1;String callbackScheme = "qwallet111111111"; // 111111111改成你在qq商户平台申请的appidstatic String APP_ID = "111111111"; // 111111111改成你在qq商户平台申请的appidIOpenApi openApi = OpenApiFactory.getInstance(getReactApplicationContext(), APP_ID);@ReactMethodpublic void onBtnIsMqqInstalled(Callback callback) {boolean isInstalled = openApi.isMobileQQInstalled();callback.invoke(null, isInstalled);}@ReactMethodpublic void onBtnIsMqqSupportPay(Callback callback) {boolean isSupport = openApi.isMobileQQSupportApi(OpenConstants.API_NAME_PAY);callback.invoke(null, isSupport);}@ReactMethodpublic void onBtnMqqPay(ReadableMap data, Promise promise) {if (TextUtils.isEmpty(data.getString("tokenId"))) {Toast.makeText(getReactApplicationContext(), "tokenId is null.", Toast.LENGTH_LONG).show();}QqWalletModule.promise = promise;PayApi api = new PayApi();if (data.hasKey("appId")) {api.appId = data.getString("appId");}if (data.hasKey("tokenId")) {api.tokenId = data.getString("tokenId");}if (data.hasKey("bargainorId")) {api.bargainorId = data.getString("bargainorId");}if (data.hasKey("nonce")) {api.nonce = data.getString("nonce");}if (data.hasKey("pubAcc")) {api.pubAcc = data.getString("pubAcc");}if (data.hasKey("sig")) {api.sig = data.getString("sig");}api.serialNumber = "" + paySerial++;api.callbackScheme = callbackScheme;api.pubAccHint = "";api.timeStamp = System.currentTimeMillis() / 1000;api.sigType = "HMAC-SHA1";if (api.checkParams()) {openApi.execApi(api);}}
}

4.修改配置文件

app > build.gradle

android {// 添加这条sourceSets {main {jniLibs.srcDirs = ['libs']}}
}

AndroidManifest.xml

<!-- 添加qq支付 回调监听 -->
<!-- 添加在 <application></application> 里 --><activityandroid:name=".qqwallet.CallbackActivity"android:launchMode="singleTop"android:exported="true" ><intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.BROWSABLE"/><category android:name="android.intent.category.DEFAULT"/><data android:scheme="qwallet111111111"/></intent-filter></activity>
<!-- end -->

MainApplication.java

package cn.test;(test改成你的包名)import cn.test.qqwallet.QqWalletPackage;(test改成你的包名)

protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(// 添加方法 QqWalletPackagenew QqWalletPackage());
}

5.创建 qqwallet.js (放在src目录下自己找位置放,复制即可)

qqwallet.js

import { NativeModules, Platform } from 'react-native';const { QqWallet } = NativeModules;function wrapApi(nativeFunc) {if (!nativeFunc) {return undefined;}return (...args) => {return new Promise((resolve, reject) => {nativeFunc.apply(null, [...args,(error, result) => {if (!error) {return resolve(result);}if (typeof error === 'string') {return reject(new Error(error));}reject(error);},]);});};
}
export const onBtnIsMqqInstalled = Platform.OS !== 'ios' ? wrapApi(QqWallet.onBtnIsMqqInstalled) : () => { return false };export const onBtnIsMqqSupportPay = Platform.OS !== 'ios' ? wrapApi(QqWallet.onBtnIsMqqSupportPay) : () => { return false };/*** qq pay* @param {Object} data* @param {String} data.appId* @param {long} data.nonce* @param {String} data.tokenId* @param {String} data.pubAcc* @param {String} data.pubAccHint* @param {String} data.bargainorId* @param {String} data.sigType* @param {String} data.sig* @returns {Promise}*/
export function qqPay(data) {if (Platform.OS === 'ios') {return }function correct(actual, fixed) {if (!data[fixed] && data[actual]) {data[fixed] = data[actual];delete data[actual];}}correct('appid', 'appId');correct('tokenid', 'tokenId');correct('bargainorid', 'bargainorId');correct('pubacc', 'pubAcc');return QqWallet.onBtnMqqPay(data);
}

6.方法说明及调用

// 判断用户手机是否安装了QQ
onBtnIsMqqInstalled().then((installed) => {if (installed) {// 安装了}
})// 判断用户安装的QQ是否支持支付功能
onBtnIsMqqSupportPay().then((isSupportPay) => {if (isSupportPay) {// 支持}
})/** 参数详情见QQ商户开发文档* qqPay* @param {Object} data* @param {String} data.appId* @param {long} data.nonce* @param {String} data.tokenId* @param {String} data.pubAcc* @param {String} data.bargainorId* @param {String} data.sig* @returns {Promise}*/
// 调起第三方支付方法
qqPay({appId: '',tokenId: '',bargainorId: '',nonce: '',pubAcc: '',sig: '',
}).then(data => {if (data !== null && data !== 'notPayResponse') {let res = JSON.parse(data)if (res.isSucess) {// 充值成功} else {// 充值失败console.log(res.retMsg)}} else {console.log('返回值错误或没有')}
})
// 返回值是个json
/** 包含如下字段* apiName* serialnumber* isSucess* retCode* retMsg*/

希望能帮助到你们.

react-native 接QQ钱包支付的SDK相关推荐

Android 开发中如何实现在webview中打开微信支付、支付宝、QQ钱包支付
在Android实际开发中往往会遇到不在项目中添加微信,支付宝,QQ钱包支付的SDK,但是还是要调用本地App进行支付,我们可以在webview中进行解决这样的问题,具体的代码如下: @Overrid ...
php 实现 qq钱包支付
网上关于 qq钱包支付服务端(php) 的资料很少,特来记录下 qq接口通道,https://qpay.qq.com/buss/wiki/38/1203 下面直接贴封装好的代码, <?phpn ...
QQ小程序支付 QQ钱包支付微信支付
前言由于公司业务需要,最近这段时间对接了QQ小程序支付[包括QQ钱包支付和 QQ小程序内微信支付],由于网络上相关的资料很少,遂留此文,以备后用.[顺便吐槽一下,官方文档不可全信] 由于业务关系, ...
php开发微信商户平台支付宝支付,不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付！附：直接可用的代码+demo...
我们知道,开发微信支付需要申请服务号并且需要一系列的资料才可以开通.怪麻烦的,现在我们可以用第三方开放的免签约微信支付接口,支付宝接口和QQ钱包接口,实现实时到帐的微信支付开发. 我们只需要在第三方的 ...
不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付！附：直接可用的代码+demo...
我们知道,开发微信支付需要申请服务号并且需要一系列的资料才可以开通.怪麻烦的,现在我们可以用第三方开放的免签约微信支付接口,支付宝接口和QQ钱包接口,实现实时到帐的微信支付开发. 我们只需要在第三方的 ...
集成支付宝钱包支付iOS SDK的方法与经验
没想到,支付宝的SDK是我目前用过的所有第三方SDK中最难用的一个了. 下载首先,你要想找到这个SDK,都得费点功夫.现在的SDK改名叫移动支付集成开发包了,下载页面在这里的 "请点此 ...
支付宝钱包支付iOS SDK的方法
为什么80%的码农都做不了架构师?>>> 文档压缩包里有两个相关文档 : <支付宝钱包支付接口开发包2.0标准版.pdf> <支付宝钱包支付接口开发包2.0 ...
ios使用支付宝进行支付，注意事项集成支付宝钱包支付iOS SDK的方法与经验。...
下载首先,你要想找到这个SDK,都得费点功夫.现在的SDK改名叫移动支付集成开发包了,下载页面在这里的 "请点此下载集成开发包" Baidu和Googlep排在前面的支付宝开 ...
OpenCart 免签约微信、支付宝、QQ钱包支付插件
开源电商程序opencart 20161209版的免签约支付插件包插件包包含了微信支付.支付宝支付插件截图: 下载地址: http://www.023tx.cn/thread-35-1-1.htm ...

react-native 接QQ钱包支付的SDK

react-native 接QQ钱包支付的SDK

目前没有npm安装，需要自行引入第三方sdk

配置步骤

android (ios 要走内购流程IAP)

react-native 接QQ钱包支付的SDK相关推荐

最新文章

热门文章