boxpay-checkout-reactnative-sdk 1.0.16 → 1.0.17-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxpay-checkout-reactnative-sdk",
-  "version": "1.0.16",
+  "version": "1.0.17-beta1",
   "description": "Boxpay Payment Gateway",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -18,12 +18,22 @@
   "files": [
     "src",
     "lib",
-    "assets",
     "android",
     "ios",
     "cpp",
     "*.podspec",
     "react-native.config.js",
+    "!android/build",
+    "!android/app",
+    "!android/.gradle",
+    "!android/.cxx",
+    "!android/local.properties",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/gradle",
+    "!ios/build",
+    "!ios/Pods",
+    "!ios/DerivedData",
     "!**/__tests__",
     "!**/__mocks__",
     "!**/node_modules"
@@ -33,7 +43,6 @@
     "clean": "del-cli lib",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "build": "bob build",
-    "prepare": "echo \"{ \\\"version\\\": \\\"$(node -p 'require(\"./package.json\").version')\\\" }\" > src/sdk-version.json && cp -r assets lib/assets",
     "release": "release-it --only-version",
     "android": "expo run:android",
     "ios": "expo run:ios"
@@ -80,17 +89,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*",
-    "react-native-paper": ">=5.0.0",
-    "react-native-shimmer-placeholder": ">=2.0.0",
-    "react-native-toast-message": ">=2.0.0",
-    "react-native-webview": ">=13.0.0",
-    "react-native-country-picker-modal": "^2.0.0",
-    "react-native-render-html" : "^6.3.4",
-
-    "lottie-react-native": "^7.3.4",
-    "react-native-modal": "^14.0.0-rc.1",
-    "react-native-svg": ">=15.0.0"
+    "react-native": "*"
   },
   "packageManager": "yarn@3.6.1",
   "jest": {
@@ -145,12 +144,7 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "1.0.16"
-  },
-  "dependencies": {
-    "axios": "^1.11.0",
-    "base-64": "^1.0.0",
-    "currency-symbol-map": "^5.1.0"
+    "version": "1.0.14-beta4"
   },
   "module": "lib/module/index.js"
 }

package/src/index.tsx

@@ -1,26 +1,119 @@
-import type { BoxpayCheckoutProps} from './interface';
-import { View } from 'react-native';
-import styles from './styles/indexStyles';
-import CheckoutContainer from './navigation';
+import { useEffect, useRef, useState } from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import type {
+  BoxpayCheckoutProps,
+  BoxpayElementsProps,
+  UIConfiguration,
+} from './interface';
+import { ConfigurationOptions, SICheckboxState, UIConfigurationOptions } from './interface';
+import {
+  BoxPayElements,
+  payElements,
+  startCheckout,
+  onPaymentResult as subscribePaymentResult,
+} from './native';
 
-const BoxpayCheckout = ({
+// ── Full-screen checkout (mirrors Android display()) ──────────────────────────
+export const BoxpayCheckout = ({
   token,
   configurationOptions = null,
   onPaymentResult,
   shopperToken = null,
-  uiConfiguration = null
+  uiConfiguration = null,
 }: BoxpayCheckoutProps) => {
+  useEffect(() => {
+    const sub = subscribePaymentResult((r) => onPaymentResult?.(r));
+    return () => sub.remove();
+  }, [onPaymentResult]);
+
+  useEffect(() => {
+    startCheckout(token, buildOptions(configurationOptions, uiConfiguration, shopperToken));
+  }, [token]);
+
+  return <View style={styles.screenView} />;
+};
+
+// ── Embedded elements with merchant button (mirrors createElementsView) ───────
+export const BoxpayElements = ({
+  token,
+  configurationOptions = null,
+  onPaymentResult,
+  shopperToken = null,
+  uiConfiguration = null,
+  paymentMethodList,
+}: BoxpayElementsProps) => {
+  const elementsRef = useRef(null);
+  const [payable, setPayable] = useState(false);
+
+  useEffect(() => {
+    const sub = subscribePaymentResult((r) => onPaymentResult?.(r));
+    return () => sub.remove();
+  }, [onPaymentResult]);
+
+  const textInputFields = uiConfiguration?.[UIConfigurationOptions.TextInputFields];
+
   return (
     <View style={styles.screenView}>
-      <CheckoutContainer
-      token={token}
-      configurationOptions={configurationOptions}
-      onPaymentResult={onPaymentResult}
-      shopperToken={shopperToken}
-      uiConfiguration={uiConfiguration}
+      <BoxPayElements
+        ref={elementsRef}
+        style={styles.elements}
+        config={{
+          token,
+          isTestEnv: configurationOptions?.[ConfigurationOptions.EnableSandboxEnv] === true,
+          shopperToken,
+          paymentMethodList,
+          fontFamily: uiConfiguration?.[UIConfigurationOptions.FontFamily],
+          ctaBorderRadius: uiConfiguration?.[UIConfigurationOptions.CTABorderRadius],
+          focusedTextInputBorderColor: textInputFields?.focusedTextInputBorderColor,
+          unfocusedTextInputBorderColor: textInputFields?.unfocusedTextInputBorderColor,
+        }}
+        onPayableChanged={(e: any) => setPayable(e.nativeEvent.payable)}
       />
+      <Button title="Pay" disabled={!payable} onPress={() => payElements(elementsRef.current)} />
     </View>
   );
 };
 
-export default BoxpayCheckout;
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function buildOptions(
+  config: Partial<Record<ConfigurationOptions, boolean | SICheckboxState | null>> | null,
+  ui: UIConfiguration | null,
+  shopperToken: string | null,
+) {
+  const textInputFields = ui?.[UIConfigurationOptions.TextInputFields];
+  const siState = config?.[ConfigurationOptions.SICheckBoxState] as SICheckboxState | null | undefined;
+  const si = siFlags(siState);
+
+  return {
+    shopperToken: shopperToken ?? '',
+    enableSandboxEnv: config?.[ConfigurationOptions.EnableSandboxEnv] === true,
+    showSuccessScreen: config?.[ConfigurationOptions.ShowBoxpaySuccessScreen] === true,
+    showFailedScreen: config?.[ConfigurationOptions.ShowBoxpayFailedScreen] === true,
+    showQROnLoad: config?.[ConfigurationOptions.ShowUPIQROnLoad] === true,
+    isSICheckBoxChecked: si.checked,
+    isSICheckBoxEnabled: si.enabled,
+    fontFamily: ui?.[UIConfigurationOptions.FontFamily],
+    ctaBorderRadius: ui?.[UIConfigurationOptions.CTABorderRadius],
+    focusedTextInputBorderColor: textInputFields?.focusedTextInputBorderColor,
+    unfocusedTextInputBorderColor: textInputFields?.unfocusedTextInputBorderColor,
+  };
+}
+
+function siFlags(state: SICheckboxState | null | undefined): { checked: boolean; enabled: boolean } {
+  switch (state) {
+    case SICheckboxState.CHECKED_AND_ENABLED:   return { checked: true,  enabled: true  };
+    case SICheckboxState.CHECKED_AND_DISABLED:  return { checked: true,  enabled: false };
+    case SICheckboxState.UNCHECKED_AND_ENABLED: return { checked: false, enabled: true  };
+    default:                                    return { checked: false, enabled: false };
+  }
+}
+
+const styles = StyleSheet.create({
+  screenView: {
+    flex: 1,
+  },
+  elements: {
+    flex: 1,
+  },
+});