ReactNative-IOS-支付篇-支付宝

最新推荐文章于 2021-05-26 06:19:46 发布
最新推荐文章于 2021-05-26 06:19:46 发布
阅读量970 收藏 1
点赞数
分类专栏： React-Native-IOS 文章标签： RN支付宝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws_752958369/article/details/80319047
版权
本文是针对React Native开发者的iOS支付宝集成教程，适合有一定原生iOS开发基础的读者。主要内容包括通过npm安装react-native-yunpeng-alipay库，添加库依赖，配置URL Scheme，修改AppDelegate.m文件以处理支付宝回调，以及前端调用支付组件的示例代码。
摘要由CSDN通过智能技术生成

  作者也是个菜鸟，自学自用，如果有什么问题，请在下方留言。废话不多说，马上开启我们得旅途征程。下面是IOS版配置步骤，看这个之前得有一些IOS原生开发基础。

1.下载安装第三方库

  这里借助于强大的第三方库react-native-yunpeng-alipay。在项目根目录中，采用npm方式安装。

  react-native install react-native-yunpeng-alipay

  这里react-native install 是会自动link的，所以不需要再react-native link

2.添加库依赖

  CoreMotion.framework
  CoreTelephony.framework
  libc++
  libz

3.添加URL Scheme

  在info.plist中添加支付宝对应的url scheme (唯一识别),例如:alipay+"appKey"，scheme中不能包含特殊字符如“-”,否则导致支付完成后不能返回至商户App.

4.修改AppDelegate.m文件

  a.引入头文件，#import "AlipayModule.h",完成支付宝回调处理

  b.新增openUrl方法

//MARK:9.0以前使用的方法
- (BOOL)application:(UIApplication *)application
最低0.47元/天 解锁文章
ActiveC
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
React Native (IOS和Android) 支付宝和微信支付集成实战（支付宝Android篇）
likeconan123的博客
01-08 4773
序言：React Native无论是在社区和应用程度上，在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持，虽然没有完整的Demo，不过在我做过一个相关集成的项目后，在此我把相关的步骤和方法总结出来和大家分享，希望能够帮助大家少走弯路，快速集成。 支付宝——Android集成 一、下载客户端SDK并且进行配置 在支付宝官网下载 其SDKhttps://d
React Native (IOS和Android) 支付宝和微信支付集成实战（支付宝IOS篇）
likeconan123的博客
01-08 1124
序言：React Native无论是在社区和应用程度上，在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持，虽然没有完整的Demo，不过在我做过一个相关集成的项目后，在此我把相关的步骤和方法总结出来和大家分享，希望能够帮助大家少走弯路，快速集成。 支付宝——IOS集成 一、下载客户端SDK并且进行配置 在支付宝官网下载 其SDK https://docs.o
React-Native之iOS集成支付宝支付
大灰狼的小绵羊哥哥的博客
05-26 2031
支付宝没有支持RN，所以只能通过在原生封装支付宝让RN调用。来一波效果图： 原文http://www.jianshu.com/p/bde956449299 选择支付宝支付.png 充值提示.png 在没有安装支付宝APP的情况下，跳转网页支付宝页面： 支付宝网页页面.png 整体流程： 1.在蚂蚁金服开放平台申请应用
React Native (IOS和Android) 支付宝和微信支付集成实战（微信IOS篇）
likeconan123的博客
01-09 1760
序言：React Native无论是在社区和应用程度上，在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持，虽然没有完整的Demo，不过在我做过一个相关集成的项目后，在此我把相关的步骤和方法总结出来和大家分享，希望能够帮助大家少走弯路，快速集成。 微信支付——IOS集成 一、IOS配置 相较于支付宝，微信在IOS端的集成要简单的多，可以参考官方文档，但是有几个坑
React Native支付分享
大灰狼的小绵羊哥哥的博客
11-20 909
国内服务 https://github.com/MarnoDev/react-native-open-project/blob/master/category/13_Service.md http://www.jianshu.com/p/4c88a0dd88d4 ★ 关于我们 公众号【 aMarno 】专注分享 React Native 技术和资源 ，扫码关注↓↓↓
react-native-alipay:使用react-native-yunpeng-alipay 支付宝支付demo
05-02
使用react-native-yunpeng-alipay支付宝支付demo “ react-native”：“ 0.51.0”， “ react-native-yunpeng-alipay”：“ ^ 2.0.0” 友情链接 下载 git clone ...
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...
react-Reactnative仿支付宝密码输入框
08-15
在React Native中，仿支付宝密码输入框的实现涉及到多个关键知识点，这包括组件设计、状态管理、触摸事件处理以及自定义样式。以下是对这些技术点的详细解释： 1. **React Native基础知识**：React Native是...
Android-react-native支付宝手机支付模块
08-13
本教程将详细介绍如何在React Native项目中实现“Android-react-native支付宝手机支付模块”。 首先，我们需要了解React Native的组件化开发思想，它是通过创建JavaScript模块来封装原生平台的功能，并通过Bridge...
react-native-alipay：适用于React Native的Alipay SDK。 支持RN> = 0.47
02-05
React本地支付宝 适用于React Native的Alipay SDK 支持手机网页网址支付。 支持RN> = 0.47。 本机AlipaySDK库（）： iOS：v15.5.9（2018.11.26） Android：v15.5.9（2018.11.26）产品特点快捷登录授权（ ） APP支付...
react-native-payments：使用付款请求API通过Apple Pay和Android Pay接受付款
02-05
React性本金 欢迎使用最好，最全面的库，将Apple Pay和Google Pay等付款集成到您的React Native应用中。 该库旨在与React Native 0.61及更高版本完全兼容。 安装 npm install --save react-native-payments 您需要在每个平台上自动链接： 安卓 npx jetify 的iOS cd ios pod install 导游 示例项目 现场演示 有关逐步指南，请查看@naoufal的演讲。 API规范 在下方，我们提供了有关PaymentRequest的详细规范以及有关配置Apple Pay和Google Pay的
React-Native调用支付宝，微信
weixin_30279315的博客
01-16 213
https://www.pingxx.com/docs/downloads Ping++ 是为移动端应用以及 PC 网页量身打造的下一代支付系统，通过一个 SDK 便可以同时支持移动端以及 PC 端网页的多种主流支付渠道，你只需要一次接入即可完成多个渠道的接入。 Ping++ SDK 包括 Client SDK 和 Server SDK 两部分，支持主流的七种后端开发语言，适配了 And...
ReactNative使用支付宝支付报错：方法不会覆盖或实现超类型的方法react-native-yunpeng-alipay
兔狲超凶的博客
12-26 6114
根据项目需求需要集成支付宝支付，如果报了以下错误，仅需注释四行代码就可以搞定哟！ 我使用的是 react-native-yunpeng-alipay 当根据文档在Android上集成的时候，运行时报错：如下：   /Users/abysskitty/Desktop/RNProject/KakouApp/node_modules/react-native-yunpeng-alipay/an...
React Native之支付集成(微信 支付宝)(ios android)
LeoStarry2014的博客
12-28 661
React Native之支付集成(微信 支付宝)(ios android) 一,需求分析 1.1,app在线充值与提现 二,技术介绍与集成 2.1,微信支付 2.1.1,Android配置 详细配置可查看React Native之微信分享(iOS Android),这里主要介绍的是支付方面的配置 第一步:创建名为'wxapi'的文件夹，并在文件夹...
react-native 支付宝支付 （react-native-yunpeng-alipay）
祈澈菇凉
11-07 1521
使用react-native-yunpeng-alipay完成android ，ios支付宝支付 代码地址 https://github.com/dai1254473705/react-native-alipay 一、android 1. 安装 react-native-yunpeng-alipay 三方插件 windows: npm install react-native-yunpe...
ReactNative接入支付宝支付
大灰狼的小绵羊哥哥的博客
03-30 4369
写在前面 重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下去开发了。http://jafeney.com/ 支付宝支付 接入支付宝支付前建议先查看 支付宝官方文档，先按照要求创建应用并完成配置。不过要注意以下两点： 第一，App支付不能在沙
android微信支付插件,React Native集成微信支付【Android】
weixin_28750379的博客
05-26 392
wechat.jpg本次博客主要讲解主要在RN中集成微信支付以及被我踩平的坑，需要一定的原生集成经验！一. 导入微信SDK用Android Studio打开RN项目中的android部分，在app/build.gradle添加如下代码：dependencies {......compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+'...
IOS-IAP 苹果支付
woshiyuanlei的专栏
11-11 1506
1、下载带ssl的curllib，自己编译生成相关Lib、DLL 2、参考SDK流程进行开发
React Native ------记录调起iOS支付宝的两种方法
silently_frog的博客
04-17 6365
本文记录React Native 实现的iOS App,如何用iOS调起支付宝App??? 两种方法： 方法一：使用支付宝sdk方法：payOrder； 方法二：使用React Native 提供的Linking.openURL(url)方法。 方法一： iOS集成支付宝https://opendocs.alipay.com/open/204/1052...
解决React-Native-Webview ios加载时候白屏问题
最新发布
06-11
React-Native-Webview是一个React Native中的WebView组件，同样会出现白屏问题。以下是一些可能的原因和解决方案： 1. iOS版本问题：如果使用的是较老的iOS版本，可能会出现WebView组件的兼容性问题，导致白屏。可以升级iOS版本来解决这个问题。 2. 缓存问题：iOS设备中的WebView会自动缓存已经加载过的网页，如果缓存过多可能会导致白屏。可以尝试清除WebView的缓存，可以参考以下代码： ```javascript import { WebView } from 'react-native-webview'; // ... <WebView source={{ uri: 'https://www.example.com' }} cacheEnabled={false} // ... /> ``` 3. WebKit问题：在iOS设备中，WebView默认使用的是WebKit，有时候可能会出现WebKit的问题导致白屏。可以尝试禁用WebKit来解决这个问题，可以参考以下代码： ```javascript import { WebView } from 'react-native-webview'; // ... <WebView source={{ uri: 'https://www.example.com' }} useWebKit={false} // ... /> ``` 4. 调试问题：在开发过程中，有时候可能会出现一些JavaScript错误导致WebView白屏。可以使用开发者工具来调试JavaScript代码，找出问题所在。 希望以上这些解决方案能够解决你的问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值