itppay-react-native

itppay-react-native是智付云(ITPPay)旗下面向React-Native的移动端支付产品，通过接入本产品，能够快速集成支付宝支付、微信支付以及银联快捷支付，集成过程简单快捷，是专为移动端定制的新一代支付产品。

1. 渠道支撑

智付云为互联网开发者提供了如下支付渠道：

• 支付宝
• 微信支付
• 银联快捷支付

2. 接入流程

2.1 下载itppay-react-native

react-native install itppay-react-native --save

2.2 引用及关联

link命令可以将安装的itppay-react-native关联到Android项目与iOS项目。

react-native link itppay-react-native

如果React-Native版本低于0.29，请使用rnpm link代替react-native link命令。

2.3 接入准备

2.3.1 Android接入准备

1.在Android项目的AndroidManifest.xml中添加权限

<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<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.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.CALL_PHONE" />
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <!-- 银联快捷支付 -->
<uses-permission android:name="org.simalliance.openmobileapi.SMARTCARD" />
<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc.hce"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="org.simalliance.openmobileapi.SMARTCARD" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

2.在Android项目的AndroidManifest.xml中注册Activity

若需要接入微信支付，请将WXPayEntryActivity.java导入到 您申请官方微信使用的packageName/wxapi 包下，并将其中的"您的官微申请的appid"参数替换为您在官方微信申请的appid。WXPayEntryActivity.java文件存放在itppay-react-native项目的根目录与example/ITPPayDemoApp的Android项目中

<activity
    android:name="com.unionpay.uppay.PayActivity"
    android:configChanges="orientation|keyboardHidden|keyboard"
    android:screenOrientation="portrait">
</activity>

<activity
    android:name="com.unionpay.UPPayWapActivity"
    android:configChanges="orientation|keyboardHidden|fontScale"
    android:screenOrientation="portrait"
    android:windowSoftInputMode="adjustResize" >
</activity>
<!-- 支付宝 -->
<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>

<!-- 智付云自有-->
<activity
    android:name="com.tech.dlpaysdk.activity.DLWebView"
    android:configChanges="orientation|keyboardHidden|screenSize"
    android:windowSoftInputMode="adjustUnspecified|stateHidden" >
</activity>
<activity
    android:name="com.tech.dlpaysdk.activity.NoView"
    android:theme="@android:style/Theme.Translucent"
    android:configChanges="orientation|keyboardHidden|screenSize"
    android:windowSoftInputMode="adjustUnspecified|stateHidden" >
</activity>

<!--微信-->
 <activity
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true"
    android:theme="@android:style/Theme.NoDisplay"
    android:configChanges="orientation|keyboardHidden|screenSize"
    android:launchMode="singleTop"
    android:windowSoftInputMode="adjustUnspecified|stateHidden" >
</activity>

若您仅需要接入Android端，请直接查看Android示例

2.3.2 iOS接入准备

打开xcode，TARGET -> General -> Linked Frameworks and Libraries ，添加添加所需依赖 Frameworks：

CFNetwork.framework
SystemConfiguration.framework
Security.framework
QuartzCore.framework
CoreTelephony.framework
CoreMotion.framework
CoreLocation.framework
UIKit.framework
libc++.tbd
libz.tbd
libsqlite3.tbd

<key>
    LSApplicationQueriesSchemes
</key>
<array>
    <string>weixin</string>
    <string>wechat</string>
    <string>alipay</string>
    <string>alipays</string>
    <string>uppaysdk</string>
    <string>uppaywallet</string>
    <string>uppayx1</string>
    <string>uppayx2</string>
    <string>uppayx3</string>
    <string>mqqwallet</string>
</array>

2.为了用户操作完成后能够跳转回你的应用，请务必添加 URL Schemes：在 Xcode 中，选择你的工程设置项，选中 TARGETS 一栏，在 Info 标签栏的 URL Types 添加 URL Schemes，如果使用微信，填入微信平台上注册的应用程序 id（为 wx 开头的字符串）。如果不使用微信，则自定义，建议起名稍复杂一些，尽量避免与其他程序冲突。允许英文字母和数字，首字母必须是英文字母，不允许特殊字符。

3.iOS 9 限制了 http 协议的访问，如果 App 需要访问 http://，需要在 Info.plist 添加如下代码：

<key>
    NSAppTransportSecurity
</key>
<dict>
    <key>
        NSAllowsArbitraryLoads
    </key>
    <true/>
</dict> 

若您仅需要接入iOS端，请直接查看iOS示例

2.4 接入示例

2.4.1 模块引入

var itppay = require("itppay-react-native");

2.4.2 Android接入示例

/**
 * 引入模块 itppay-react-native
 */
var itppay = require("itppay-react-native");

var orderNo = new Date().getTime()+"";

var tpParam = {
				appid: '0000000022',
				appkey: 'e7d4c31780d1379c6af38f82e455967c',
				subject: 'test goods',
				amount: '1',
				body: 'testonetest',
				mchntOrderNo: orderNo,
				notifyUrl: 'http://www.baidu.com',
				cpChannel: '',
				description: '',
				extra: '',
				payStyle: itppay.ALIPAY,//支付方式，具体含义见支付通道常量列表
			 };
			 
/*
 * 调起itppay支付
 * tpParam：支付参数
 * function(payResultCode,msg)：支付结果回调函数
 * payResultCode：商户端返回码，msg：回调信息
 */
itppay.dlPay(   
                tpParam,
				function(payResultCode,msg){//payResultCode：支付结果返回码，具体见支付结果返回码列表
					ToastAndroid.show("react-result:" + payResultCode+""+msg, ToastAndroid.SHORT);
				}
			);

2.4.3 iOS接入示例

 /**
 * 引入模块 itppay-react-native
 */
var itppay = require("itppay-react-native");

var orderNo = new Date().getTime()+"";

var tpParam = {
				appid: '0000000022',
				appkey: 'e7d4c31780d1379c6af38f82e455967c',
				subject: 'test goods',
				amount: '1',
				body: 'testonetest',
				mchntOrderNo: orderNo,
				notifyUrl: 'http://www.baidu.com',
				cpChannel: '',
				description: '',
				extra: '',
				payStyle: itppay.ALIPAY,//支付方式，具体含义见itppay常量列表
				appScheme:"YOU-URLSCHEME",
			 }


/*
 * 调起itppay支付
 * tpParam：支付参数
 * function(payResultCode,msg)：支付结果回调函数
 * payResultCode：商户端返回码，msg：回调信息
 */
itppay.dlPay(tpParam,function(payResultCode,msg){

    alert(JSON.stringify(payResultCode));

});

    
    

具体代码如下：

- (void)applicationDidBecomeActive:(UIApplication *)application {
    [[NSNotificationCenter defaultCenter] postNotificationName:[QJPaySDK WETCHAR] object:nil];
}

-(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{
    [QJPaySDK handleOpenWeChatURL:url];
    [QJPaySDK handleOpenQQURL:url];
    return [QJPaySDK handleOpenURL:url];
}

-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{
    [QJPaySDK handleOpenWeChatURL:url];
    [QJPaySDK handleOpenQQURL:url];
    return [QJPaySDK handleOpenURL:url];
}

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
    return [QJPaySDK handleOpenWeChatURL:url];
}

3. 参数

支付参数列表

|名称|类型|含义|最大长度(位)|备注| |:---:|:---:|:---:|:---:|:---:| | amount | string | 订单金额 | 12 | 必填 | | appid | string | 交易发起所属App | 固定 | 必填，在智付云平台上申请获得 | | appkey | string | 交易发起所属AppKey | 固定 | 必填，在智付云平台上申请获得 | | amount | string | 订单金额 | 12 | 必填 | | body | string | 商品描述 | 128 | 必填 | | cpChannel | string | CP分发渠道 | 128 | 非必填，由商户自定义 | | description | string | 订单附加描述 | 128 | 非必填 | | extra | string | 附加数据 | 128 | 非必填，以键值对形式存放 | | mchntOrderNo | string | 商户订单号 | 64 | 必填，且商户端必须唯一 | | notifyUrl | string | 订单支付结果通知地址 | 64 | 必填，用于接受订单支付结果通知，必须以http或https | | payStyle | string | 支付方式 | 64 | 必填，值见itppay常量列表 | | subject | string | 商品名称 | 64 | 必填 |

支付通道常量列表

| 常量值 | 支付方式 | |:---:|:---:| | itppay.ALIPAY | 支付宝 | | itppay.WECHAT | 微信支付 | | itppay.UNIONPAY | 银联快捷支付 |

支付结果返回码列表

| 返回码 | 含义 | |:---:|:---:| | -1 | 支付失败 | | 0 | 支付成功 | | 1 | 用户取消支付 | | 2 | 待支付 |

4. 技术支持

1. 您可以在智付云平台了解我们的产品，在网站上注册商户，并寻求技术支持。

2. 您可以在智付云官网的帮助中心查阅相关资料，了解相关问题的解决方案。

3. 如果您有其他问题，也可以联系我们。