React Native alipay is used by @uiW/React-native Alipay

React Native alipay plugin for iOS and Android. It is applicable for merchants to integrate the alipay payment function in the App, and the merchant App calls the SDK provided by Alipay, which then calls the payment module in the 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. Complete instance Example | full interface document

Matters needing attention

Android: Supports 2.3 or later versions.
IOS: iOS 6.0 or higher (including iOS 6.0).
Supported mobile systems: iOS (Apple), Android (Android).
Please note that alipay access application must be debuggedApprovedState.
Alipay open platform – management center, signedAPP to pay 和 APP Alipay loginFunction.
Apply toThe react - native > = 0.60 +The lower version is not tested.
AlipaySDK 15.7.7 has been updated to the latest AlipaySDK version.

Install dependencies

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

API

`Alipay.alipay`pay

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

⚠️ Note that payment success returns a string that returns the content
⚠️ Alipay needs to be setSchemeAdd native code to iOS to support payment andRebound merchant APPThe function of the
⚠ ️ alipayManagement Center - Alipay Open PlatformNeed to sign upAPP to pay

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

// Set up Alipay URL Schemes to state that they are universal unique using 'bundle Identifier'
// Scheme = 'Alipay' + 'APPID', 'APPID' is the application ID allocated by Alipay to developers
Alipay.setAlipayScheme(scheme);
// ⚠️ is currently unavailable, set up alipay sandbox environment, only Supported by Android
// Alipay.setAlipaySandbox(isSandbox);

async function aliPay() {
  // Pay by Alipay
  // payInfo is a background concatenated payment parameter
  // return_url=
  const payInfo = 'alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2021001172656340&biz_content=%7B%22out_trade_no%22%3A%22111111222222 2% 22% % 22 total_amount % 22% 2 c 3 a 22% % 220.01% % 22 subject % 22% 2 c 3 a 22% % 221234% 2 c % 22 product_code that starts 22% % 22% % 22 quick_msecurity_pay % 3 a 7 d & charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerP ay%2Fcallback&sign=oUQmGtkv8mrhJ0YwHl9%2FfxMcoLACWuSFKiMTC4Id8nc%2FZVvDQ6MLQq5hhtEN03Qn1%2BAtzTAaofE8nNixdroxOek2l5YtOAc YcXVYlJIyogN%2B22erN2NpDTWJ7tQTKgYFDJLRiG0DZJaxfADhUUF6UR9kdA8omoXKLDlP17ZPUs5Jr4aKv5HJtH5C53ui7PbmyWYg934L4UDC2F%2F9pPQ lRwwDeE1SAaV3HW9Dt83kK52o8%2FlChXdotbFdAvH0d4qYGhpEYU5sepj9xiOMyL9aC4pMXW9INYLLGbvtqtlRchZTAfH5yji6nqqQm9KKMmcVrWdBDLyjF VNpejq1UjbJBw % % 3 d & 3 d sign_type = RSA2 & timestamp = 2020-07-09 + 12% 3 a16%3 a16 & version = 1.0 ';
  const resule = await Alipay.alipay(payInfo);
  console.log('alipay:resule-->>>', resule);
}
Copy the code

Order details payInfo data 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+rbj8zoos6tCvN 8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd/beH0F8eqTVv8gW1ZTo5v/d/E2wSDGV1D CiaEnCroTw = = & sign_type = RSA2 & timestamp = 2020-07-09 09:50:41 & version = 1.0Copy the code

Order details Payinfo-encoded data

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content=%7B+%22out_trade_no%22%3A%22123123123123123 22% % 22% 2 c + % 22 total_amount % 3 a % 2 c + 220.01% 22% % 22 subject 22% % 22% % 221234% 2 c + 3 a % 22 product_code that starts % 22% % 22 quick_msecurity_pay % 22 + % 3 a 7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2Fown erPay%2Fcallback&return_url=uiwjspay%3A%2F%2F&sign=re%2F%2B2SICQggOUjfxl7MtP%2Fqzir2e%2BLdH4m%2B02gDcw0fkByO5MqXW%2F9bmX w%2Bc4RMqo835OAjMZs7s966ZuDx2PB%2BhO0tJ%2FbzdHLLqYlBeCcETkrfwRx%2BAFZNgzsCn75eRCA7GONH35BpfSeGkQUZ%2BvNXftqd6hWaa7m%2FMh QYrjQcV98IVJM%2BUR67Gj68c%2BLM586cnk0%2Brbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95f DbzpbmstQOuPgGHkASkd%2FbeH0F8eqTVv8gW1ZTo5v%2Fd%2FE2wSDGV1DciaEnCroTw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+09%3A50% 3 room a41 & version = 1.0Copy the code

⚠️ Background SDK is generated based on all datasign, it is suggested to get this data through API, splicing data will report errors.
⚠ ️out_trade_noThe order id andsignThe signature is unique and needs to be generated in the background.

Return result of payment, return result of Alipay

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

`Alipay.authInfo`Login authorization

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

⚠️ Notice The result of authorization success is a string, which returns the content
⚠️ Alipay needs to be setSchemeAdd native code to iOS to support validationRebound merchant APPThe function of the
⚠ ️ alipayManagement Center - Alipay Open PlatformNeed to sign upAPP Alipay login

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

// Set up Alipay URL Schemes to state that they are universal unique using 'bundle Identifier'
// Scheme = 'Alipay' + 'APPID', 'APPID' is the application ID allocated by Alipay to developers
Alipay.setAlipayScheme(scheme);

async function authInfo() {
  // Alipay terminal authorization verification
  // authInfoStr is a background concatenated validation parameter
  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=keluG28qbbLwAcSDI4V mCNOGHJoF3xgpVeqXu1nCBCYo%2FlYYGe00fTfV9L4G73Sk7%2B4IwK%2BZV8IL%2F04cVtk6SR74lKAR3rYOoUdQ09ZrZFuQoUkO0vekajhp75IDQIg6Ped CyY0SjFTqrHlH%2FImscBwitxrlSc9YbN7uW0gY34K8t7v8NhDoqzKJeoIz43UxF5U1DpUA1ISBVxwO7du1t6rYltsRhReayPS3hnvmwYSKQZUEgBvJ%2BT2 XdyCaz%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);
}
Copy the code

Authorization return result, Alipay return result

{
  "resultStatus": "9000"."memo": "Processed successfully"."result": "success=true&result_code=200&app_id=202100117265&auth_code=8b6e5581b85WX84&scope=kuaijie&alipay_open_id=208810299196646 70&user_id=20880025&target_id=15946456110003465"
}
Copy the code

`Alipay.getVersion`Obtaining the 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);
}
Copy the code

Alipay returns to app iOS Settings

⚠️ No Settings are required on Android.
⚠️ If the user uses thePay treasure to AppJump toMerchants APPBy switching system functions, not byPay treasure to APPFunction key ReturnMerchants APP, the callback function is not effective, can be passedAppState.addEventListenerListen for events to request backend apis to optimize this user experience.

Set up alipay in the codeURL Schemes, the following exampleuiwjspayIs to define theschemeYou can also define theta asalipay + appid.appidThe application ID assigned to the developer for Alipay, used to expressschemeUniqueness.

Alipay.setAlipayScheme('uiwjspay');
Copy the code

At the request of paymentpayInfoMust containreturn_url=uiwjspay://.return_urlIs definedscheme= >uiwjspay://, will returnResult of alipay order payment status

// payInfo is the background concatenated payment parameter. This parameter must contain 'return_URL = UIWjSPay ://'
Alipay.alipay(payInfo, (res) = >console.log(res))
Copy the code

Use of theURL SchemesWhitelisted, inIos /< app name >/ info.plistadd

<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>
Copy the code

Change ios/< app name >/ appdelegate. m add 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];
}
Copy the code

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>
Copy the code

Add OS_ACTIVITY_MODE disable to Product -> Scheme -> Edit Scheme -> Run -> Arguments -> Environment Variables

other

The current project is initialized with @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 --github -- account uiwjs --author-name"Kenny Wong" --author-email "[email protected]"
Copy the code

The development of

cd example   The root directory does not need to be installed
yarn install # install dependencies

cd ios     Go to the example/ios directory to install dependencies
pod instll # install dependencies
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

React Native alipay is used by @uiW/React-native Alipay

Matters needing attention

Install dependencies

API

`Alipay.alipay`pay

`Alipay.authInfo`Login authorization

`Alipay.getVersion`Obtaining the SDK Version

Alipay returns to app iOS Settings

Error handling

other

The development of

Related links

React Native alipay is used by @uiW/React-native Alipay

Matters needing attention

Install dependencies

API

Alipay.alipaypay

Alipay.authInfoLogin authorization

Alipay.getVersionObtaining the SDK Version

Alipay returns to app iOS Settings

Error handling

other

The development of

Related links

Related Posts

Ebit – Source code reuse bit workflow

ES6 课 程 学 报 (3) — Class

JS asynchronous solution

`Alipay.alipay`pay

`Alipay.authInfo`Login authorization

`Alipay.getVersion`Obtaining the SDK Version

ES6 课程学报 (3) — Class