@yuno-payments/yuno-sdk-react-native 1.0.16

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@yuno-payments/yuno-sdk-react-native",
+  "version": "1.0.16",
+  "description": "Yuno React Native SDK empowers you to create seamless payment experiences in your native Android and iOS apps built with React Native.",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "yuno",
+    "payments",
+    "payment-gateway",
+    "payment-sdk",
+    "mobile-payments"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuno-payments/yuno-sdk-react-native.git"
+  },
+  "author": "Yuno <support@y.uno> (https://y.uno)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yuno-payments/yuno-sdk-react-native/issues"
+  },
+  "homepage": "https://y.uno",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.70.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.72.0",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "typescript": "^5.0.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}
+

package/src/YunoPaymentMethods.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useCallback } from 'react';
+import {
+  requireNativeComponent,
+  NativeModules,
+  NativeEventEmitter,
+  ViewStyle,
+  StyleProp,
+  Platform,
+} from 'react-native';
+
+/**
+ * Event emitted when a payment method is selected or deselected.
+ */
+export interface PaymentMethodSelectedEvent {
+  /** Whether a payment method is currently selected */
+  isSelected: boolean;
+}
+
+/**
+ * Event emitted when an error occurs in the payment methods view.
+ */
+export interface PaymentMethodErrorEvent {
+  /** Error message */
+  message: string;
+}
+
+/**
+ * Props for the YunoPaymentMethods component.
+ */
+export interface YunoPaymentMethodsProps {
+  /** Checkout session ID from Yuno API */
+  checkoutSession: string;
+
+  /** ISO country code (e.g., 'US', 'BR', 'CO') */
+  countryCode: string;
+
+  /**
+   * Callback invoked when a payment method is selected or deselected.
+   * @param event - Event containing selection state
+   */
+  onPaymentMethodSelected?: (event: PaymentMethodSelectedEvent) => void;
+
+  /**
+   * Callback invoked when an error occurs.
+   * @param event - Event containing error information
+   */
+  onPaymentMethodError?: (event: PaymentMethodErrorEvent) => void;
+
+  /** Custom styles for the view container */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Native component interface
+interface NativeYunoPaymentMethodsProps {
+  checkoutSession: string;
+  countryCode: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const LINKING_ERROR =
+  `The package '@yuno/yuno-sdk-react-native' doesn't seem to be linked correctly for native views. Make sure:\n\n` +
+  Platform.select({ ios: "- Run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n' +
+  '- The Yuno SDK is properly initialized\n';
+
+// Get native module for event emitter
+const YunoSdkNative = NativeModules.YunoSdk;
+
+// Create event emitter
+let eventEmitter: NativeEventEmitter | null = null;
+if (YunoSdkNative) {
+  eventEmitter = new NativeEventEmitter(YunoSdkNative);
+}
+
+// Require the native component
+const NativeYunoPaymentMethodsView = requireNativeComponent<NativeYunoPaymentMethodsProps>(
+  'YunoPaymentMethodsView'
+);
+
+/**
+ * YunoPaymentMethods Component
+ *
+ * A React Native component that displays available payment methods using the native Yuno SDK.
+ * This component embeds the native `PaymentMethodListViewComponent` from the Yuno Android SDK.
+ *
+ * **Platform Support:**
+ * - ✅ Android (using Jetpack Compose)
+ * - ⚠️ iOS (coming soon)
+ *
+ * **Important:**
+ * - The Yuno SDK must be initialized before using this component
+ * - Requires a valid `checkoutSession` from the Yuno API
+ * - The component will automatically update the checkout session in the native SDK
+ *
+ * @example
+ * ```tsx
+ * import { YunoPaymentMethods } from '@yuno/yuno-sdk-react-native';
+ *
+ * function MyPaymentScreen() {
+ *   const [checkoutSession, setCheckoutSession] = useState('your_checkout_session_id');
+ *   const [isMethodSelected, setIsMethodSelected] = useState(false);
+ *
+ *   return (
+ *     <YunoPaymentMethods
+ *       checkoutSession={checkoutSession}
+ *       countryCode="BR"
+ *       onPaymentMethodSelected={(event) => {
+ *         setIsMethodSelected(event.isSelected);
+ *       }}
+ *       onPaymentMethodError={(event) => {
+ *         console.error('Error loading payment methods:', event.message);
+ *       }}
+ *       style={{ height: 400 }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * This component is similar to Flutter's `YunoPaymentMethods` widget.
+ * It provides a native UI experience consistent with apps that use the Yuno SDK directly.
+ *
+ * The native component handles:
+ * - Loading available payment methods
+ * - Displaying saved payment methods
+ * - User interactions and selections
+ * - Error states and loading indicators
+ *
+ * @public
+ */
+export const YunoPaymentMethods: React.FC<YunoPaymentMethodsProps> = ({
+  checkoutSession,
+  countryCode,
+  onPaymentMethodSelected,
+  onPaymentMethodError,
+  style,
+}) => {
+  // Set up event listeners
+  useEffect(() => {
+    if (!eventEmitter) {
+      console.warn(LINKING_ERROR);
+      return;
+    }
+
+    const subscriptions: any[] = [];
+
+    // Listen for payment method selection events
+    if (onPaymentMethodSelected) {
+      const selectionListener = eventEmitter.addListener(
+        'onPaymentMethodSelected',
+        (event: PaymentMethodSelectedEvent) => {
+          onPaymentMethodSelected(event);
+        }
+      );
+      subscriptions.push(selectionListener);
+    }
+
+    // Listen for error events
+    if (onPaymentMethodError) {
+      const errorListener = eventEmitter.addListener(
+        'onPaymentMethodError',
+        (event: PaymentMethodErrorEvent) => {
+          onPaymentMethodError(event);
+        }
+      );
+      subscriptions.push(errorListener);
+    }
+
+    // Cleanup listeners on unmount
+    return () => {
+      subscriptions.forEach((sub) => {
+        if (sub && sub.remove) {
+          sub.remove();
+        }
+      });
+    };
+  }, [onPaymentMethodSelected, onPaymentMethodError]);
+
+  // Platform check
+  if (Platform.OS !== 'android') {
+    console.warn(
+      'YunoPaymentMethods: This component is currently only supported on Android. iOS support coming soon.'
+    );
+    return null;
+  }
+
+  return (
+    <NativeYunoPaymentMethodsView
+      checkoutSession={checkoutSession}
+      countryCode={countryCode}
+      style={style}
+    />
+  );
+};
+