Шаг за шагом, чтобы интегрировать Alipay в реактивное приложение

Многие приложения теперь нуждаются в интеграции сторонних платежных платформ для оплаты своих продуктов, но официальные лица, как правило, не рассказывают, как интегрировать их в нативные приложения. -родное приложение.

введение сцены

Подходит для бизнес-приложений в функции интеграции приложений Alipay. Продавец звонит в приложение. Alipay предоставляет SDK, SDK, а затем вызывает сокровище, чтобы оплатить приложение платежного модуля. Если пользователь установил приложение Alipay, приложения для бизнеса перейдут к Alipay для завершения платежа, после перехода обратно в бизнес-приложение, окончательный платеж, чтобы показать результаты. Если у пользователя нет приложения Alipay, приложение в бизнесе будет перенесено со страницы оплаты Alipay, пользователи регистрируются в учетной записи Alipay после оплаты, чтобы показать результаты. В настоящее время поддерживается телефонная система: iOS (Apple), Android (Andrews).

Интегрированный SDK

Android

1. Поместите пакет alipaySdk-xxxxxxxx.jar вandroid/app/libsкаталог, как показано ниже.

   

2. Импортируйте alipaySDK-xxxxxxxxx.jar в каталог libs, вandroid/app/build.gradleДобавьте следующий код в:

dependencies {
    ......
    compile files('libs/alipaySdk-20170725.jar')
    ......
}

3. существуетandroid/app/src/AndroidManifest.xmlДобавьте оператор в файл:

<!-- 支付宝 activity 声明 -->
<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>
<!-- 支付宝权限声明 -->
<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" />

4. существуетandroid/app/proguard-rules.proДобавьте правила обфускации

-keep class com.alipay.android.app.IAlixPay{*;}
-keep class com.alipay.android.app.IAlixPay$Stub{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
-keep class com.alipay.sdk.app.PayTask{ public *;}
-keep class com.alipay.sdk.app.AuthTask{ public *;}
-keep class 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.** { *;}

5. существуетcom.xx.xxсоздать имя пакетаalipay
6. Напишите модуль, вcom.xx.xx.alipayСоздать под пакетомAlipayModule.java, код показан ниже:

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() {
    return "Alipay";
  }

  @ReactMethod
  public void pay(final String orderInfo, final Promise promise) {
    Runnable payRunnable = new Runnable() {
      @Override
      public void run() {
        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);
      }
    };
    // 必须异步调用
    Thread payThread = new Thread(payRunnable);
    payThread.start();
  }

}

7. Написать пакет, вcom.xx.xx.alipayСоздать под пакетомAlipayPackage.java, код показан ниже:

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));
    return modules;
  }

}

8. Наконец, последнее, что нужно сделать на стороне Android, — это зарегистрировать модуль вcom.xx.xx.MainApplicationЗарегистрируйте модуль в:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        // ...other packages
        new AlipayPackage() // <-- 注册模块
    );
}

iOS

1. Запустите IDE (например, Xcode),iOS-пакетСкопируйте следующие файлы в сжатый файл в папку проекта и импортируйте их в проект проекта. AlipaySDK.комплект AlipaySDK.framework
2. В Link Binary With Libraries на вкладке Build Phases добавьте следующую зависимость:

   

• Если это версия после Xcode 7.0, вам нужно добавить libc++.tbd, libz.tbd;
• Если это версия до Xcode 7.0, вам нужно добавить libc++.dylib и libz.dylib.

3. Создайте группу в каталоге проектаAlipayи создатьAlipayModule

   

4. записыватьAlipayModule.hкод показывает, как показано ниже:

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface AlipayModule : NSObject <RCTBridgeModule>
@end

5. записыватьAlipayModule.mкод показывает, как показано ниже:

#import "AlipayModule.h"
#import <AlipaySDK/AlipaySDK.h>

@implementation AlipayModule

RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
  resolver:(RCTPromiseResolveBlock)resolve
  rejecter:(RCTPromiseRejectBlock)reject){
  //应用注册scheme,在AliSDKDemo-Info.plist定义URL types
  NSString *appScheme = @"alisdkdemo";
  [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
    resolve(resultDic);
  }];
}

RCT_EXPORT_MODULE(Alipay);

@end

6. На данный момент Alipay SDK на стороне iOS успешно интегрирован.

React-Native

1. После изменения нативного кода вам необходимо переупаковать работающую программу:

react-native run-android # 运行Android端
react-native run-ios # 运行iOS端

2. записыватьAlipay.jsИнструменты

import { NativeModules } from 'react-native';
export default NativeModules.Alipay;

3. передачаAlipayМодуль инициирует платеж Alipay:

import Alipay from './your/path/to/Alipay';
async pay(params){ // params 为后端提供的参数
  let res = await call(getOrderInfo, params); // 从后端获取签名字串，参考支付接口调用
  let ret = await call(Alipay.pay, res.data); // 调起支付宝，发起支付
  if (ret.resultStatus === '9000') {
    // 支付成功回调
  } else {
    // 支付失败回调
  }
}

4. Справочник по вызову платежного APIвызов платежного интерфейсаа такжеОписание параметра платежного запроса, в этой статье мы не будем вдаваться в подробности.

постскриптум

Назад будет продолжать вводить интегрированную плату микроканала реагирования, по сравнению с интегрированной Alipay, интеграция микроканала будет платить много хлопот, таких как обработка обратного вызова, механизм подписи приложений, поэтому схема регистрации для повышения сложности интеграции.

Справочная документация

• Процесс интеграции Android-платежей приложений
• Процесс интеграции оплаты приложения с iOS
• Android вызывает нативные модули
• iOS вызывает нативные модули

react-native интегрирует Alipay

автор:ZevenFang

Пожалуйста, указывайте источник при перепечатке~