本文共 8553 字,大约阅读时间需要 28 分钟。
支付宝流程效果图
原文:http://www.jianshu.com/p/7bb00d8e8524
整体思路:
1.在蚂蚁金服开放平台申请应用
2.在android原生集成支付宝
3.封装android原生
4.RN与android的通信
一.在蚂蚁金服开放平台申请应用
蚂蚁金服开放平台链接:
1.在注册登录成功之后选择应用
2.选择创建应用,按照文档流程申请应用
二、在android原生集成支付宝
1.在app目录下面新建一个libs的目录
2.把支付宝的SDK复制粘贴到libs目录下
3.选择SDK右键选择add as library
4.修改Manifest,在工程的AndroidManifest.xml文件里面添加声明:
如果此时com.alipay.sdk.auth.AuthActivity报红说明未找到这个包。解决方法:
往build.gradle(有app的)中添加下面篮框的内容
和权限声明:
三.封装android原生
1.新建一个支付的acitivity,
2.进入activity_pay.xml文件点击text
3.把activity_pay.xml的源码删除,改成我现在的布局:
4.PayActivity文件 添加取消按键onBack点击方法,
public void onBack(View v){ finish(); }
5.根据蚂蚁金服开放平台提供的alipay_demo中的PayDemoActivity.java中添加支付接口,这里我的加签过程是在服务端配置返回的key,EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX)(生产环境不需要调用)中如果EnvUtils报红,选中alt+enter就能引入头文件
public void payV2(View v) { Bundle bundle = getIntent().getExtras(); String key = bundle.getString("key"); final String orderInfo = key;//支付宝沙箱android测试需要调用 EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX); Runnable payRunnable = new Runnable() { @Override public void run() { PayTask alipay = new PayTask(PayActivity.this); Mapresult = alipay.payV2(orderInfo, true); Log.i("msp", result.toString()); Message msg = new Message(); msg.what = SDK_PAY_FLAG; msg.obj = result; mHandler.sendMessage(msg); } }; Thread payThread = new Thread(payRunnable); payThread.start(); }
6.此时会报SDK_PAY_FLAG,所以我们要添加进去
private static final int SDK_PAY_FLAG = 1; private static final int SDK_AUTH_FLAG = 2;
支付回调mHandler方法
@SuppressLint("HandlerLeak") private Handler mHandler = new Handler() { @SuppressWarnings("unused") public void handleMessage(Message msg) { switch (msg.what) { case SDK_PAY_FLAG: { @SuppressWarnings("unchecked") PayResult payResult = new PayResult((Map) msg.obj); String resultInfo = payResult.getResult(); String resultStatus = payResult.getResultStatus(); Toast.makeText(PayActivity.this, resultStatus, Toast.LENGTH_SHORT).show(); // 判断resultStatus 为9000则代表支付成功 if (TextUtils.equals(resultStatus, "9000")) { // 该笔订单是否真实支付成功,需要依赖服务端的异步通知。 Toast.makeText(PayActivity.this, "支付成功", Toast.LENGTH_SHORT).show(); } else { // 该笔订单真实的支付结果,需要依赖服务端的异步通知。 Toast.makeText(PayActivity.this, "支付失败", Toast.LENGTH_SHORT).show(); } break; } case SDK_AUTH_FLAG: { @SuppressWarnings("unchecked") AuthResult authResult = new AuthResult((Map ) msg.obj, true); String resultStatus = authResult.getResultStatus(); // 判断resultStatus 为“9000”且result_code // 为“200”则代表授权成功,具体状态码代表含义可参考授权接口文档 if (TextUtils.equals(resultStatus, "9000") && TextUtils.equals(authResult.getResultCode(), "200")) { // 获取alipay_open_id,调支付时作为参数extern_token 的value // 传入,则支付账户为该授权账户 Toast.makeText(PayActivity.this, "授权成功\n" + String.format("authCode:%s", authResult.getAuthCode()), Toast.LENGTH_SHORT) .show(); } else { // 其他状态值则为授权失败 Toast.makeText(PayActivity.this, "授权失败" + String.format("authCode:%s", authResult.getAuthCode()), Toast.LENGTH_SHORT).show(); } break; } default: break; } }; };
此时报红的PayResult,AuthResult,需要去到支付宝的alipay_demo中往工程中加入这两个文件,方法是复制这两个文件到工程的相应目录下粘贴
7.获取SDK版本号
public void getSDKVersion() { PayTask payTask = new PayTask(this); String version = payTask.getVersion(); Toast.makeText(this, version, Toast.LENGTH_SHORT).show(); }
PayActivity.java文件源码完成
此时支付宝的原生集成已经完成 所有调用全在PayActivity.java中
四.RN与android的通信
1.创建一个类继承ReactContextBaseJavaModule,这个类放入被RN调用的方法封装成有个原生模块
package com.cloudprocessing;import android.content.Context;import android.content.Intent;import android.os.Bundle;import android.widget.Toast;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;/** * Created by on 2017/3/3. */public class MyNativeModule extends ReactContextBaseJavaModule{ private Context mContext; //构造方法 public MyNativeModule(ReactApplicationContext reactContext) { super(reactContext); mContext = reactContext; } @Override public String getName() { //MyNativeModule 需要此名字来调用该类方法 return "MyNativeModule"; } //函数不能有返回值,被调用的原生代码是异步的,原生代码执行结束之后只能通过回调函数发送消息给RN //rnCallNative为RN需要调用的方法 @ReactMethod public void rnCallNative(String msg){ //添加意图 Intent intent = new Intent(mContext,PayActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); //bundle为需要传给PayActivity的加密签名 Bundle bundle = new Bundle(); bundle.putString("key",msg); intent.putExtras(bundle); //startActivity mContext.startActivity(intent,bundle); }}
2.创建一个类实现接口ReactPackage包管理器,把上面一步创建的类添加到原生模块(nativeModule)列表里
package com.cloudprocessing;import com.facebook.react.ReactPackage;import com.facebook.react.bridge.JavaScriptModule;import com.facebook.react.bridge.NativeModule;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.uimanager.ViewManager;import java.util.Collection;import java.util.Collections;import java.util.List;import java.util.ArrayList;/** * Created by on 2017/3/3. */public class MyReactPackge implements ReactPackage{ @Override public ListcreateNativeModules(ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new MyNativeModule(reactContext)); return modules; } @Override public List > createJSModules() { return Collections.emptyList(); } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); }}
3.将第二步中创建的包管理器添加到ReactPackage列表里的getPackges方法 MainApplication中加入new MyReactPackge()
package com.cloudprocessing;import android.app.Application;import android.util.Log;import com.facebook.react.ReactApplication;import com.lwansbrough.RCTCamera.RCTCameraPackage;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import java.util.Arrays;import java.util.List;public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected ListgetPackages() { return Arrays. asList( new MainReactPackage(), new RCTCameraPackage(), new MyReactPackge() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); }}
五.js调用封装的android原生组件
1.引入NativeModules
import { NativeModules} from 'react-native';
2.定义一个view,当点击的时候触发原生事件
this.nativeAndroid()}> 确定
3.点击的nativeAndroid方法,MyNativeModule是安卓原生MyNativeModule文件中的getName返回的名字,rnCallNative是rnCallNative为RN需要调用的方法,下面的触发方法中的this.state.signedString是服务器对支付宝加签返回的签名,也就是客户端调支付宝时用到的orderInfo
nativeAndroid(){ var sign = this.state.signedString if(sign){ NativeModules.MyNativeModule.rnCallNative(sign) } }
到这里RN调用安卓原生支付宝的步骤已全部完成
转载地址:http://hzrni.baihongyu.com/