RN 接入微信支付

参考文档:https://github.com/little-snow-fox/react-native-wechat-lib

1.安装

yarn add react-native-wechat-lib

2.registerApp(appid)注册

app启动后先全局调用一次registerApp方法,进行应用注册

import * as WeChat from 'react-native-wechat-lib';

WeChat.registerApp('appid', 'universalLink');

3.构建设置

Android版(https://github.com/little-snow-fox/react-native-wechat-lib/blob/master/docs/build-setup-android.md

  • 在MainApplication.java添加:
import com.theweflex.react.WeChatPackage;//添加这行

    @Override
    protected List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new ToolkitsPackage());
      packages.add(new JPushPackage(true, true));
      packages.add(new AdPackage()); 
      packages.add(new VodUploadPackage());
      packages.add(new WeChatPackage());//添加这行
      return packages;
    }
  • 在项目>android>app>src>main>java>com>项目名称>wxapi下创建WXEntryActivity.java文件:
package com.dongdianyi.wxapi;//这里的包名一定要写对,不然支付完成后无法返回app

import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;

public class WXEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatModule.handleIntent(getIntent());
    finish();
  }
}
  • 然后将以下节点添加到AndroidManifest.xml:
<activity
 android:name=".wxapi.WXEntryActivity"
 android:label="@string/app_name"
 android:exported="true"
 />

iOS版(https://github.com/little-snow-fox/react-native-wechat-lib/blob/master/docs/build-setup-ios.md)

  • xcode打开项目进入Build Phases> "Link Binary with Libraries" 添加以下库

WebKit.framework

SystemConfiguration.framework

CoreTelephony.framework

libsqlite3.0

libc++

libz

  • 在Info.plist添加:
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>weixin</string>
      <string>wechat</string>
      <string>weixinULAPI</string>
    </array>
    
  • 然后将以下内容复制到AppDelegate.m:
    - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
        return  [WXApi handleOpenURL:url delegate:self];
    }
    
    - (BOOL)application:(UIApplication *)application
      continueUserActivity:(NSUserActivity *)userActivity
      restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable
      restorableObjects))restorationHandler {
      // 触发回调方法
      [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
      return [WXApi handleOpenUniversalLink:userActivity
      delegate:self];
    }
    
  • 将以下内容复制到AppDelegate.h:
    #import <React/RCTBridgeDelegate.h>
    #import <UIKit/UIKit.h>
    #import "WXApi.h"
    
    @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, WXApiDelegate>
    
    @property (nonatomic, strong) UIWindow *window;
    
    @end
    

4.唤起微信支付示例

//唤起微信支付
    const WXpay =  (info) => {
    Wechat.pay({
        partnerId: info.partnerid, //商家向财付通申请的商家ID
        prepayId: info.prepayid,//预付款订单ID
        nonceStr: info.noncestr,//随机串
        timeStamp: info.timestamp,//可持续
        package: info.package,//商家根据财付通文档填写的数据和签名
        sign: info.sign//商家根据微信开放平台文档对数据做的签名
    }).then(rs => {
         //支付成功
    }).catch(e => {
        //支付失败
    });
}

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容