react-native-dmg-pingpp

官方

官方版react-native组件已经发布 查看官方版，官方包中ios存在问题

0.1.7

• 删除android/libs 改用 maven 管理pingpp依赖包

安装

npm i -S react-native-dmg-pingpp

react-native link react-native-dmg-pingpp

npm run configureDmgPingpp <yourURLScheme>

//例如:
npm run configureDmgPingpp smartAlipay

配置

iOS

• xcode打开iOS项目,使用pod安装Pingpp iOS SDK并进行相关配置。

• 配置文档详见https://www.pingxx.com/docs/client/sdk/ios

  注意: 1.配置文档中"接收并处理交易结果"部分的代码,已在npm run configureDmgPingpp时自动添加到AppDelegate.m文件中)。 2.npm run configureDmgPingpp 中的yourURLScheme,就是配置文档中URL Types下添加的URL Schemes。

可能遇到的问题

• RNDMGPingPP.m中Pingpp.h文件找不到。 处理办法: 在TARGETS - Bulid Settings - Hearder Search Paths中添加$(SRCROOT)/../../../ios/Pods/Pingpp/lib。 Hearder Search Paths添加的值取决于Pingpp.h存放的路径,如果报错,请根据本地路径修改。

Android

在 ./android/app/src/main/AndroidManifest.xml 中加入

 
<!-- Ping++ SDK -->
<activity
    android:name="com.pingplusplus.android.PaymentActivity"
    android:configChanges="orientation|screenSize"
    android:launchMode="singleTop"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" >
    
    <!--使用QQ钱包时，需要填写-->
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
 
        <category android:name="android.intent.category.BROWSABLE"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <!-- 填写规则:qwallet + APP_ID -->
        <data android:scheme="qwalletXXXXXXXX"/>
    </intent-filter>
 
</activity>
 
<!-- 微信支付 sdk ，也是 Ping++ sdk 调用入口 -->
<activity-alias
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true"
    android:targetActivity="com.pingplusplus.android.PaymentActivity" />
<!-- 支付宝 sdk -->
<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>
 
<!-- 银联支付 sdk -->
<activity
    android:name="com.unionpay.uppay.PayActivity"
    android:configChanges="orientation|keyboardHidden|navigation|screenSize" />
 

使用

    import { pay } from 'react-native-dmg-pingpp';
 
    function payment( charge ) {
        // 调用支付方法
        pay( charge )
        .then(( response ) => {  // 支付成功或用户取消
          if ( response == 'cancel' ) {
            console.log('用户中途取消' );
          }
 
          // 此处根据返回结果,进行相应处理
          console.log('response', response );
        })
        .catch( ( error ) => {  // 支付出错
          console.log('error', error.errMsg );
        })
    }