At present, many apps have requirements for integrating third-party payment platforms to pay for their own products. However, there is no official introduction on how to integrate alipay into The React-Native APP. This article will introduce how to integrate Alipay into the React-Native APP based on the official integration documents.

The scene is introduced

It is suitable for merchants to integrate alipay payment function in App applications. Merchant APP calls the SDK provided by Alipay, and the SDK then calls the payment module in Alipay APP. If the user has installed alipay APP, the merchant APP will jump to Alipay to complete the payment. After the payment, the merchant APP will jump back to the merchant APP and finally display the payment result. If the user does not install the Alipay APP, the merchant APP will activate the Alipay webpage to pay the cashier, and the user will log in to the Alipay account and display the payment result after payment. Currently supported mobile phone systems include iOS (Apple) and Android (Android).

To integrate the SDK

Android

  1. Put the alipaySDK-xxxxXXXX.jar package inandroid/app/libsDirectory, as shown below.
  2. Import the alipaySDK-xxxxxxxx.jar file from the libs directoryandroid/app/build.gradleAdd the following code to:
dependencies {
    ......
    compile files('libs/alipaySdk-20170725.jar')... }Copy the code
  1. inandroid/app/src/AndroidManifest.xmlAdd a declaration to the file:
<! -- Alipay activity declaration -->
<activity
    android:name="com.alipay.sdk.app.H5PayActivity"
    android:configChanges="orientation|keyboardHidden|navigation|screenSize"
    android:exported="false"
    android:screenOrientation="behind"
    android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
<activity
    android:name="com.alipay.sdk.app.H5AuthActivity"
    android:configChanges="orientation|keyboardHidden|navigation"
    android:exported="false"
    android:screenOrientation="behind"
    android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
<! -- Alipay Permission Statement -->
<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" />
Copy the code
  1. inandroid/app/proguard-rules.proAdding obfuscation Rules
-keep class com.alipay.android.app.IAlixPay{*; } -keepclass com.alipay.android.app.IAlixPay$Stub{*; } -keepclass com.alipay.android.app.IRemoteServiceCallback{*; } -keepclass com.alipay.android.app.IRemoteServiceCallback$Stub{*; } -keepclass com.alipay.sdk.app.PayTask{ public *; } -keepclass com.alipay.sdk.app.AuthTask{ public *; } -keepclass com.alipay.sdk.app.H5PayCallback {
    <fields>;
    <methods>; } -keep class com.alipay.android.phone.mrpc.core.** { *; } -keep class com.alipay.apmobilesecuritysdk.** { *; } -keep class com.alipay.mobile.framework.service.annotation.** { *; } -keep class com.alipay.mobilesecuritysdk.face.** { *; } -keep class com.alipay.tscenter.biz.rpc.** { *; } -keep class org.json.alipay.** { *; } -keep class com.alipay.tscenter.** { *; } -keep class com.ta.utdid2.** { *; } -keep class com.ut.device.** { *; }Copy the code
  1. incom.xx.xxCreate a package namealipay
  2. Write Module, incom.xx.xx.alipayPackage created underAlipayModule.java, the code is as follows:
package com.xx.xx.alipay;

import com.alipay.sdk.app.PayTask;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import java.util.Map;

public class AlipayModule extends ReactContextBaseJavaModule {

  public AlipayModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName(a) {
    return "Alipay";
  }

  @ReactMethod
  public void pay(final String orderInfo, final Promise promise) {
    Runnable payRunnable = new Runnable() {
      @Override
      public void run(a) {
        WritableMap map = Arguments.createMap();
        PayTask alipay = new PayTask(getCurrentActivity());
        Map<String, String> result = alipay.payV2(orderInfo,true);
        for(Map.Entry<String, String> entry: result.entrySet()) map.putString(entry.getKey(), entry.getValue()); promise.resolve(map); }};// Must be called asynchronously
    Thread payThread = newThread(payRunnable); payThread.start(); }}Copy the code
  1. Write Package incom.xx.xx.alipayPackage created underAlipayPackage.java, the code is as follows:
package com.xx.xx.alipay;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class AlipayPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new AlipayModule(reactContext));
    returnmodules; }}Copy the code
  1. The last thing to do on the Android side is to register this module in thecom.xx.xx.MainApplicationRegistration module:
@Override
protected List<ReactPackage> getPackages(a) {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        / /... other packages
        new AlipayPackage() // <-- register module
    );
}
Copy the code

iOS

  1. Start the IDE (such as Xcode), copy the following files from the compressed file in the iOS package to the project folder, and import them into the project project. AlipaySDK.bundle AlipaySDK.framework
  2. Add the following dependencies to the Link Binary With Libraries in the Build Phases TAB:
  • For Xcode versions later than 7.0, add libc++. TBD and libz.tbd.
  • For versions earlier than Xcode 7.0, you need to add libc++. Dylib, libz.dylib.
  1. Create groups in the project directoryAlipay, and create theAlipayModuleModule, as shown below:
  2. writeAlipayModule.hThe code is as follows:
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface AlipayModule : NSObject <RCTBridgeModule>
@end
Copy the code
  1. writeAlipayModule.mThe code is as follows:
#import "AlipayModule.h"
#import <AlipaySDK/AlipaySDK.h>

@implementation AlipayModule

RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
  resolver:(RCTPromiseResolveBlock)resolve
  rejecter:(RCTPromiseRejectBlock)reject){
  // Apply registration scheme to alisdkdemo-info.plist to define URL types
  NSString *appScheme = @"alisdkdemo";
  [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
    resolve(resultDic);
  }];
}

RCT_EXPORT_MODULE(Alipay);

@end
Copy the code
  1. At this point, the integration of iOS Alipay SDK is successful

React-Native

  1. After modifying the native code, you need to repackage the runtime:
Run react-native run-android # Run react-native run-ios # run iosCopy the code
  1. writeAlipay.jsUtility class
import { NativeModules } from 'react-native';
export default NativeModules.Alipay;
Copy the code
  1. callAlipayThe module initiates alipay payment:
import Alipay from './your/path/to/Alipay';
async pay(params){ // Params provides parameters for the back end
  let res = await call(getOrderInfo, params); // Get the signature string from the backend, refer to the payment interface call
  let ret = await call(Alipay.pay, res.data); // Activate alipay to initiate payment
  if (ret.resultStatus === '9000') {
    // Payment successfully callback
  } else {
    // Payment failed callback}}Copy the code
  1. Payment interface invocation refer to payment interface invocation and payment request parameters, which will not be described here.

Afterword.

Later, the react-Native wechat payment integration will be introduced. Compared with Alipay integration, wechat Payment integration is much more troublesome, such as callback processing, application signature mechanism, registration scheme, etc., which increase the complexity of integration.

Reference documentation

  • App Payment Android integration process
  • App payment iOS integration process
  • Android calls native modules
  • IOS calls native modules

React-native integrated Alipay

Author: ZevenFang

Reprint please indicate the source ~