react-native интегрирует оплату WeChat

WeChat Android iOS React Native

В предыдущей статье уже было представленоreact-native интегрирует Alipay, в этой статье рассказывается, как интегрировать WeChat Pay в приложения, основанные на реакции, на основе официальной документации по интеграции, предоставленной WeChat Pay.

введение сцены

Продавцам удобно интегрировать платежную функцию WeChat в мобильное приложение.
Приложение продавца вызывает SDK, предоставленный WeChat, для вызова платежного модуля WeChat, и приложение продавца переходит к WeChat для завершения платежа.
После оплаты вернитесь в приложение продавца и, наконец, отобразите результат платежа.
В настоящее время WeChat Pay поддерживает системы мобильных телефонов: IOS (Apple), Android (Android) и WP (Windows Phone).

Интегрированный SDK

Получить APPID: Продавец находится вОткрытая платформа WeChatПосле подачи заявки на разработку приложения APP открытая платформа WeChat сгенерирует уникальный идентификатор APPID приложения.

Android

  1. Настройки фона
    После того как продавец подаст заявку на разработку приложения на открытой платформе WeChat, открытая платформа WeChat сгенерирует уникальный идентификатор APPID приложения. В связи с необходимостью обеспечения безопасности платежей необходимо привязать имя пакета приложения продавца и подпись приложения на открытой платформе, после чего платеж можно будет инициировать в обычном режиме после настройки. Интерфейс настройки находится в столбце [Центр управления / Изменить приложение / Изменить информацию о разработке] в [Открытая платформа], как показано в красном поле на следующем рисунке.

    Получение подписи приложения можно использовать:Инструмент получения подписи приложений, установите инсталляционный пакет на телефон и введите имя пакета приложения для получения подписи.

    Вот трюк отладки, чтобы изменить подпись приложения на Подпись отладочной версии будет изменена на подпись рабочей среды после завершения оплаты и отладки.

  2. Импорт WeChat SDK, изменениеandroid/app/build.gradleДобавьте следующий код:

    dependencies {
    ......
    compile "com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+"
    ......
}

  3. существуетcom.xx.xxсоздать имя пакетаwxapi,Обратите внимание, что имя пакета здесь должно бытьwxapi, иначе последующие обратные вызовы не будут обрабатываться

  4. Напишите модуль, вcom.xx.xx.wxapiСоздать под пакетомWxpayModule.java, код показан ниже:

    package com.xx.xx.wxapi;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.tencent.mm.opensdk.modelpay.PayReq;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;

class WxpayModule extends ReactContextBaseJavaModule {

  private IWXAPI api;
  static String APP_ID = "";
  static Promise promise = null;

  WxpayModule(ReactApplicationContext reactContext) {
    super(reactContext);
    api = WXAPIFactory.createWXAPI(reactContext, null);
  }

  @Override
  public String getName() {
    return "Wxpay";
  }

  @ReactMethod
  public void registerApp(String APP_ID) { // 向微信注册
    WxpayModule.APP_ID = APP_ID;
    api.registerApp(APP_ID);
  }

  @ReactMethod
  public void pay(final ReadableMap order, Promise promise) {
    WxpayModule.promise = promise;
    PayReq request = new PayReq();
    request.appId = order.getString("appid");
    request.partnerId = order.getString("partnerid");
    request.prepayId= order.getString("prepayid");
    request.packageValue = order.getString("package");
    request.nonceStr= order.getString("noncestr");
    request.timeStamp= order.getInt("timestamp")+"";
    request.sign= order.getString("sign");
    api.sendReq(request);
  }

  @ReactMethod
  public void isSupported(Promise promise) { // 判断是否支持调用微信SDK
    boolean isSupported = api.isWXAppInstalled();
    promise.resolve(isSupported);
  }

}

  5. Написать пакет, вcom.xx.xx.wxapiСоздать под пакетомWxpayPackage.java, код показан ниже:

    package com.xx.xx.wxapi;

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 WxpayPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
          ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new WxpayModule(reactContext));
    return modules;
  }

}

  6. Напишите WXPayEntryActivity для обработки обратного вызова оплаты WeChat, вcom.xx.xx.wxapiСоздать под пакетомWXPayEntryActivity.java,Обратите внимание, что несовместимые имена пакетов или имен классов приведут к сбою обратных вызовов., код показан ниже:

    package com.xx.xx.wxapi;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.tencent.mm.opensdk.constants.ConstantsAPI;
import com.tencent.mm.opensdk.modelbase.BaseReq;
import com.tencent.mm.opensdk.modelbase.BaseResp;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.IWXAPIEventHandler;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;

public class WXPayEntryActivity extends Activity implements IWXAPIEventHandler {
	
    private static final String TAG = "WXPayEntryActivity";
    private IWXAPI api;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    	api = WXAPIFactory.createWXAPI(this, WxpayModule.APP_ID);
        api.handleIntent(getIntent(), this);
    }

	@Override
	protected void onNewIntent(Intent intent) {
		super.onNewIntent(intent);
		setIntent(intent);
        api.handleIntent(intent, this);
	}

	@Override
	public void onReq(BaseReq req) {
	}

	@Override
	public void onResp(BaseResp resp) {
		Log.d(TAG, "onPayFinish, errCode = " + resp.errCode);
		if (resp.getType() == ConstantsAPI.COMMAND_PAY_BY_WX) {
			WritableMap map = Arguments.createMap();
			map.putInt("errCode", resp.errCode);
			WxpayModule.promise.resolve(map);
			finish();
		}
	}
}

  7. Наконец, последнее, что нужно сделать на стороне Android, — это зарегистрировать модуль вcom.xx.xx.MainApplicationЗарегистрируйте модуль в:

    @Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        // ...other packages
        new WxpayPackage() // <-- 注册模块
    );
}

iOS

  1. Проект устанавливает APPID, открывает проект в Xcode и устанавливает URL-схемы в свойствах проекта на ваш APPID. Как показано в красном положении значка:

  2. Добавить микро-канал Whitelist
    info.plist-> Щелкните правой кнопкой мыши ->open as-->source Code-> Добавьте белый список, как показано ниже:
    2017-12-11-14-28-10
    код показывает, как показано ниже:

    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>wechat</string>
        <string>weixin</string>
    </array>
</key>

  3. Импортируйте необходимые файлы библиотеки, как показано ниже:
    2017-12-11-14-30-54

  4. Создайте группу в каталоге проектаWxapiи создатьWxpayMoudleмодуль
  5. Загрузите комплект для разработки (SDK), импортWxapi, наконец, как показано на следующем рисунке:
    2017-12-11-15-05-34

  6. записыватьWxpayModule.hкод показывает, как показано ниже:

    #import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import "WXApiObject.h"
#import "WXApi.h"

@interface WxpayMoudle : NSObject <RCTBridgeModule, WXApiDelegate>
@end

  7. записыватьWxpayModule.mкод показывает, как показано ниже:

    #import "WxpayMoudle.h"

@implementation WxpayMoudle

RCTPromiseResolveBlock resolveBlock = nil;

- (instancetype)init
{
  self = [super init];
  if (self) {
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleWXPay:) name:@"WXPay" object:nil];
  }
  return self;
}

- (void)dealloc
{
  [[NSNotificationCenter defaultCenter] removeObserver:self];
}

- (void)handleWXPay:(NSNotification *)aNotification
{
  NSString * errCode =  [aNotification userInfo][@"errCode"];
  resolveBlock(@{@"errCode": errCode});
}

RCT_EXPORT_METHOD(registerApp:(NSString *)APP_ID){
  [WXApi registerApp: APP_ID];//向微信注册
}

RCT_EXPORT_METHOD(pay:(NSDictionary *)order
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject){
  resolveBlock = resolve;
  //调起微信支付
  PayReq *req = [[PayReq alloc] init];
  req.partnerId = [order objectForKey:@"partnerid"];
  req.prepayId = [order objectForKey:@"prepayid"];
  req.nonceStr = [order objectForKey:@"noncestr"];
  req.timeStamp = [[order objectForKey:@"timestamp"] intValue];
  req.package = [order objectForKey:@"package"];
  req.sign = [order objectForKey:@"sign"];
  [WXApi sendReq:req];
}

RCT_REMAP_METHOD(isSupported, // 判断是否支持调用微信SDK
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject){
  if (![WXApi isWXAppInstalled]) resolve(@NO);
  else resolve(@YES);
}

RCT_EXPORT_MODULE(Wxpay);

@end

  8. Обработка обратного платежа WeChat, вAppDelegate.mДобавьте следующий код в:

    //支付回调9以后
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary*)options {
  return  [WXApi handleOpenURL:url delegate:self];
}
//支付回调9以前
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
  return  [WXApi handleOpenURL:url delegate:self];
}
//ios9以后的方法
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [WXApi handleOpenURL:url delegate:self];
}

#pragma mark - wx callback

- (void) onReq:(BaseReq*)req
{
  // TODO Something
}

- (void)onResp:(BaseResp *)resp
{
  //判断是否是微信支付回调 (注意是PayResp 而不是PayReq)
  if ([resp isKindOfClass:[PayResp class]])
  {
    //发出通知 从微信回调回来之后,发一个通知,让请求支付的页面接收消息,并且展示出来,或者进行一些自定义的展示或者跳转
    NSNotification * notification = [NSNotification notificationWithName:@"WXPay" object:nil userInfo:@{@"errCode":@(resp.errCode)}];
    [[NSNotificationCenter defaultCenter] postNotification:notification];
  }
}

  9. До сих пор интеграция WeChat SDK на iOS была успешной.

React-Native

  1. После изменения нативного кода вам необходимо переупаковать работающую программу:

    react-native run-android # 运行Android端
react-native run-ios # 运行iOS端

  2. записыватьWxpay.jsИнструменты

    import { NativeModules } from 'react-native';
export default NativeModules.Wxpay;

  3. во входном файлеindex.jsЗаявка на регистрацию в WeChat

    import Wxpay from './your/path/to/Wxpay';
Wxpay.registerApp(APPID); //向微信注册

  4. передачаWxpayМодуль инициирует оплату WeChat:

    import Wxpay from './your/path/to/Wxpay';
async pay(params){ // params 为后端提供的参数
    let isSupported = await call(Payway.isSupported);
    if (!isSupported) { // 判断是否支持微信支付
        message.show('找不到微信应用，请安装最新版微信');
        return;
    }
    let res = await call(getOrderInfo, params); // 从后端获取签名对象，参考支付接口调用
    let ret = await call(Wxpay.pay, res.data); // 调起微信客户端，发起支付
    if (ret.errCode === 0) {
        // 支付成功回调
    } else {
        // 支付失败回调
    }
}

  5. Справочник по вызову платежного APIВызов платежного интерфейсаа такжеединый порядок, в этой статье мы не будем вдаваться в подробности.

Справочная документация

Категории