ReactNative接入微信API 接入支付宝支付

最新推荐文章于 2024-06-22 18:55:07 发布
最新推荐文章于 2024-06-22 18:55:07 发布
阅读量1w 收藏 4
点赞数 2
分类专栏： 【React-Native2点滴知识 】

写在前面

上一篇简单地讲了 ReactNative 如何接入支付宝支付，那么这一篇就介绍如何接入微信API吧。我们实际用到的一般有微信登录、微信分享、微信支付这三个功能。

准备工作

微信的东西比较支付宝申请起来要略微麻烦点，步骤多，而且有些资质认证要给微信钱，心太黑。废话不多说，登录微信开放平台，创建你的App应用，改填的都填了，提交 —— 审核1～2天 —— 通过 —— 申请微信支付 —— 继续审核 … MD这步一次性通过是有多难 !

商户平台

微信支付申请通过了会收到一份邮件，里面有你的微信支付商户账号的信息（记得保存），然后用这个账号和密码登录微信商户平台。这里关键的一步是：

进入 账户中心 —> API安全 —> 设置一个32位的密钥

具体实现

准备工作都做好了，我们就可以开始开发了。

安装模块

感谢大react-native社区，为我们这种菜鸟提供了如此全面的微信三方模块react-native-wechat，完全能满足现阶段的所有微信API需求啊！

支持npm安装：

npm install react-native-wechat --save 
 
 
  • 1

让 ReactNative完全支持ES7

async和await是ES7比较新的提案，让ReactNative完全支持stage-0，首先我们需要安装 babel-preset-react-native-stage-0 模块:

npm install babel-preset-react-native-stage-0 --save-dev 
 
 
  • 1

并设置 .babelrc

{
  "presets": [ "react-native-stage-0" ],
}
 
 
  • 1
  • 2
  • 3

link和配置

上一篇已经介绍了 react-native link 命令，可以把客户端所需的模块链接到IOS和Android目录里。

react-native link react-native-wechat 
 
 
  • 1

当然，只执行上面的命令还不够。我们还需要手动添加一些配置

IOS端

微信的配置和支付宝差别不大。

（1）添加下面几个framework和library：

SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
 
 
  • 1
  • 2
  • 3
  • 4
  • 5

xcode截图

注意：CoreTelephony.framework、libc++z、libz，这三项和支付宝模块的重复，引一次就够了。

（2）添加 URL Schema ，值是你应用的微信appid

xcode截图

（3）给 LSApplicationQueriesSchemes 添加三个值 alipay、weixin、wechat

Xcode截图

或者直接编辑 Info.plist：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>alipay</string>
    <string>weixin</string>
    <string>wechat</string>
</array>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意：如果你不需要支付宝支付， alipay 可以不加

（4）修改 AppDelegate.m

如果你不需要支付宝支付，这个函数可以这么写：

#import "../Libraries/LinkingIOS/RCTLinkingManager.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

如果你既要支付宝支付，也需要微信支付。那么应该这么写：

#import "../Libraries/LinkingIOS/RCTLinkingManager.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  if([[sourceApplication substringToIndex:10] isEqualToString:@"com.alipay"]){
    [AlipayModule handleCallback:url];
  }
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Android端

（1） 修改android/settings.gradle

include ':RCTWeChat'
project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
 
 
  • 1
  • 2

（2）修改android/app/build.gradle

dependencies {
  compile project(':RCTWeChat')    // Add this line only.
}
 
 
  • 1
  • 2
  • 3

（3）修改MainActivity.java or MainApplication.java

import com.theweflex.react.WeChatPackage;       // Add this line before public class MainActivity
...

/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(), 
    new WeChatPackage()        // Add this line
  );
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

（4）创建一个新的package 取名wxapi ，在里面创建class 取名WXEntryActivity

package your.package.wxapi;

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();
  }
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

（5）修改AndroidManifest.xml

<manifest>
  <application>
    <!-- 微信Activity -->
    <activity
      android:name=".wxapi.WXEntryActivity"
      android:label="@string/app_name"
      android:exported="true"
      />
  </application>
</manifest>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

（6）修改 proguard-rules.pro

-keep class com.tencent.mm.sdk.** {
   *;
}
 
 
  • 1
  • 2
  • 3

初始化模块

react-native-wechat 使用前必须初始化一次（有且仅一次）。建议放在项目的入口文件里：

// ...省略
componentDidMount() {
  WeChat.registerApp('你的appid')
}
 
 
  • 1
  • 2
  • 3
  • 4

微信登录

微信登录需要用到的是 WeChat.sendAuthRequest 这个方法。

获取微信CODE

首先介绍一下它参数：

  • scope (必需) 应用授权作用域，如获取用户个人信息则填写 snsapi_userinfo
  • state (非必需) 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

执行 WeChat.sendAuthRequest获取CODE：

let code = await WeChat.sendAuthRequest("snsapi_userinfo", "123");
 
 
  • 1

微信授权

该方法会返回一个字符串，类似 0114sg4t1F1Rc90jSw6t1Cf44t14sg4- 一串CODE。

获取微信access_token

包装一个 GET类型的fetch请求，URL如下：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
 
 
  • 1

这个接口会返回 access_token 和 用户的 openid。示例如下：

{
  "access_token": "JWk5IxV5bFGOdTm2A4zhuGuIB_xGRM5cPbU5nYbkuEihHu6FClMn5zjVZ6QCTYrMv_oCMxW8szuNAOadYIYo6wiOObeesEeNgHeWNvkJolQ",
  "expires_in": 7200,
  "refresh_token": "WPhskoRBAmDyM1EbrPRvWSCU8LL3Ndn0Brong9ZG434L1Imkxugu2JKOghfIuP1P3JqcCyB2anxAwXRuFr7EMxP_rygeWy1Noi0zPJue_YU",
  "openid": "oDwRbw9zFEO36l3Vcq6bHXFWB13k",
  "scope": "snsapi_userinfo",
  "unionid": "o3KCIw-vFiuq0SBHe-3bhjbCQY3o"
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

获取微信授权后的用户信息

包装一个 GET类型的fetch请求，URL如下：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
 
 
  • 1

这个接口会返回 授权用户的微信基本信息，示例如下：

{
  "openid": "oDwRbw9zFEO36l3Vcq6bHXFWB13k",
  "nickname": "思^_^诚",
  "sex": 1,
  "language": "zh_CN",
  "city": "Hangzhou",
  "province": "Zhejiang",
  "country": "CN",
  "headimgurl": "http://wx.qlogo.cn/mmopen/PiajxSqBRaEKujUoq5z4PScxKqQESxMxj6VDYnIHT4ZibVDMmSb69dq6EbLPAUJ15mMH9pIxFNu9JZszyx1F6ibcw/0",
  "privilege": [],
  "unionid": "o3KCIw-vFiuq0SBHe-3bhjbCQY3o"
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

微信分享

微信分享用到的是 WeChat.shareToTimeline(opt)(分享到朋友圈) 和 WeChat.shareToSession(opt)（分享给微信好友或微信群)，这两个方法的入参是一样的。

为了方便，微信分享我做成了一个react-native组件, 感兴趣的可以点击看看 github地址

入参列表

  • thumbImage 分享出去的预览图
  • title 分享标题
  • webpageUrl 分享出去的网页地址

核心代码

/**
 * [分享到朋友圈]
 * @param  {[Object]} opt 入参对象 
 * @example { thumbImage:'', title: '', webpageUrl: '' }
 */
async handleShareWeixinCircle(opt) {
  this.lock = true  /* 异步操作锁 */
  try {
    let result = await WeChat.shareToTimeline({
      type: "news",
      ...opt,
     });
  } catch (e) {
    console.error(e)
  } finally {
    this.lock = false
    this.close()
  }
}

/**
 * [分享给微信好友或微信群]
 * @param  {[Object]} opt 入参对象 
 * @example { thumbImage:'', title: '', webpageUrl: '' }
 */
async handleShareWeixinFriend(opt) {
  this.lock = true  /* 异步操作锁 */
  try {
    let result = await WeChat.shareToSession({
      type: "news",
      ...opt,
    });
  } catch (e) {
    console.error(e)
  } finally {
    this.lock = false
    this.close()
  }
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

我这里用到的是分享网页，更多分享功能参见 react-native-wechat

微信支付

微信支付用到的是 WeChat.pay(opt) 方法

后端的工作

后端需要为我们提供一个支付接口 去调取微信支付的 “统一下单” 接口，然后返回下面这些东西： 点击查看官方文档

{
  appid: '',  //应用id
  partnerid: '', // 商家向财付通申请的商家id
  prepayid: '', // 预支付订单
  noncestr: '', // 随机串，防重发
  timestamp: '', // 时间戳，防重发
  package: '', // 商家根据财付通文档填写的数据和签名
  sign: '' // 商家根据微信开放平台文档对数据做的签名
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

注意：后端要严格区分大小写，这几个变量必须都小写。否则会报 “支付签名验证失败” 这类的错误

前端的工作

有了react-native-wechat，微信支付其实也就调用一个方法的事情。类似支付宝支付的action，下面是最原始的实现代码（建议把fetch封装一下）。

export function weixinPay(opt) {
  return (dispatch) => {
    const uri = `http://${CONFIG.API_URI}/wx/pay`;  /*支付接口*/
    const headers = {
      ...CONFIG.HEADERS,
      'Authorization': opt.token,
    };
    /*发起支付请求*/
    fetch(uri, { method: 'POST', headers: headers, body: JSON.stringify(opt.body)})
      .then((response) => {
        if (response.status === 200) {
          return response.json()
        } else {
          return {code: response.status}
        }
      })
      .then((data) => {
        if (String(data.code) == '0') {
          /*打开微信进行支付*/ 
          pay(data.result, opt.success, opt.fail)
        } else {
          /*预支付失败的后续操作*/
          opt.error && opt.error(data.error.message)
        }
     })
  }
}

async function pay(res, success, fail) {
  try {
    let result = await WeChat.pay({
      partnerId: res.partnerid,  /*商家向财付通申请的商家id*/
      prepayId: res.prepayid,    /*预支付订单*/
      nonceStr: res.noncestr,    /*随机串，防重发*/
      timeStamp: res.timestamp,  /*时间戳，防重发*/
      package: res.package,      /*商家根据财付通文档填写的数据和签名*/
      sign: res.sign,            /*商家根据微信开放平台文档对数据做的签名*/
    });
    /*支付成功的后续操作*/
    success && success()
  } catch (error) {
    /*支付失败的后续操作*/
    fail && fail( error ===-2 ? "用户取消" : "订单支付失败")
  }
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

写在前面

重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下去开发了。

支付宝支付

接入支付宝支付前建议先查看 支付宝官方文档，先按照要求创建应用并完成配置。不过要注意以下两点：

第一，App支付不能在沙箱做测试，所以我们需要先 “上线” 应用，这个过程会有1天的审核时间。 
第二，调试时建议添加个一分钱的商品作为测试商品，开发免不了要支付几次。

安装模块

支付宝支付我们使用了ReactNative社区推荐的 react-native-yunpeng-alipay 模块，可以使用 npm 安装

npm install react-native-yunpeng-alipay --save 
 
 
  • 1

link引用

最新版 React Native (>=0.31) 已经支持 link 命令，不需要再使用三方的 rnpm来 link 引用了。

react-native link react-native-yunpeng-alipay
 
 
  • 1

这个操作会把 react-native-yunpeng-alipay 模块下的客户端模块自动映射到 ReactNative工程的对应的 IOS和 Android目录里。 注意，自动link并不是万能的，有些模块我们需要再手动添加一些引用。

IOS端配置

对于IOS端，除了上面的link操作之外，我们还需要手动做下面的三件事：

添加Frameworks和Libraries

打开xcode，TARGET -> General -> Linked Frameworks and Libraries ，添加

  • CoreMotion.framework
  • CoreTelephony.framework
  • libc++
  • libz

xcode截图

添加 URL Schema

打开 Info.plist，添加一项URL types：

URL types

触发回调

打开 AppDelegate.m，添加一个函数来触发支付完成后的回调

#import "AlipayModule.h"
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  [AlipayModule handleCallback:url];
  return YES;
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Android端配置

Android端配置比较简单，除了上面的link操作外，我们还需要修改Manifest文件

修改Manifest

在商户应用工程的AndroidManifest.xml文件里面添加声明：

<activity
  android:name="com.alipay.sdk.app.H5PayActivity"
  android:configChanges="orientation|keyboardHidden|navigation"
  android:exported="false"
  android:screenOrientation="behind" >
</activity>
<activity
  android:name="com.alipay.sdk.auth.AuthActivity"
  android:configChanges="orientation|keyboardHidden|navigation"
  android:exported="false"
  android:screenOrientation="behind" >
 </activity>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

和权限声明：

<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" />
 
 
  • 1
  • 2
  • 3
  • 4
  • 5

添加混淆规则

在商户应用工程的proguard-project.txt里添加以下相关规则：

-libraryjars libs/alipaySDK-20150602.jar

-keep class com.alipay.android.app.IAlixPay{*;}
-keep class com.alipay.android.app.IAlixPay$Stub{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
-keep class com.alipay.sdk.app.PayTask{ public *;}
-keep class com.alipay.sdk.app.AuthTask{ public *;}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Action封装

我们的App开发采用的是redux框架，为了方便使用，我把支付宝支付封装成了Action，你可以参考一下。

/**
 * @desc 三方支付
 * @author Jafeney
 * @detetime 2016-11-08
 **/

import Alipay from 'react-native-yunpeng-alipay'
import * as CONFIG from '../config'

export function alipay(opt) {
  return (dispatch) => {
    const uri = `http://${ CONFIG.API_URI }/alipay/pay`;  /*支付接口*/
    const headers = {
      ...CONFIG.HEADERS,
      Authorization: opt.token
    };
    /*调用支付接口*/
    fetch(uri, {method: 'POST', headers: headers, body: JSON.stringify(opt.body)})
      .then((response) => {
        if (response.status === 200) {
          return response.json()
        } else {
          return {code: response.status}
        }
      })
      .then((data) => {
        if (String(data.code) == '0') {
          /*打开支付宝进行支付*/
          Alipay.pay(data.result).then((data) => {
            if (data.length && data[0].resultStatus) {
              /*处理支付结果*/
              switch (data[0].resultStatus) {
                 case "9000":
                   opt.success && opt.success(data)
                   break;
                 case "8000":
                   opt.fail && opt.fail('支付结果未知,请查询订单状态')
                   break;
                 case "4000":
                   opt.fail && opt.fail('订单支付失败')
                   break;
                 case "5000":
                   opt.fail && opt.fail('重复请求')
                   break;
                 case "6001":
                   opt.fail && opt.fail('用户中途取消')
                   break;
                 case "6002":
                   opt.fail && opt.fail('网络连接出错')
                   break;
                 case "6004":
                   opt.fail && opt.fail('支付结果未知,请查询订单状态')
                   break;
                 default:
                   opt.fail && opt.fail('其他失败原因')
                   break;
               }
             } else {
               opt.fail && opt.fail('其他失败原因')
             }
           }, (err) => {
             opt.fail && opt.fail('支付失败，请重新支付')
           }
         )
       } else {
         opt.error && opt.error('支付参数错误')
       }
    })
  }
}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

@欢迎关注我的 github 和 个人博客 －Jafeney



barnett_y
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于reactnativewechat实现的微信登录
08-11
基于react-native-wechat 实现的微信登录.只需 CV 大法就可以.(只发现教程,没有发现现成 demo 所以我就简单搞了一下按照网上的教程写的 demo)
LiboMall.zip
05-10
对于微信、支付宝和百度小程序，项目可能使用了各自的开发工具和API，以便于接入这些平台的特定功能和服务。 在构建过程中，HbuilderX扮演了重要角色。这是一款集成了编辑、预览、调试和打包等多种功能的全链路开发...
ReactNative接入微信API
大灰狼的小绵羊哥哥的博客
02-11 2009
写在前面http://blog.csdn.net/u011413061/article/details/53196401 上一篇简单地讲了 ReactNative 如何接入支付宝支付，那么这一篇就介绍如何接入微信API吧。我们实际用到的一般有微信登录、微信分享、微信支付这三个功能。 准备工作 微信的东西比较支付宝申请起来要略微麻烦点，步骤多，而且有些资质认证要给微信钱，心太黑。废
flutter 支付宝APP支付 （包含后台）
最新发布
2401_85730279的博客
06-22 822
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取。
WIN7和WIN10微信多开
zou_albert的博客
12-15 1107
本人就很需要同时登陆个人微信和工作微信。个人认为，大家在使用时不要太过分就都OK，下面的方法，至于能有效多久，随缘吧。 注意：这个方法，可以开无限个微信，WIN7和WIN10都可以使用 简单记录一下：使用批处理的Start命令搞定 1 找到你微信的安装主目录，比如我是E:\WeChat\WeChat.exe 2 桌面上新建.txt记事本文件 3 打开这个txt文件，复制下面的代码进去 TASKKILL /F /IM wechat.exe start "" "E:\WeChat\WeChat.exe" st
react-native支付宝，微信支付对接接口
hahahhahahahha123456的博客
07-10 1233
demo如下：import React, { Component } from 'react'; import { StyleSheet, Text, TouchableOpacity, View ,TouchableHighlight} from 'react-native'; import GiftedListView from 'react-native-gifted-listview'; ...
react-native实现微信分享和微信支付（安卓端）
juxiaoyu的博客
04-06 5703
1、注册应用（微信开放平台
汽车销售商城App经销加盟分享下单购买提取
08-10
对于支付环节，通常会接入第三方支付服务如支付宝、微信支付，JavaScript处理调用这些服务的SDK，完成用户支付验证和交易处理。 最后，提取功能可能指的是数据提取或收益提取。前者可能涉及到数据分析，JavaScript...
订餐app.zip
04-07
订餐APP中的支付功能是关键，通常会接入支付宝、微信支付等第三方支付平台。开发者需要熟悉OAuth2.0等授权协议，实现安全的支付流程，并处理可能出现的支付异常情况。 五、地图服务 为了实现精确的餐厅定位和导航...
2021032801_保险营销App设计与实现.rar
02-13
9. **支付集成**：接入第三方支付平台如支付宝、微信支付，实现在线支付功能，需处理支付状态的同步与异步通知。 10. **推送服务**：集成极光推送或Firebase Cloud Messaging等服务，实现实时消息推送，如保险产品...
springboot项目研发3和4是一套
11-12
3. **支付功能**：系统集成了支付功能，可能包括支付宝、微信支付等主流支付渠道的接口，允许用户方便快捷地完成在线交易。这涉及到安全的支付网关集成、支付状态回调处理和异常情况的妥善处理。 4. **短信接口**：...
react-native-puti-pay：基于React Native的微信支付，支付宝支付插件
02-04
React本机支付 入门 $ npm install react-native-puti-pay --save //or $ yarn add react-native-puti-pay 大多是自动安装 //react-native version > 0.60+ $ cd ios && pod install //or $ react-native link react-native-puti-pay 手动安装 的iOS 在XCode的项目导航器中，右键单击“ Libraries ➜ Add Files to [your project's name] 转到node_modules re
react native 实现登录和仿微信Tab界面（）
06-05
该实例通过react native 框架，通过navigation实现登录、仿微信tab界面。
javascript使用call调用微信API
10-25
主要介绍了javascript使用call调用微信API,需要的朋友可以参考下
react-native唤起支付宝和微信支付方法
RuGal_的博客
11-25 1042
react-native唤起支付宝和微信支付方法 import { Dimensions, Platform, NativeModules } from "react-native"; const { PayHelperModule } = NativeModules; const isAndroid = () => { return Platform.OS === 'android'; }; const isIOS = () => { return Platform.OS ===
React Native集成微信支付分享登录（2020版）
Synaric的专栏
08-07 2020
RN想要集成微信SDK，自己写肯定是花时间的，问题是github上开源库良莠不齐，相关开源库我用过的有： react-native-wechat react-native-wx eact-native-wechat-lib 经过无数采坑，前两个由于已经停止维护，SDK也比较久远了，会有各种各样的坑，无法保证Android和iOS都没问题，一怒之下换了。第三个较新，并且支持跳转小程序等较新的API，推荐给各位。 ...
ReactNative接入支付宝支付
大灰狼的小绵羊哥哥的博客
03-30 4364
写在前面 重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下去开发了。http://jafeney.com/ 支付宝支付 接入支付宝支付前建议先查看 支付宝官方文档，先按照要求创建应用并完成配置。不过要注意以下两点： 第一，App支付不能在沙
react.js接入支付宝支付
jghjh56564的博客
01-11 535
这里的data.data.form 是服务端返回的form表单 setAttribute('target', '_self');tartget 设置为self,是为了兼容 safari浏览器 以及其他兼容问题。这个展示可能不太友好, 可以根据业务需求展示成弹框也可以 , 手机网站支付一般都展示第一种方式。电脑网站支付/手机网站支付。前端展示的方式分为两种。
PaysApi第三方支付接口的接入与使用 React前端SSM后端
qq_33683097的博客
08-07 8823
本文实现涉及实现思路以及预期结果  前端React 后端SSM 支付接口PaysApi以及阿里云 正式开始 对比了很多第三方支付接口，选到paysapi也是因为它捕获信息的能力经过测试后还不错，官方接口文档说明的非常清楚 ，所以选用，这个demo前端是用react写的，顺便锻炼下react的使用，后端就是常规的ssm，想要测试必须介入公网，支付接口回调才能通知到你的服务器保存支付信息。 先...
获取API KEYs后怎么接入QQ
05-17
要将API KEY接入QQ，你需要使用QQ机器人框架，比如QQBot、SmartQQBot等。这些框架提供了与QQ通信的API，并且可以与第三方服务（如聊天机器人API）进行集成。 一般来说，你需要在QQBot或SmartQQBot中编写一个插件，来调用聊天机器人API并返回结果给用户。具体实现方式可以参考框架的文档和示例代码。 另外，你还需要在QQ中添加机器人为好友，并将其设置为管理员或者群主，以便机器人能够接收和发送消息。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值