rn-alipay

react-native 支付宝手机支付模块

安装

##iOS

1. npm install rn-alipay --save
2. 在XCode中右击项目的 Libraries 文件夹 ➜ Add Files to
3. 进入 node_modules ➜ rn-alipay ➜ ios ➜ 选择 RNAlipay.xcodeproj
4. 展开RNAlipay.xcodeproj➜ Products➜ 添加 libRNAlipay.a 到Build Phases -> Link Binary With Libraries
5. 在Build Phases选项卡的Link Binary With Libraries中，点击“+”号增加以下依赖：
6. 将RNAlipay.xcodeproj下AlipaySDK.framework、libssl.a、libcrypto.a文件拖入复制到项目文件夹下：
7. 编译运行

##Android

• npm install rn-alipay --save

// file: android/settings.gradle
...
include ':rn-alipay'  // <- add
project(':rn-alipay').projectDir = new File(settingsDir, '../node_modules/rn-alipay/android')  // <- add

// file: android/app/build.gradle
...
dependencies {
		...
		compile project(':rn-alipay')  // <- add
}

• 注册模块
• 对于 react-native 版本低于 0.19.0 (use cat ./node_modules/react-native/package.json | grep version)

// file: MainActivity.java
import com.alipay.RNAlipayPackage;  // <- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  ...

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new RNAlipayPackage(this))      // <- add package
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ...

}

• 对于 react-native 0.19.0及以上版本

// file: MainActivity.java
	...
import com.alipay.RNAlipayPackage;//<- import package

public class MainActivity extends ReactActivity {

   /**
   * 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(), //<- Add comma
            new RNAlipayPackage(this) //<- Add package
        );
    }
...
}

• 安卓部分实现参考https://github.com/szq4119/react-native-alipay

##使用说明

1. 导入模块

const Alipay = require('rn-alipay');

2. 基本使用

const privateKey = 'MIICeAIBADANBgkqhkiG9w0BAQEFAASCAmIwggJeAgEAAoGBAN0yqPkLXlnhM+2H/57aHsYHaHXazr9pFQun907TMvmbR04wHChVsKVgGUF1hC0FN9hfeYT5v2SXg1WJSg2tSgk7F29SpsF0I36oSLCIszxdu7ClO7c22mxEVuCjmYpJdqb6XweAZzv4Is661jXP4PdrCTHRdVTU5zR9xUByiLSVAgMBAAECgYEAhznORRonHylm9oKaygEsqQGkYdBXbnsOS6busLi6xA+iovEUdbAVIrTCG9t854z2HAgaISoRUKyztJoOtJfI1wJaQU+XL+U3JIh4jmNx/k5UzJijfvfpT7Cv3ueMtqyAGBJrkLvXjiS7O5ylaCGuB0Qz711bWGkRrVoosPM3N6ECQQD8hVQUgnHEVHZYtvFqfcoq2g/onPbSqyjdrRu35a7PvgDAZx69Mr/XggGNTgT3jJn7+2XmiGkHM1fd1Ob/3uAdAkEA4D7aE3ZgXG/PQqlm3VbE/+4MvNl8xhjqOkByBOY2ZFfWKhlRziLEPSSAh16xEJ79WgY9iti+guLRAMravGrs2QJBAOmKWYeaWKNNxiIoF7/4VDgrcpkcSf3uRB44UjFSn8kLnWBUPo6WV+x1FQBdjqRviZ4NFGIP+KqrJnFHzNgJhVUCQFzCAukMDV4PLfeQJSmna8PFz2UKva8fvTutTryyEYu+PauaX5laDjyQbc4RIEMU0Q29CRX3BA8WDYg7YPGRdTkCQQCG+pjU2FB17ZLuKRlKEdtXNV6zQFTmFc1TKhlsDTtCkWs/xwkoCfZKstuV3Uc5J4BNJDkQOGm38pDRPcUDUh2/';
const data = {
    privateKey,
    partner: '2088302277569230',
    seller: '12312341234',
    outTradeNO: '1231231231231', //订单ID（由商家自行制定）
    subject: '测试商品标题', //商品标题
    body: '测试产品描述', //商品描述
    totalFee: '1', //商品价格
    notifyURL: 'http://www.baidu.com"', //回调URL
    service: 'mobile.securitypay.pay',
    paymentType: '1',
    inputCharset: 'utf-8',
    itBPay: '30m',
    showURL: 'm.alipay.com',
    appSchemeIOS: 'testapp20', //应用注册scheme,在AlixPayDemo-Info.plist定义URL types
};
Alipay.pay(data).then((msg) => {
    console.log(msg);
}, (e) => {
    console.log(e);
});

##参考支付宝文档

• 支付宝开放平台移动支付文档

##Demo https://github.com/huangzuizui/rn-alipay-demo