@gyjshow/react-native-alipay

A lightweight React Native plugin for integrating Alipay payments on both iOS and Android. Supports initiating payments, setting iOS scheme, and fetching the Alipay SDK version.

Features

• 🔹 Unified API for iOS & Android
• 🔹 Supports initiating Alipay payments
• 🔹 Fetch Alipay SDK version
• 🔹 Easy to configure and use in React Native >= 0.83

Installation

# Using npm
npm install @gyjshow/react-native-alipay

# Using pnpm
pnpm add @gyjshow/react-native-alipay

iOS

1. Add your URL scheme in Info.plist (this will be used in setAlipayScheme):

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your_app_scheme</string>
    </array>
  </dict>
</array>

2. Install pods:

cd ios
pod install

Android

No additional configuration required beyond normal React Native setup.

Usage

Import

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

Set iOS Scheme (iOS only)

Alipay.setAlipayScheme('your_app_scheme');

Initiate Payment

const payInfo = 'your_order_string_from_server';
try {
  const result = await Alipay.alipay(payInfo);
  console.log('Payment result:', result);
} catch (error) {
  console.error('Payment failed:', error);
}

Get Alipay SDK Version

const version = await Alipay.getVersion();
console.log('Alipay SDK version:', version);

API Reference

| Method | Params | Returns | Description | | --------------------------------- | ------------------------- | ----------------- | ----------------------------------------------------- | | setAlipayScheme(scheme: string) | scheme - iOS URL scheme | void | Sets the Alipay URL scheme for iOS | | alipay(payInfo: string) | payInfo - order string | Promise<string> | Initiates Alipay payment, resolves with result string | | getVersion() | - | Promise<string> | Returns the current Alipay SDK version |

Example

import React, { useEffect } from 'react';
import { Button, View, Alert, Platform } from 'react-native';
import Alipay from '@gyjshow/react-native-alipay';

export default function App() {
  useEffect(() => {
    if (Platform.OS === 'ios') {
      Alipay.setAlipayScheme('myapp');
    }
  }, []);

  const handlePay = async () => {
    try {
      const result = await Alipay.alipay('order_info_from_server');
      Alert.alert('Payment Result', result);
    } catch (e) {
      Alert.alert('Payment Failed', e.message);
    }
  };

  return (
    <View>
      <Button title="Pay with Alipay" onPress={handlePay} />
    </View>
  );
}

Notes

• Ensure your server generates valid Alipay order strings.
• On iOS, setAlipayScheme must be called before initiating payment.
• Test payments in sandbox mode before production.

License

MIT