React Native Alipay — это основанный на React Native плагин для оплаты через Alipay, который поддерживает iOS и Android. Он подходит для интеграции платёжных функций Alipay в приложения для бизнеса.
Плагин позволяет приложениям для бизнеса интегрировать платёжный функционал Alipay. Если пользователь уже установил приложение Alipay, то приложение для бизнеса перенаправит его в Alipay для совершения платежа. После завершения платежа пользователь будет возвращён в приложение для бизнеса, где будет показан результат платежа. Если у пользователя не установлено приложение Alipay, приложение для бизнеса запустит веб-страницу для совершения платежа, где пользователь сможет войти в свой аккаунт Alipay и совершить платёж.
Особенности:
Для установки плагина выполните следующие шаги:
yarn add @uiw/react-native-alipay
# react-native version >= 0.60+
$ cd ios && pod install
API:
Alipay.alipay(payInfo: string): Promise — метод для совершения платежа через Alipay. Обратите внимание, что возвращаемый результат представляет собой строку. Платёжная система Alipay требует настройки схем URL (URL Schemes), чтобы обеспечить поддержку платежей и функцию возврата в приложение (см. раздел «Платежи через Alipay»).
Пример использования:
import Alipay from '@uiw/react-native-alipay';
// Настройка схем URL для Alipay, которые должны быть уникальными. Можно использовать bundle Identifier.
// Схема = «alipay» + APPID, где APPID — идентификатор приложения, предоставленный Alipay разработчику.
Alipay.setAlipayScheme(scheme);
async function aliPay() {
// Платёж через Alipay
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¬ify_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×tamp=2020-07-09+12%3A16%3A16&version=1.0';
const resule = await Alipay.alipay(payInfo);
console.log('alipay:resule-->>>', resule);
}
``` **Текст запроса:**
```json
{
"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_trade_app_pay_response»: {
«код»: «10000»,
«сообщение»: «Успех»,
«app_id»: «2021001172656340»,
«auth_app_id»: «2021001172656340»,
«кодировка»: «UTF-8»,
«метка времени»: «2020–07–08 21:30:14»,
«out_trade_no»: «123123213123214»,
«общая сумма»: «0,01»,
«trade_no»: «2020070822001414841426413774»,
«seller_id»: «2088421915791034»
},
«подпись»: «LY7wCsNLp+QnDqCq6VelY/RvyK7ZGY8wsXoKvS+Or7JjONLDUx5P6lDgqRKkpkng7br3y6GZzfGKaZ88Tf4eMnBMKyqU+huR2Um47xUxP383njvHlxuQZsSTLQZRswy4wmb/fPkFfvyH6Or6+oj0eboePOTu63bNr+h03w0QnP4znuHpfRuoVgWpsYh/6B1DL+4xfWRKJ21zm1SV9Feo9RWqnyTaGZyFVi6IKge0dUCYs9hXju95fOUVUOx5YflOFtSEnZafY9Ls4FCRQE1ANkjaKiKIE0+c4c4sEVEf/9Dwh88N+aSQOoLT+AV4RpjMoA8hF2k+vv2OKNeqr6SYGQ==»,
«тип подписи»: «RSA2»
},
«resultStatus»: «9000»,
«памятка»: ""
}
``` **Алипэй.гетВэрсион();**
**консоль.лог('версия:', версия);**}
支付宝App
в приложение продавца
, то это происходит через системную функцию переключения, а не через функциональную клавишу приложения 支付宝APP
, которая возвращает пользователя в приложение продавца, функция обратного вызова не работает. Можно использовать AppState.addEventListener
, чтобы отслеживать события и запрашивать фоновый API для оптимизации этого взаимодействия с пользователем.URL Schemes
) (https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/App.js#L7). Пример uiwjspay
— это определённая схема, вы также можете определить её как алипэй
+ appid
, где appid
— это идентификатор приложения, предоставленный Алипэй разработчику, который используется для уникальности схемы.Alipay.setAlipayScheme('uiwjspay');
payInfo
(https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/App.js#L11) должен содержать return_url=uiwjspay://
(https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ee7c6f282f7f39f992e0932b/example/App.js#L11), значение которого равно определённой схеме => uiwjspay://
, тогда будет возвращён результат состояния оплаты заказа Алипэй (https://opendocs.alipay.com/open/204/105301#%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E7%A4%BA%E4%BE%8B%EF%BC%88iOS%7CAndroid%EF%BC%89).// payInfo — это параметры оплаты, которые были объединены на бэкэнде, этот параметр должен включать `return_url=uiwjspay://`.
Alipay.alipay(payInfo, (res)=>console.log(res))
ios/<имя приложения>/Info.plist
(https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/ios/example/Info.plist#L23-L41).<key>LSApplicationQueriesSchemes</key>
<array>
<string>алипэй</string>
</array>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Редактор</string>
<key>CFBundleURLName</key>
<string></string>
<key>CFBundleURLSchemes</key>
<array>
<string>uiwjspay</string>
</array>
</dict>
</array>
ios/<имя приложения>/AppDelegate.m
(https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/ios/example/AppDelegate.m#L60-L70), добавив следующий код:#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];
}
— iOS: xcrun simctl openurl booted uiwjspay://
— Android: adb shell am start -W -a android.intent.action.VIEW -d "uiwjspay://test/router" com.uiwjspay
[NetworkInfo] Signal strength query returned error: Error Domain=NSPOSIXErrorDomain Code=13 "Permission denied", descriptor: <CTServiceDescriptor 0x283317100, domain=1, instance=1>
В Product
-> Scheme
-> Edit Scheme
-> Run
-> Arguments
-> Environment Variables
добавьте OS_ACTIVITY_MODE
disable
.
Текущий проект основан на @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 "wowohoo@qq.com"
cd example # Перейдите в каталог примера проекта, корневой каталог не требует установки, иначе возникнет ошибка.
yarn install # Установите зависимости.
cd ios # Перейдите в каталог ios проекта для установки зависимостей.
pod instll # Установите зависимости.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )