expo-openpay 0.1.0

package/ios/src/ExpoOpenpayModule.swift

@@ -0,0 +1,105 @@
+import ExpoModulesCore
+import OpenpayKit
+
+public class ExpoOpenpayModule: Module {
+  private var openpay: Openpay?
+
+  private func isInitialized(_ promise: Promise, _ action: (Openpay) -> Void) {
+    guard let openpay = openpay else {
+      return promise.reject("OPENPAY_NOT_INITIALIZED", "Openpay is not initialized")
+    }
+
+    action(openpay)
+  }
+
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('Openpay')` in JavaScript.
+    Name("Openpay")
+
+    AsyncFunction("initialize") {
+      (
+        merchantId: String, apiKey: String, isProduction: Bool, countryCode: String?,
+        promise: Promise
+      ) in
+
+      guard !merchantId.isEmpty, !apiKey.isEmpty else {
+        return promise.reject(
+          "OPENPAY_INVALID_PARAMS", "Merchant ID and API Key are required")
+      }
+
+      let cc = countryCode?.uppercased() ?? "MX"
+
+      guard ["CO", "MX", "PE"].contains(cc) else {
+        return promise.reject(
+          "OPENPAY_INVALID_COUNTRY_CODE",
+          "Invalid country code: \(cc). Please use 'MX' for Mexico, 'CO' for Colombia, 'PE' for Peru, or leave empty to default to 'MX'."
+        )
+      }
+
+      openpay = Openpay(
+        withMerchantId: merchantId,
+        andApiKey: apiKey,
+        isProductionMode: isProduction,
+        isDebug: false,
+        countryCode: cc
+      )
+      return promise.resolve("Openpay initialized")
+    }
+
+    AsyncFunction("isInitialized") { (promise: Promise) in
+      if openpay != nil {
+        return promise.resolve(true)
+      } else {
+        return promise.resolve(false)
+      }
+    }
+
+    AsyncFunction("createDeviceSessionId") { (promise: Promise) in
+      isInitialized(promise) { openpay in
+        openpay.createDeviceSessionId(
+          successFunction: { sessionId in return promise.resolve(sessionId) },
+          failureFunction: { error in
+            return promise.reject(
+              "OPENPAY_DEVICE_SESSION_ID_ERROR", error.localizedDescription)
+          })
+      }
+    }.runOnQueue(.main)  // Must run on main thread due to SDK UI/internal thread constraints
+
+    AsyncFunction("tokenizeCard") {
+      (
+        cardNumber: String, holderName: String, expirationYear: String, expirationMonth: String,
+        cvv2: String, promise: Promise
+      ) in
+
+      isInitialized(promise) { openpay in
+        let card = TokenizeCardRequest(
+          cardNumber: cardNumber, holderName: holderName, expirationYear: expirationYear,
+          expirationMonth: expirationMonth, cvv2: cvv2)
+
+        openpay.tokenizeCard(card: card) { (OPToken) in
+          return promise.resolve(OPToken.id)
+        } failureFunction: { error in
+          return promise.reject("OPENPAY_CARD_TOKEN_ERROR", error.localizedDescription)
+        }
+      }
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(OpenpayView.self) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { (view: OpenpayView, url: URL) in
+        if view.webView.url != url {
+          view.webView.load(URLRequest(url: url))
+        }
+      }
+
+      Events("onLoad")
+    }
+  }
+}

package/ios/src/ExpoOpenpayView.swift

@@ -0,0 +1,38 @@
+import ExpoModulesCore
+import WebKit
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class OpenpayView: ExpoView {
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+  var delegate: WebViewDelegate?
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    delegate = WebViewDelegate { url in
+      self.onLoad(["url": url])
+    }
+    webView.navigationDelegate = delegate
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+}
+
+class WebViewDelegate: NSObject, WKNavigationDelegate {
+  let onUrlChange: (String) -> Void
+
+  init(onUrlChange: @escaping (String) -> Void) {
+    self.onUrlChange = onUrlChange
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation) {
+    if let url = webView.url {
+      onUrlChange(url.absoluteString)
+    }
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "expo-openpay",
+  "version": "0.1.0",
+  "description": "Expo module for Openpay integration",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-openpay",
+    "ExpoOpenpay",
+    "openpay"
+  ],
+  "repository": "https://github.com/jgallaway2011/expo-openpay",
+  "bugs": {
+    "url": "https://github.com/jgallaway2011/expo-openpay/issues"
+  },
+  "author": "jgallaway2011 <jgallaway2011@gmail.com> (https://github.com/jgallaway2011)",
+  "license": "MIT",
+  "homepage": "https://github.com/jgallaway2011/expo-openpay#readme",
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@types/react": "~19.0.10",
+    "expo": "~53.0.12",
+    "expo-module-scripts": "^4.1.6",
+    "react-native": "0.79.4",
+    "react-native-svg": "^15.14.0"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
+  }
+}

package/src/ExpoOpenpay.types.ts

@@ -0,0 +1,47 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type OnLoadEventPayload = {
+  url: string;
+};
+
+export type ExpoOpenpayModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type CountryCode = "MX" | "CO" | "PE";
+
+export type ExpoOpenpayViewProps = {
+  url: string;
+  onLoad: (event: { nativeEvent: OnLoadEventPayload }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export interface OpenpayInitOptions {
+  merchantId: string;
+  apiKey: string;
+  isProduction: boolean;
+  isDebug: boolean;
+  countryCode?: CountryCode; // Optional, defaults to 'MX'
+}
+
+export interface CardData {
+  cardNumber: string;
+  holderName: string;
+  expirationMonth: string; // MM as string, e.g. '05'
+  expirationYear: string; // YY as string, e.g. '25'
+  cvv2: string; // CVV code
+}
+
+export interface OpenpayToken {
+  id: string;
+  brand: string;
+  card_number: string;
+  holder_name: string;
+  expiration_year: number;
+  expiration_month: number;
+  type: string;
+}

package/src/ExpoOpenpayModule.ts

@@ -0,0 +1,29 @@
+import { requireNativeModule } from "expo";
+
+interface ExpoOpenpayModule {
+  initialize(
+    merchantId: string,
+    apiKey: string,
+    isProduction: boolean,
+    countryCode?: "MX" | "CO" | "PE"
+  ): Promise<string>;
+  isInitialized(): Promise<boolean>;
+  createDeviceSessionId(): Promise<string>;
+  tokenizeCard(
+    cardNumber: string,
+    holderName: string,
+    expirationYear: string,
+    expirationMonth: string,
+    cvv2: string
+  ): Promise<string>;
+}
+
+// This call loads the native module object from the JSI.
+const Openpay = requireNativeModule<ExpoOpenpayModule>("Openpay");
+export default Openpay;
+export const {
+  initialize,
+  isInitialized,
+  tokenizeCard,
+  createDeviceSessionId,
+} = Openpay;

package/src/ExpoOpenpayModule.web.ts

@@ -0,0 +1,15 @@
+import { registerWebModule, NativeModule } from 'expo';
+
+import { ExpoOpenpayModuleEvents } from './ExpoOpenpay.types';
+
+class ExpoOpenpayModule extends NativeModule<ExpoOpenpayModuleEvents> {
+  PI = Math.PI;
+  async setValueAsync(value: string): Promise<void> {
+    this.emit('onChange', { value });
+  }
+  hello() {
+    return 'Hello world! 👋';
+  }
+}
+
+export default registerWebModule(ExpoOpenpayModule, 'ExpoOpenpayModule');

package/src/ExpoOpenpayView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from "expo";
+import * as React from "react";
+
+import { ExpoOpenpayViewProps } from "./ExpoOpenpay.types";
+
+const NativeView: React.ComponentType<ExpoOpenpayViewProps> =
+  requireNativeView("Openpay");
+
+export default function ExpoOpenpayView(props: ExpoOpenpayViewProps) {
+  return <NativeView {...props} />;
+}

package/src/ExpoOpenpayView.web.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export default function ExpoRadialChartView() {
+  return <div>Not implemented</div>;
+}

package/src/assets/AmexLogo.tsx

@@ -0,0 +1,24 @@
+import Svg, { SvgProps, Path } from "react-native-svg";
+
+const AmexLogo: React.FC<SvgProps> = (props) => (
+  <Svg viewBox="0 0 70 70" {...props}>
+    <Path
+      d="m59.4 49.7-2.6-2.9-2.7 2.9H37.4V36.2h-5.3l6.6-15.1h6.4l2.3 5.2v-5.2h8l1.4 3.9 1.4-3.9h6.1v-2.3c0-1.4-1.1-2.5-2.5-2.5H8.2c-1.4 0-2.5 1.1-2.5 2.5v32.5c0 1.4 1.1 2.5 2.5 2.5h53.6c1.4 0 2.5-1.1 2.5-2.5v-1.6z"
+      fill="#0071ce"
+    />
+    <Path
+      d="M60.1 48.1h4.2l-5.5-5.9 5.5-5.8h-4.1l-3.5 3.8-3.4-3.8h-4.2l5.6 5.9-5.6 5.8h4.1l3.5-3.8z"
+      fill="#0071ce"
+    />
+    <Path
+      d="M42.4 45.4v-1.8H49v-2.7h-6.6v-1.8h6.7v-2.7h-9.9v11.7h9.9v-2.7zM61.2 34.7h3V22.9l-4.8.1-2.6 7.3-2.7-7.3h-5v11.7h3.2v-8.2l3 8.2h2.8l3.1-8.2z"
+      fill="#0071ce"
+    />
+    <Path
+      d="M44 23h-4.1l-5.2 11.7h3.5l1-2.3h5.4l1 2.3h3.6zm-3.7 6.7 1.6-3.8 1.6 3.8zM61.4 41.9l2.9 3.2v-6.4z"
+      fill="#0071ce"
+    />
+  </Svg>
+);
+
+export default AmexLogo;

package/src/assets/MCLogo.tsx

@@ -0,0 +1,19 @@
+import Svg, { SvgProps, Path } from "react-native-svg";
+
+const MCLogo: React.FC<SvgProps> = (props) => (
+  <Svg width={203.209} height={144} viewBox="0 0 152.407 108" {...props}>
+    <Path d="M0 0h152.407v108H0z" fill="none" />
+    <Path d="M60.412 25.697h31.5v56.606h-31.5z" fill="#ff5f00" />
+    <Path
+      d="M382.208 306a35.94 35.94 0 0 1 13.75-28.303 36 36 0 1 0 0 56.606A35.94 35.94 0 0 1 382.208 306"
+      fill="#eb001b"
+      transform="translate(-319.796 -252)"
+    />
+    <Path
+      d="M454.203 306a35.999 35.999 0 0 1-58.245 28.303 36.005 36.005 0 0 0 0-56.606A35.999 35.999 0 0 1 454.203 306M450.769 328.308v-1.16h.467v-.235h-1.19v.236h.468v1.159Zm2.31 0v-1.398h-.364l-.42.962-.42-.962h-.365v1.398h.258v-1.054l.393.908h.267l.394-.91v1.056Z"
+      fill="#f79e1b"
+      transform="translate(-319.796 -252)"
+    />
+  </Svg>
+);
+export default MCLogo;

package/src/assets/VisaLogo.tsx

@@ -0,0 +1,11 @@
+import Svg, { SvgProps, Path } from "react-native-svg";
+
+const VisaLogo: React.FC<SvgProps> = (props) => (
+  <Svg viewBox="0 0 3384.54 2077.85" {...props}>
+    <Path
+      d="m1461.26 739.84-251.37 599.74h-164l-123.7-478.62c-7.51-29.48-14.04-40.28-36.88-52.7-37.29-20.23-98.87-39.21-153.05-50.99l3.68-17.43h263.99c33.65 0 63.9 22.4 71.54 61.15l65.33 347.04 161.46-408.2h163zm642.58 403.93c.66-158.29-218.88-167.01-217.37-237.72.47-21.52 20.96-44.4 65.81-50.24 22.23-2.91 83.48-5.13 152.95 26.84l27.25-127.18c-37.33-13.55-85.36-26.59-145.12-26.59-153.35 0-261.27 81.52-262.18 198.25-.99 86.34 77.03 134.52 135.81 163.21 60.47 29.38 80.76 48.26 80.53 74.54-.43 40.23-48.23 57.99-92.9 58.69-77.98 1.2-123.23-21.1-159.3-37.87l-28.12 131.39c36.25 16.63 103.16 31.14 172.53 31.87 162.99 0 269.61-80.51 270.11-205.19m404.94 195.81h143.49l-125.25-599.74h-132.44c-29.78 0-54.9 17.34-66.02 44l-232.81 555.74h162.91L2291 1250h199.05zm-173.11-212.5 81.66-225.18 47 225.18zm-652.74-387.24-128.29 599.74H1399.5l128.34-599.74z"
+      fill="#fff"
+    />
+  </Svg>
+);
+export default VisaLogo;

package/src/assets/index.ts

@@ -0,0 +1,3 @@
+export { default as AmexLogo } from "./AmexLogo";
+export { default as MCLogo } from "./MCLogo";
+export { default as VisaLogo } from "./VisaLogo";

package/src/components/OPCardForm.tsx

@@ -0,0 +1,303 @@
+// import { useEffect } from "react";
+import {
+  KeyboardAvoidingView,
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+
+import { FormProvider, FormThemeColors, FormThemeProvider } from "../context";
+// import { initialize, createDeviceSessionId } from "../ExpoOpenpayModule";
+import { SubmitButton } from "./forms";
+import {
+  OPCardNumberInput,
+  OPCvv2Input,
+  OPExpInput,
+  OPExpMonthInput,
+  OPExpYearInput,
+  OPHolderNameInput,
+} from ".";
+
+// type ThemeColors = {
+//   background: string;
+//   text: string;
+//   error: string;
+//   primary: string;
+//   placeholder: string;
+// };
+
+// type ThemeProp = {
+//   light: Partial<ThemeColors>;
+//   dark: Partial<ThemeColors>;
+// };
+
+type CardFormProps = {
+  apiKey: string;
+  countryCode?: "MX" | "CO" | "PE";
+  isProduction: boolean;
+  merchantId: string;
+  options?: {
+    expIsMMYY?: boolean;
+    groupedView?: boolean;
+    handleSubmit?: () => any;
+    styling?: {
+      buttonStyle?: StyleProp<ViewStyle>;
+      buttonTextStyle?: StyleProp<TextStyle>;
+      colorScheme?: "light" | "dark";
+      darkTheme?: FormThemeColors;
+      formFieldStyle?: StyleProp<ViewStyle>;
+      defaultStyling?: boolean;
+      formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
+      formScrollViewStyle?: StyleProp<ViewStyle>;
+      labelStyle?: StyleProp<TextStyle>;
+      lightTheme?: FormThemeColors;
+      textInputStyle?: StyleProp<TextStyle>;
+    };
+    withAnimatedTexts?: boolean;
+    withIcons?: boolean;
+    withLabels?: boolean;
+    withPlaceholders?: boolean;
+  };
+};
+
+export default function OPCardForm({
+  merchantId,
+  apiKey,
+  isProduction = false,
+  countryCode = "MX",
+  options = {},
+}: CardFormProps) {
+  const {
+    expIsMMYY = true,
+    groupedView = true,
+    handleSubmit,
+    styling = {},
+    withAnimatedTexts,
+    withIcons,
+    withLabels,
+    withPlaceholders,
+  } = options;
+
+  const {
+    buttonStyle = {},
+    buttonTextStyle = {},
+    colorScheme = "light",
+    darkTheme,
+    formFieldStyle = {},
+    defaultStyling = true,
+    formKeyboardAvoidingViewStyle = {},
+    formScrollViewStyle = {},
+    labelStyle = {},
+    lightTheme,
+    textInputStyle = {},
+  } = styling;
+
+  // useEffect(() => {
+  //   const initOP = async () => {
+  //     try {
+  //       await initialize(merchantId, apiKey, isProduction, countryCode);
+  //       await createDeviceSessionId();
+  //     } catch (e) {
+  //       console.error(e);
+  //     }
+  //   };
+  //   initOP();
+  // }, []);
+
+  return (
+    <FormThemeProvider
+      colorScheme={colorScheme}
+      dark={darkTheme}
+      light={lightTheme}
+    >
+      <FormProvider initialValues={{ cardNumber: "" }} onSubmit={handleSubmit}>
+        <KeyboardAvoidingView
+          behavior="padding"
+          enabled
+          keyboardVerticalOffset={100}
+          style={
+            defaultStyling
+              ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]
+              : formKeyboardAvoidingViewStyle
+          }
+        >
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={
+              defaultStyling
+                ? [styles.formView, formScrollViewStyle]
+                : formScrollViewStyle
+            }
+          >
+            <OPHolderNameInput
+              options={{
+                formFieldStyle,
+                defaultStyling,
+                inputStyle: {},
+                labelStyle,
+                textInputStyle,
+              }}
+              withAnimatedText={withAnimatedTexts}
+              withIcon={withIcons}
+              withLabel={withLabels}
+              withPlaceholder={withPlaceholders}
+            />
+            <OPCardNumberInput
+              options={{
+                formFieldStyle,
+                defaultStyling,
+                inputStyle: {},
+                labelStyle,
+                textInputStyle,
+              }}
+              withAnimatedText={withAnimatedTexts}
+              withIcon={withIcons}
+              withLabel={withLabels}
+              withPlaceholder={withPlaceholders}
+            />
+            {defaultStyling && groupedView ? (
+              <View style={{ flexDirection: "row", gap: 12 }}>
+                {expIsMMYY ? (
+                  <OPExpInput
+                    options={{
+                      formFieldStyle: { flex: 1 },
+                      defaultStyling,
+                      inputStyle: {},
+                      labelStyle,
+                      textInputStyle,
+                    }}
+                    withAnimatedText={withAnimatedTexts}
+                    withIcon={withIcons}
+                    withLabel={withLabels}
+                    withPlaceholder={withPlaceholders}
+                  />
+                ) : (
+                  <>
+                    <OPExpMonthInput
+                      options={{
+                        formFieldStyle: { flex: 1 },
+                        defaultStyling,
+                        inputStyle: {},
+                        labelStyle,
+                        textInputStyle,
+                      }}
+                      withAnimatedText={withAnimatedTexts}
+                      withIcon={withIcons}
+                      withLabel={withLabels}
+                      withPlaceholder={withPlaceholders}
+                    />
+                    <OPExpYearInput
+                      options={{
+                        formFieldStyle: { flex: 1 },
+                        defaultStyling,
+                        inputStyle: {},
+                        labelStyle,
+                        textInputStyle,
+                      }}
+                      withAnimatedText={withAnimatedTexts}
+                      withIcon={withIcons}
+                      withLabel={withLabels}
+                      withPlaceholder={withPlaceholders}
+                    />
+                  </>
+                )}
+                <OPCvv2Input
+                  options={{
+                    formFieldStyle: { flex: 1 },
+                    defaultStyling,
+                    inputStyle: {},
+                    labelStyle,
+                    textInputStyle,
+                  }}
+                  withAnimatedText={withAnimatedTexts}
+                  withIcon={withIcons}
+                  withLabel={withLabels}
+                  withPlaceholder={withPlaceholders}
+                />
+              </View>
+            ) : (
+              <>
+                {expIsMMYY ? (
+                  <OPExpInput
+                    options={{
+                      formFieldStyle,
+                      defaultStyling,
+                      inputStyle: {},
+                      labelStyle,
+                      textInputStyle,
+                    }}
+                    withAnimatedText={withAnimatedTexts}
+                    withIcon={withIcons}
+                    withLabel={withLabels}
+                    withPlaceholder={withPlaceholders}
+                  />
+                ) : (
+                  <>
+                    <OPExpMonthInput
+                      options={{
+                        formFieldStyle,
+                        defaultStyling,
+                        inputStyle: {},
+                        labelStyle: {},
+                        textInputStyle,
+                      }}
+                      withAnimatedText={withAnimatedTexts}
+                      withIcon={withIcons}
+                      withLabel={withLabels}
+                      withPlaceholder={withPlaceholders}
+                    />
+                    <OPExpYearInput
+                      options={{
+                        formFieldStyle,
+                        defaultStyling,
+                        inputStyle: {},
+                        labelStyle,
+                        textInputStyle,
+                      }}
+                      withAnimatedText={withAnimatedTexts}
+                      withIcon={withIcons}
+                      withLabel={withLabels}
+                      withPlaceholder={withPlaceholders}
+                    />
+                  </>
+                )}
+
+                <OPCvv2Input
+                  options={{
+                    formFieldStyle,
+                    defaultStyling,
+                    inputStyle: {},
+                    labelStyle,
+                    textInputStyle,
+                  }}
+                  withAnimatedText={withAnimatedTexts}
+                  withIcon={withIcons}
+                  withLabel={withLabels}
+                  withPlaceholder={withPlaceholders}
+                />
+              </>
+            )}
+            <SubmitButton
+              buttonStyle={buttonStyle}
+              buttonTextStyle={buttonTextStyle}
+              defaultStyling={defaultStyling}
+            />
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </FormProvider>
+    </FormThemeProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  formView: {
+    height: "100%",
+    marginHorizontal: 12,
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+});