React native’s Alipay component @ UIW / react native Alipay

Time:2021-2-7

Alipay plug-in based on react native supports IOS / Android. It is suitable for businesses to integrate Alipay payment function in App application. Merchant APP calls Alipay’s SDK and SDK, and 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, then return to the merchant APP after payment, and finally show the result of payment. If the user does not install Alipay APP, the merchant APP will adjust the Alipay webpage payment cashier, the user will log on to the Alipay account, and the payment result will be displayed after payment. Complete example | complete interface document

React native's Alipay component @ UIW / react native Alipay

React native's Alipay component @ UIW / react native Alipay

matters needing attention

  1. Android: support 2.3 and above system version.
  2. IOS: above IOS 6.0 (including IOS 6.0).
  3. Support mobile system: IOS (Apple), Android (Android).
  4. Debugging, please note that Alipay access must be applied.ApprovedStatus.
  5. Alipay open platform – Management Center, signingApp paymentandAPP Alipay loginFunction.
  6. Forreact-native >= 0.60+The lower version was not tested.
  7. AlipaySDK 15.7.7 has been updated to the latest Alipay SDK version.

Installation dependency

yarn add @uiw/react-native-alipay
# react-native version >= 0.60+
$ cd ios && pod install

API

Alipay.alipaypayment

Alipay.alipay: (payInfo: string) => Promise<OrderResult>;

  • ⚠ Note that the result of successful payment is a string and the content is returned
  • ⚠️ Alipay needs to set upSchemeAnd IOS add native code to support the functions of payment and business app
  • ⚠️ AlipayManagement Center - Alipay open platformYou need to sign upApp payment
import Alipay from '@uiw/react-native-alipay';

// set Alipay URL Schemes, to express that he is the only sex in the universe, and can use `bundle Identifier`.
// scheme = `alipay` + `APPID`, `APPID` is the application ID assigned by Alipay to developers.
Alipay.setAlipayScheme(scheme);
//  ⚠️  At present, Alipay sandbox environment is not available, only Android support.
// Alipay.setAlipaySandbox(isSandbox);

async function aliPay() {
  // Alipay end payment
  //Payinfo is a good payment parameter in the background
  // return_url=
  const payInfo = 'alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2021001172656340&biz_content=%7B%22out_trade_no%22%3A%221111112222222%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%221234%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&sign=oUQmGtkv8mrhJ0YwHl9%2FfxMcoLACWuSFKiMTC4Id8nc%2FZVvDQ6MLQq5hhtEN03Qn1%2BAtzTAaofE8nNixdroxOek2l5YtOAcYcXVYlJIyogN%2B22erN2NpDTWJ7tQTKgYFDJLRiG0DZJaxfADhUUF6UR9kdA8omoXKLDlP17ZPUs5Jr4aKv5HJtH5C53ui7PbmyWYg934L4UDC2F%2F9pPQlRwwDeE1SAaV3HW9Dt83kK52o8%2FlChXdotbFdAvH0d4qYGhpEYU5sepj9xiOMyL9aC4pMXW9INYLLGbvtqtlRchZTAfH5yji6nqqQm9KKMmcVrWdBDLyjFVNpejq1UjbJBw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+12%3A16%3A16&version=1.0';
  const resule = await Alipay.alipay(payInfo);
  console.log('alipay:resule-->>>', resule);
}

Order detailspayInfoData before encoding

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content={ "out_trade_no":"123123123123123", "total_amount":"0.01", "subject":"1234", "product_code":"QUICK_MSECURITY_PAY" }&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http://ane.boshu.ltd/owner/pay/api/ownerPay/callback&return_url=uiwjspay://&sign=re/+2SICQggOUjfxl7MtP/qzir2e+LdH4m+02gDcw0fkByO5MqXW/9bmXw+c4RMqo835OAjMZs7s966ZuDx2PB+hO0tJ/bzdHLLqYlBeCcETkrfwRx+AFZNgzsCn75eRCA7GONH35BpfSeGkQUZ+vNXftqd6hWaa7m/MhQYrjQcV98IVJM+UR67Gj68c+LM586cnk0+rbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd/beH0F8eqTVv8gW1ZTo5v/d/E2wSDGV1DciaEnCroTw==&sign_type=RSA2&timestamp=2020-07-09 09:50:41&version=1.0

Order detailspayInfoEncoded data

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content=%7B+%22out_trade_no%22%3A%22123123123123123%22%2C+%22total_amount%22%3A%220.01%22%2C+%22subject%22%3A%221234%22%2C+%22product_code%22%3A%22QUICK_MSECURITY_PAY%22+%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&return_url=uiwjspay%3A%2F%2F&sign=re%2F%2B2SICQggOUjfxl7MtP%2Fqzir2e%2BLdH4m%2B02gDcw0fkByO5MqXW%2F9bmXw%2Bc4RMqo835OAjMZs7s966ZuDx2PB%2BhO0tJ%2FbzdHLLqYlBeCcETkrfwRx%2BAFZNgzsCn75eRCA7GONH35BpfSeGkQUZ%2BvNXftqd6hWaa7m%2FMhQYrjQcV98IVJM%2BUR67Gj68c%2BLM586cnk0%2Brbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd%2FbeH0F8eqTVv8gW1ZTo5v%2Fd%2FE2wSDGV1DciaEnCroTw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+09%3A50%3A41&version=1.0
  • ⚠️ The background SDK is generated according to all datasignIt is recommended to get this data through API, and error will be reported when splicing data.
  • ⚠️ out_trade_noOrder ID andsignThe signature is unique, different each time, and needs to be generated in the background.

Return result is returned, and Alipay returns the result parameter.

{ 
  "result": "{\"alipay_trade_app_pay_response\":{\"code\":\"10000\",\"msg\":\"Success\",\"app_id\":\"2021001172656340\",\"auth_app_id\":\"2021001172656340\",\"charset\":\"UTF-8\",\"timestamp\":\"2020-07-08 21:30:14\",\"out_trade_no\":\"123123213123214\",\"total_amount\":\"0.01\",\"trade_no\":\"2020070822001414841426413774\",\"seller_id\":\"2088421915791034\"},\"sign\":\"LY7wCsNLp+QnDqCq6VelY/RvyK7ZGY8wsXoKvS+Or7JjONLDUx5P6lDgqRKkpkng7br3y6GZzfGKaZ88Tf4eMnBMKyqU+huR2Um47xUxP383njvHlxuQZsSTLQZRswy4wmb/fPkFfvyH6Or6+oj0eboePOTu63bNr+h03w0QnP4znuHpfRuoVgWpsYh/6B1DL+4xfWRKJ21zm1SV9Feo9RWqnyTaGZyFVi6IKge0dUCYs9hXju95fOUVUOx5YflOFtSEnZafY9Ls4FCRQE1ANkjaKiKIE0+c4c4sEVEf/9Dwh88N+aSQOoLT+AV4RpjMoA8hF2k+vv2OKNeqr6SYGQ==\",\"sign_type\":\"RSA2\"}",
  "resultStatus": "9000",
  "memo": ""
}

Alipay.authInfoLogin authorization

Alipay.authInfo: (authInfoStr: string) => Promise<AuthResult>;

  • ⚠️ Note that the authorization is successful, the return result is a string and the content is returned
  • ⚠️ Alipay needs to set upSchemeAnd IOS add native code to support the verification of APP functions
  • ⚠ AlipayManagement Center - Alipay open platformYou need to sign upAPP Alipay login
import Alipay from '@uiw/react-native-alipay';

// set Alipay URL Schemes, to express that he is the only sex in the universe, and can use `bundle Identifier`.
// scheme = `alipay` + `APPID`, `APPID` is the application ID assigned by Alipay to developers.
Alipay.setAlipayScheme(scheme);

async function authInfo() {
  // Alipay side authorization validation
  //Authinfostr is a good verification parameter for background stitching
  const authInfoStr = 'app_name=mc&auth_type=AUTHACCOUNT&apiname=com.alipay.account.auth&biz_type=openservice&product_id=APP_FAST_LOGIN&scope=kuaijie&pid=2088421915791034&target_id=15946456110003465&app_id=2021001172656340&sign_type=RSA2&sign=keluG28qbbLwAcSDI4VmCNOGHJoF3xgpVeqXu1nCBCYo%2FlYYGe00fTfV9L4G73Sk7%2B4IwK%2BZV8IL%2F04cVtk6SR74lKAR3rYOoUdQ09ZrZFuQoUkO0vekajhp75IDQIg6PedCyY0SjFTqrHlH%2FImscBwitxrlSc9YbN7uW0gY34K8t7v8NhDoqzKJeoIz43UxF5U1DpUA1ISBVxwO7du1t6rYltsRhReayPS3hnvmwYSKQZUEgBvJ%2BT2XdyCaz%2FdGV907lYagPp1Oxkoaj%2FvW5NjNsRnid7vH944CoFj9XtBK%2FNTk2tBPTHFxYRQTEG1PkgkBohGpAWOFGGOuapH0ag%3D%3D';
  const resule = await Alipay.authInfo(authInfoStr);
  // resule => success=true&auth_code=9c11732de44f4f1790b63978b6fbOX53&result_code=200&alipay_open_id=20881001757376426161095132517425&user_id=2088003646494707
  console.log('authInfo:resule-->>>', resule);
}

The result of authorization is returned, and Alipay returns the result parameter.

{
  "resultStatus": "9000",
  "Memo": "processing succeeded",
  "result": "success=true&result_code=200&app_id=202100117265&auth_code=8b6e5581b85WX84&scope=kuaijie&alipay_open_id=20881029919664670&user_id=20880025&target_id=15946456110003465"
}

Alipay.getVersionGet SDK version

Alipay.getVersion: () => Promise<string>;

import Alipay from '@uiw/react-native-alipay';

async function getVersion() {
  const version = await Alipay.getVersion();
  console.log('version:', version);
}

Alipay returns to apply iOS settings

  • ⚠️ Android doesn’t need to make any settings.
  • ⚠️ If the userAlipay AppJump toBusiness app, through system function switching, not throughAlipay APPFunction key returnBusiness appThe callback function does not workAppState.addEventListenerMonitor events and request the background API to optimize the user experience.
  1. Set Alipay in codeURL Schemes, the following exampleuiwjspayIt’s definedschemeYou can also define it asalipay + appidappidAn application ID allocated to developers for Alipay.schemeUniqueness.
Alipay.setAlipayScheme('uiwjspay');
  1. At the time of request for paymentpayInfoMust include inreturn_url=uiwjspay://return_urlThe value of is definedscheme => uiwjspay://Will return to Alipay order payment status results.
//Payinfo is a payment parameter spliced in the background. This parameter must contain ` return '_ url=uiwjspay://`
Alipay.alipay(payInfo, (res)=>console.log(res))
  1. UsedURL SchemesWhite list, inIOS / < app name >/ Info.plistAdd in
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>alipay</string>
</array>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string></string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>uiwjspay</string>
    </array>
  </dict>
</array>
  1. modifyIOS / < app name > / appdelegate. MAdd the following code:
#import <React/RCTLinkingManager.h>

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

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

Command test

  • iOS: xcrun simctl openurl booted uiwjspay://
  • Android:adb shell am start -W -a android.intent.action.VIEW -d "uiwjspay://test/router" com.uiwjspay

error handling

[NetworkInfo] Signal strength query returned error: Error Domain=NSPOSIXErrorDomain Code=13 "Permission denied", descriptor: <CTServiceDescriptor 0x283317100, domain=1, instance=1>

stayProduct -> Scheme -> Edit Scheme -> Run -> Arguments -> Environment Variablesadd toOS_ACTIVITY_MODE disable

other

The current project is initialized based on @ brodybits / create react native module.

npx create-react-native-module --package-identifier com.uiwjs --object-class-name RNAlipay --generate-example Alipay --example-react-native-version 0.63.0 --module-name @uiw/react-native-alipay --github-account uiwjs --author-name "Kenny Wong" --author-email "[email protected]"

development

CD example # if you enter the instance example project, the root directory does not need to be installed, which will cause an error
Yarn install # installation dependency

CD IOS # enter the example / IOS directory to install the dependency
Pod instll # installation dependency

Related connections

  • Alipay: Guide to secret key generation
  • Alipay: SDK download address, currently using AlipaySDK 15.7.9
  • Alipay: client debugging tools and usage tutorial
  • Alipay: payment, preparation before access
  • Alipay: full version authorized SDK calling method
  • Alipay: asynchronous notification error code: IllRet

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]