关于react native 接入支付宝、支付宝沙箱

1、完成对支付宝的申请这都不多说了 根据教程来就可以
附上支付宝文档https://opendocs.alipay.com/support/01razc
2、在react native 项目下android/app/build.graddle中添加代码

dependencies {
    compile fileTree(dir: "libs", include: ["*.aar"]) // 若有这一行,则自动将libs下的所有jar包引入
    compile files('libs/alipaysdk-15.8.06.211122170115.aar') //集成支付宝sdk添加这一行```
   }

3、在android/app/目录下新建libs目录 存放从支付宝下载的sdk (alipaysdk-15.8.06.211122170115.aar)
附上连接 https://opendocs.alipay.com/open/02no45 可能以后会变 这个名字要跟第二步中的名字相同
4、在android/app/src/main/androidManifest.xml 中添加一下配置

<!-- 支付宝权限声明 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- 支付宝 activity 声明 -->(用了aar 就没必要添加了)
<activity
    android:name="com.alipay.sdk.app.H5PayActivity"
    android:configChanges="orientation|keyboardHidden|navigation|screenSize"
    android:exported="false"
    android:screenOrientation="behind"
    android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
<activity
    android:name="com.alipay.sdk.app.H5AuthActivity"
    android:configChanges="orientation|keyboardHidden|navigation"
    android:exported="false"
    android:screenOrientation="behind"
    android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>

5、修改android/build.gradle 下的gradle 的版本为4.0.1
6、修改android/gradle/wrapper/gradle-wrapper.properties下的distributionUrl 为gradle-6.2-all.zip版本
--------接下来进入我们java 部分-------
7、创建zhifubao包 在包下面创建ZhifubaoModule.java

package com.xxx.alipay; // 注意这里com.xxx要修改成你的包名
import com.alipay.sdk.app.PayTask;
import com.facebook.react.bridge.Arguments;
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.WritableMap;
import java.util.Map;
public class ZhifubaoModule extends ReactContextBaseJavaModule {
 public AlipayModule(ReactApplicationContext reactContext) {
   super(reactContext);
 }
 @Override
 public String getName() {
   return "Alipay";
 }
 @ReactMethod
 public void pay(final String orderInfo, final Promise promise) {
 //EnvUtils.EnvEnum.SANDBOX  设置为沙箱
 EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
   Runnable payRunnable = new Runnable() {
     @Override
     public void run() {
       WritableMap map = Arguments.createMap();
       PayTask alipay = new PayTask(getCurrentActivity());
       Map<String, String> result = alipay.payV2(orderInfo,true);
       for (Map.Entry<String, String> entry: result.entrySet())
         map.putString(entry.getKey(), entry.getValue());
       promise.resolve(map);
     }
   };
   // 必须异步调用
   Thread payThread = new Thread(payRunnable);
   payThread.start();
 }
}

注意 是不是用沙箱就在这第7步
8、在同包下创建ZhifubaoPackage

package cn.*.alipay; //注意这里要修改你自己的包名
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 ZhifubaoPackage 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 AlipayModule(reactContext));
    return modules;
  }
}

9、
在react native 项目中创建 引入x.js

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

10、使用
”参数“ 服务端传递的

let ret = await Alipay.pay("参数")

至此完美结束

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将React应用程序接入支付宝沙箱,您需要完成以下步骤: 1. 首先,按照支付宝提供的文档完成支付宝的申请。您可以参考支付宝官方文档:https://opendocs.alipay.com/support/01razc。 2. 在您的React Native项目的`android/app/build.gradle`文件中添加以下代码: ```groovy dependencies { // 其他依赖项... compile fileTree(dir: "libs", include: ["*.aar"]) compile files('libs/alipaysdk-15.8.06.211122170115.aar') } ``` 3. 创建一个名为`ZhifubaoPackage`的类,该类实现了`ReactPackage`接口,***```java 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 ZhifubaoPackage 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 AlipayModule(reactContext)); return modules; } } ``` 4. 在您的React Native应用的主`MainApplication.java`文件中注册`ZhifubaoPackage`。您可以在`getPackages()`方法中添加以下代码: ```java @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); packages.add(new ZhifubaoPackage()); // 添加这一行 return packages; } ``` 5. 接下来,您需要创建一个名为`AlipayModule`的模块类,该类继承自`ReactContextBaseJavaModule`。您可以在这个模块类中实现与支付宝相关的功能。根据您的需求,您可以添加支付、查询订单等相关方法。 完成以上步骤后,您的React Native应用就已成功接入支付宝沙箱。请根据您的具体需求进一步实现相关功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值