iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React Native集成支付宝支付的实现方法
  • 152
分享到

React Native集成支付宝支付的实现方法

2024-04-02 19:04:59 152人浏览 薄情痞子
摘要

在RN应用开发过程中,集成支付宝和微信支付除了直接使用第三方的插件之,比如:React-native-yunpeng-alipay,我们还可以借助RN提供的NativeModules

在RN应用开发过程中,集成支付宝和微信支付除了直接使用第三方的插件之,比如:React-native-yunpeng-alipay,我们还可以借助RN提供的NativeModules调用原生模块来实现支付。NativeModules是js代码调用原生模块的桥梁。所以,我们只需要在原生工程中集成支付宝和微信支付的sdk,然后使用NativeModules调用即可。

首先,我们去支付宝官网下载支付宝SDK,下载对应的Android版本。

然后,将aar文件放入android/app/libs 文件夹下面,没有的话可以新建一个。

然后,参考原生Android依赖aar包的方式,在android/app/build.gradle文件的dependencies 节点里面添加如下依赖代码。

implementation fileTree(dir:"libs",include: ["*.jar","*.aar"])

上面的代码会自动将libs目录下的jar和aar添加到工程依赖环境中。接着,在android/app/src/main/AndroidMainifest.xml中添加以下必要权限。

<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.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

如果要让JS能够调用原生的代码,还需要封装JavaModul和ReactPackage。首先,在android/app/src/main/java/com.xxx下面创建alipay文件包,然后,在alipay文件下新建PayModule.javaPayPackage.java

PayModule.java代码如下:

package com.cgv.alipay;

public class PayModule extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;
    public PayModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }
    @Override
    public String getName() {
        return "PayModule";
    @ReactMethod
    public void setAlipayScheme(String scheme){
    public void setAlipaySandbox(Boolean isSandbox) {
        if (isSandbox) {
            EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
        } else {
            EnvUtils.setEnv(EnvUtils.EnvEnum.ONLINE);
        }
    public void alipay(final String orderInfo, final Callback promise) {
        Runnable payRunnable = new Runnable() {
            @Override
            public void run() {
                PayTask alipay = new PayTask(getCurrentActivity());
                Map<String, String> result = alipay.payV2(orderInfo, true);
                WritableMap map = Arguments.createMap();
                map.putString("memo", result.get("memo"));
                map.putString("result", result.get("result"));
                map.putString("resultStatus", result.get("resultStatus"));
                promise.invoke(map);
            }
        };
        // 异步调用
        Thread payThread = new Thread(payRunnable);
        payThread.start();
}

PayPackage.java的代码如下:

package com.cgv.alipay;

public class PayPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new PayModule(reactContext));
        return modules;
    }
    
    // @override
    public List<Class<? extends javascriptModule>> createJSModules() {
        return Collections.emptyList();
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
}

接下来,在MainApplication.java中的getPackages()方法注册上面的模块即可。

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
           packages.add(new PayPackage());
   
          return packages;
        protected String getJSMainModuleName() {
          return "index";
      };
 
    ...//省略其他代码
}

接下来,我们只需要在React Native中使用NativeModules调用Android唤起支付即可。首先,导出PayModule。

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

然后,在需要支付的地方调用使用ReactMethod注解的方法即可,如下所示。

import PayModule from './Alipay';
 
const aliPayAction = async payStr => {
    PayModule.alipay(payStr, res => {
        const { resultStatus } = res;
        const resObj = {
            '6001': '支付取消',
            '6002': '网络连接出错',
            '4000': '支付失败',
            '5000': '重复请求'
        };
        if (resultStatus === '9000') {
            // 支付成功处理
            ....
        } else {
            // 支付失败处理
            .......
        }
    });
};

对于iOS来说,集成支付宝支付也可以参考这种方式来实现。

到此这篇关于React Native集成支付宝支付的文章就介绍到这了,更多相关React Native支付宝支付内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: React Native集成支付宝支付的实现方法

本文链接: https://www.lsjlt.com/news/139675.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React Native集成支付宝支付的实现方法
    在RN应用开发过程中,集成支付宝和微信支付除了直接使用第三方的插件之,比如:react-native-yunpeng-alipay,我们还可以借助RN提供的NativeModules...
    99+
    2024-04-02
  • SpringBoot集成支付宝沙箱支付的实现示例
    目录开发前准备1、密钥工具2、沙箱环境3、内网穿透工具代码集成1、Java SDK2、支付宝配置3、支付和回调接口4、前端Vue调用开发前准备 1、密钥工具 在线工具地址:https...
    99+
    2024-04-02
  • Android集成支付宝支付功能示例
    公司项目中需要支付功能,现在支付宝、微信支付很方便,也很多人使用,因此,他们是首选。在此记录一下支付宝集成过程,下期为微信支付,敬请期待首先去支付宝官网下载其最新的Android的SDK集成Dmeo支付宝 选择SDK&Dmeo进行下...
    99+
    2023-05-30
    android 支付宝 支付
  • Golang实现支付宝沙箱支付的方法步骤
    首先我使用的是 gin 作为我的后端框架,我们先设定好几个接口。 func main() { r := gin.Default() r.GET("/pay", too...
    99+
    2023-05-16
    Golang 支付宝沙箱支付 Golang 支付宝支付
  • PHP实现微信支付流程(Native支付)
    最近项目需要做微信支付的功能,想着把流程以及遇到的坑记录下来 1.到微信商户平台中去开通Native支付(产品中心-Native支付-申请开通) 2.微信商户平台中下载证书以及设置api密钥(账户中心-api安全),查看指引中很详细的说...
    99+
    2023-08-31
    php 微信 Powered by 金山文档
  • 如何用php实现支付宝支付
    这篇文章主要讲解了“如何用php实现支付宝支付”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用php实现支付宝支付”吧!用php实现支付宝支付的方法:1、扫码登录支付宝开放平台注册;2、...
    99+
    2023-06-21
  • vue项目中的支付功能实现(微信支付和支付宝支付)
    目录项目中常见的支付方式    支付宝支付微信支付项目中常见的支付方式     支付宝支付  &nbs...
    99+
    2024-04-02
  • PHP学习笔记:支付宝与微信支付集成
    导言:随着移动支付的普及和用户需求的增加,支付宝和微信支付成为了最常见的在线支付方式。在开发网上商城、在线支付平台等项目时,支付宝和微信支付的集成是必不可少的一部分。本文将重点介绍如何使用PHP语言集成支付宝和微信支付,并提供具体的代码示例...
    99+
    2023-10-21
    PHP 微信支付 支付宝
  • java实现支付宝支付接口的调用
    目录1.准备工作2.获取Demo (JAVA版)3.导入本地运行测试1.准备工作 第一步就是先要注册一个支付宝的账号(注册这里不说,不是重点),然后登入官方首页,去到应用列表里面找到...
    99+
    2024-04-02
  • Vue如何实现支付宝支付功能
    这篇文章主要介绍了Vue如何实现支付宝支付功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。先给大家上个效果图: <div&...
    99+
    2024-04-02
  • uniapp如何实现支付宝支付的功能
    随着移动互联网的飞速发展,人们越来越依赖于手机支付。而支付宝是其中使用最广泛的支付方式之一。在移动应用中,如果要进行支付宝支付的功能开发,那么使用uniapp框架就是一个非常好的选择。本文将介绍uniapp如何实现支付宝支付的功能。一、准备...
    99+
    2023-05-14
  • 如何在PHP中实现支付宝支付
    随着电子商务的不断发展,各种在线支付方式也在不断涌现。支付宝作为国内普及度最高的支付方式之一,已经成为很多电商企业不可或缺的一部分。本文将介绍如何在PHP中实现支付宝支付的功能。一、注册支付宝开发平台账号在开始之前,我们需要注册一个支付宝开...
    99+
    2023-05-20
    PHP 实现 支付宝支付
  • C#实现支付宝沙箱支付的项目实践
    目录一,准备沙箱环境二,认识官方提供的Demo示例三,编写一个ASP.NET的程序四,开始测试一,准备沙箱环境 1,登录支付宝,进入 应用列表界面 https://openhome....
    99+
    2024-04-02
  • 如何进行vue项目中的支付功能实现(微信支付和支付宝支付)
    如何进行vue项目中的支付功能实现(微信支付和支付宝支付),针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。项目中常见的支付方式    支付宝支付...
    99+
    2023-06-22
  • SpringBoot实现简易支付宝网页支付功能
           该文章描述了一个基于SpringBoot程序的支付宝支付demo,由于是个人开发者而非企业,因此设...
    99+
    2024-04-02
  • java对接支付宝支付项目怎么实现
    本篇内容主要讲解“java对接支付宝支付项目怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“java对接支付宝支付项目怎么实现”吧!java对接支付宝支付演示现在有不少的项目都需要对接支付...
    99+
    2023-07-02
  • Android实现支付宝支付密码输入界面
    本文实例为大家分享了Android实现支付宝支付密码输入界面的具体代码,供大家参考,具体内容如下 效果图: 主要代码: import java.util.ArrayList;   ...
    99+
    2024-04-02
  • UniApp + SpringBoot 实现支付宝支付和退款功能
    目录开发准备支付宝支付开发后端部分前端部分支付宝退款开发后端部分上篇介绍了UniApp + SpringBoot 实现微信支付和退款功能,喜欢的朋友可以点击查看。 开发准备 一台用于...
    99+
    2024-04-02
  • Android中怎么接入支付宝实现支付功能
    本篇文章为大家展示了Android中怎么接入支付宝实现支付功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1.登录官网他的官网就是蚂蚁金服的开放平台了,我们可以访问 蚂蚁金服开放平台 ,并且注册账...
    99+
    2023-05-31
    android
  • Vue+SpringBoot实现支付宝沙箱支付的示例代码
    首先去下载支付宝沙箱的一系列东西,具体的配置什么的我就不说了,有很多博客都讲了,还有蚂蚁金服官方也说的很详细,我就直接说怎么样把后端的支付页面显示到Vue前端来: 在你配置好Ali...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作