expo-openpay 0.1.0

package/src/components/forms/TextInput.tsx

@@ -0,0 +1,329 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  Image,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import { FontAwesome6, MaterialCommunityIcons } from "@expo/vector-icons";
+
+import Styles from "../../constants/Styles";
+import { useFormThemeContext } from "../../context/FormThemeContext";
+import { AmexLogo, MCLogo, VisaLogo } from "../../assets";
+
+type StylingProps = {
+  formFieldStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<ViewStyle>;
+  textInputStyle?: StyleProp<TextStyle>;
+};
+
+type AppTextInputProps = TextInputProps & {
+  defaultStyling?: boolean;
+  fieldName?: string;
+  icon?:
+    | { type: "material"; name: keyof typeof MaterialCommunityIcons.glyphMap }
+    | { type: "fa6"; name: keyof typeof FontAwesome6.glyphMap }
+    | { type: "png"; name: "amex" | "discover" | "mc" | "visa" };
+  hasError?: boolean;
+  errorText?: string;
+  styling?: StylingProps;
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withPlaceholder?: boolean;
+};
+
+const cardIcons: Record<string, any> = {
+  amex: AmexLogo,
+  discover: require("../../assets/photos/discover_logo.png"),
+  mc: MCLogo,
+  visa: VisaLogo,
+};
+
+export default function AppTextInput({
+  defaultStyling,
+  fieldName,
+  icon,
+  onBlur,
+  onChangeText,
+  placeholder,
+  hasError = false,
+  errorText = "",
+  styling: { formFieldStyle = {}, inputStyle = {}, textInputStyle = {} } = {},
+  value,
+  withAnimatedText,
+  withIcon,
+  withPlaceholder,
+  ...otherProps
+}: AppTextInputProps) {
+  const {
+    formFieldBackground,
+    formFieldErrorBorder,
+    iconColor,
+    iconError,
+    placeholderColor,
+    placeholderError,
+    textInput,
+    textInputCarot,
+  } = useFormThemeContext();
+
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const [renderedIcon, setRenderedIcon] = useState(icon);
+
+  const activeAnim = useRef<Animated.CompositeAnimation | null>(null);
+  const animatedIsFlipped = useRef(
+    new Animated.Value(icon?.type === "png" ? 1 : 0)
+  ).current;
+  const animatedIsFocused = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedIsFocused, {
+      toValue: isFocused || !!value ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isFocused, value, animatedIsFocused]);
+
+  const placeholderStyle: Animated.WithAnimatedObject<StyleProp<TextStyle>> = {
+    position: "absolute",
+    left: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: [withIcon ? 40 : 15, withIcon ? 40 : 15],
+    }),
+    top: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: [30, 5],
+    }),
+    fontSize: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: [18, 12],
+    }),
+    color: animatedIsFocused.interpolate({
+      inputRange: [0, 1],
+      outputRange: [placeholderColor, placeholderColor],
+    }),
+  };
+
+  useEffect(() => {
+    if (icon === renderedIcon) return;
+
+    const hasBrandIcon = icon?.type === "png";
+
+    if (activeAnim.current) {
+      try {
+        activeAnim.current.stop();
+      } catch (e) {
+        // ignore
+      }
+      activeAnim.current = null;
+    }
+
+    const anim = Animated.timing(animatedIsFlipped, {
+      toValue: hasBrandIcon ? 1 : 0,
+      duration: 500,
+      useNativeDriver: true,
+    });
+
+    activeAnim.current = anim;
+    anim.start(({ finished }) => {
+      activeAnim.current = null;
+      if (finished) {
+        setRenderedIcon(icon);
+      } else {
+        setRenderedIcon(icon);
+      }
+    });
+  }, [icon]);
+
+  const rotateY = animatedIsFlipped.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+  const rotateYBack = animatedIsFlipped.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["180deg", "360deg"],
+  });
+
+  const backImageSource =
+    icon?.type === "png"
+      ? cardIcons[icon.name]
+      : renderedIcon?.type === "png"
+      ? cardIcons[renderedIcon.name]
+      : null;
+
+  const Icon = backImageSource;
+  console.log(Icon);
+  return (
+    <View
+      style={
+        defaultStyling && [
+          styles.formFieldContainer,
+          { backgroundColor: formFieldBackground },
+          formFieldStyle,
+          hasError && { borderColor: formFieldErrorBorder },
+        ]
+      }
+    >
+      {defaultStyling && withIcon && (
+        <View style={styles.iconContainer}>
+          <View style={styles.flipContainer}>
+            {/* Front side: generic card icon or previously rendered icon.
+                We use renderedIcon so the old front stays visible until animation completes */}
+            <Animated.View
+              style={[
+                styles.face,
+                styles.front,
+                {
+                  transform: [{ rotateY }],
+                },
+              ]}
+            >
+              {/* If previously renderedIcon was a material/fa6 show it; otherwise show generic credit-card */}
+              {renderedIcon?.type === "material" && renderedIcon?.name ? (
+                <MaterialCommunityIcons
+                  name={renderedIcon.name}
+                  size={25}
+                  color={hasError ? iconError : iconColor}
+                />
+              ) : renderedIcon?.type === "fa6" && renderedIcon?.name ? (
+                <FontAwesome6
+                  name={renderedIcon.name}
+                  size={21}
+                  color={hasError ? iconError : iconColor}
+                />
+              ) : (
+                <MaterialCommunityIcons
+                  name="credit-card"
+                  size={25}
+                  color={hasError ? iconError : iconColor}
+                />
+              )}
+            </Animated.View>
+            <Animated.View
+              style={[
+                styles.face,
+                {
+                  transform: [
+                    {
+                      rotateY: rotateYBack,
+                    },
+                  ],
+                },
+              ]}
+            >
+              {Icon ? (
+                typeof Icon === "function" ? (
+                  <Icon width="100%" height="100%" />
+                ) : (
+                  <Image
+                    source={Icon}
+                    style={[
+                      styles.logo,
+                      (icon?.name === "visa" ||
+                        icon?.name === "discover" ||
+                        renderedIcon?.name === "visa" ||
+                        renderedIcon?.name === "discover") && {
+                        width: "70%",
+                        height: "70%",
+                      },
+                    ]}
+                  />
+                )
+              ) : (
+                <View style={styles.logo} />
+              )}
+            </Animated.View>
+          </View>
+        </View>
+      )}
+      {withPlaceholder && withAnimatedText && (
+        <Animated.Text
+          pointerEvents="none"
+          style={
+            defaultStyling && [
+              placeholderStyle,
+              hasError && { color: placeholderError },
+            ]
+          }
+        >
+          {hasError ? errorText : placeholder}
+        </Animated.Text>
+      )}
+      <TextInput
+        onBlur={(e) => {
+          setIsFocused(false);
+          onBlur?.(e);
+        }}
+        onChangeText={onChangeText}
+        onFocus={() => setIsFocused(true)}
+        placeholder={
+          withPlaceholder && !withAnimatedText ? placeholder : undefined
+        }
+        placeholderTextColor={!withAnimatedText ? placeholderColor : undefined}
+        selectionColor={textInputCarot}
+        style={
+          defaultStyling
+            ? [
+                styles.textInput,
+                { color: textInput },
+                !withIcon && { marginLeft: 15 },
+                textInputStyle,
+              ]
+            : textInputStyle
+        }
+        value={value}
+        {...otherProps}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  formFieldContainer: {
+    borderColor: "#3c3c3c",
+    borderRadius: 25,
+    borderWidth: 1,
+    flexDirection: "row",
+    paddingVertical: 20,
+    marginTop: 12,
+  },
+  iconContainer: {
+    marginTop: 8,
+    width: 40,
+    height: 25,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 1,
+  },
+  textInput: { height: 40, ...Styles.text },
+
+  // Flip animation styles
+  flipContainer: {
+    width: "100%",
+    height: "100%",
+    ...({ transform: [{ perspective: 1000 }] } as any),
+  },
+  flipCard: {
+    width: "100%",
+    height: "100%",
+  },
+  face: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    backfaceVisibility: "hidden",
+  },
+  front: { zIndex: 2 },
+  logo: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "contain",
+  },
+});

package/src/components/forms/index.ts

@@ -0,0 +1,4 @@
+// export { default as ErrorMessage } from "./ErrorMessage";
+export { default as FormField } from "./FormField";
+export { default as SubmitButton } from "./SubmitButton";
+export { default as TextInput } from "./TextInput";

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export { default as OPCardForm } from "./OPCardForm";
+export { default as OPCardNumberInput } from "./OPCardNumberInput";
+export { default as OPCvv2Input } from "./OPCvv2Input";
+export { default as OPExpInput } from "./OPExpInput";
+export { default as OPExpMonthInput } from "./OPExpMonthInput";
+export { default as OPExpYearInput } from "./OPExpYearInput";
+export { default as OPHolderNameInput } from "./OPHolderNameInput";

package/src/constants/Colors.ts

@@ -0,0 +1,26 @@
+export const Colors = {
+  light: {
+    button: "#16c8bf",
+    buttonText: "#014481",
+    formFieldBackground: "#f8f4f4",
+    formFieldErrorBorder: "#fc5c65",
+    iconColor: "#6e6969",
+    iconError: "#fc5c65",
+    placeholderColor: "#6e6969",
+    placeholderError: "#fc5c65",
+    textInput: "#6e6969",
+    textInputCarot: "#014481",
+  },
+  dark: {
+    button: "#16c8bf",
+    buttonText: "#014481",
+    formFieldBackground: "#242526",
+    formFieldErrorBorder: "#fc5c65",
+    iconColor: "#e5e5e5",
+    iconError: "#fc5c65",
+    placeholderColor: "#6e6969",
+    placeholderError: "#fc5c65",
+    textInput: "#e5e5e5",
+    textInputCarot: "#014481",
+  },
+};

package/src/constants/Styles.ts

@@ -0,0 +1,9 @@
+import { Platform } from "react-native";
+
+export default {
+  text: {
+    flex: 1,
+    fontSize: 18,
+    fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
+  },
+};

package/src/context/FormContext.tsx

@@ -0,0 +1,109 @@
+import { createContext, useContext, useState } from "react";
+
+import { tokenizeCard } from "../ExpoOpenpayModule";
+import { unformat } from "../utility/formatting";
+
+type FormValues = Record<string, any>;
+type FormErrors = Record<string, string | undefined>;
+type FormTouched = Record<string, boolean>;
+
+interface FormContextType {
+  errors: FormErrors;
+  isSubmitting: boolean;
+  touched: FormTouched;
+  values: FormValues;
+  handleSubmit: () => Promise<any>;
+  resetForm: () => void;
+  setFieldValue: (field: string, value: any) => void;
+  setFieldTouched: (field: string, touched?: boolean) => void;
+  setFieldError: (field: string, error: string | undefined) => void;
+}
+
+const FormContext = createContext<FormContextType | undefined>(undefined);
+
+export const useFormContext = () => {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a FormProvider");
+  }
+  return context;
+};
+
+export default function FormProvider({
+  children,
+  initialValues = {},
+  onSubmit,
+}: {
+  children: React.ReactNode;
+  initialValues?: FormValues;
+  onSubmit?: () => any;
+}) {
+  const [values, setValues] = useState<FormValues>(initialValues);
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [touched, setTouched] = useState<FormTouched>({});
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const handleSubmit = async (): Promise<any> => {
+    try {
+      setIsSubmitting(true);
+
+      if (onSubmit) onSubmit();
+
+      if (values["exp"]) {
+        values["expMonth"] = values["exp"].slice(0, 2);
+        values["expYear"] = values["exp"].slice(3);
+      }
+
+      await tokenizeCard(
+        unformat(values["cardNumber"]),
+        values["cardHolderName"],
+        values["expYear"],
+        values["expMonth"],
+        values["cvc"]
+      );
+
+      resetForm();
+    } catch (e) {
+      if (e instanceof Error) {
+        console.error("Error during submission:", e.message);
+      } else {
+        console.error("Unknown error during submission", e);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const resetForm = () => {
+    setValues({});
+    setErrors({});
+    setTouched({});
+  };
+
+  const setFieldValue = (field: string, value: any) =>
+    setValues((prev) => ({ ...prev, [field]: value }));
+
+  const setFieldTouched = (field: string, isTouched: boolean = true) =>
+    setTouched((prev) => ({ ...prev, [field]: isTouched }));
+
+  const setFieldError = (field: string, error: string | undefined) =>
+    setErrors((prev) => ({ ...prev, [field]: error }));
+
+  return (
+    <FormContext.Provider
+      value={{
+        errors,
+        isSubmitting,
+        touched,
+        values,
+        handleSubmit,
+        resetForm,
+        setFieldValue,
+        setFieldTouched,
+        setFieldError,
+      }}
+    >
+      {children}
+    </FormContext.Provider>
+  );
+}

package/src/context/FormThemeContext.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useMemo } from "react";
+import { useColorScheme } from "react-native";
+
+import { Colors } from "../constants/Colors";
+
+export interface FormThemeColors {
+  button: string;
+  buttonText: string;
+  formFieldBackground: string;
+  formFieldErrorBorder: string;
+  iconColor: string;
+  iconError: string;
+  placeholderColor: string;
+  placeholderError: string;
+  textInput: string;
+  textInputCarot: string;
+}
+
+const FormThemeContext = createContext<FormThemeColors | undefined>(undefined);
+
+export const useFormThemeContext = () => {
+  const context = useContext(FormThemeContext);
+  if (!context) {
+    throw new Error(
+      "useFormThemeContext must be used within a FormThemeProvider"
+    );
+  }
+  return context;
+};
+
+export default function FormThemeProvider({
+  children,
+  dark,
+  light,
+}: {
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  dark?: FormThemeColors;
+  light?: FormThemeColors;
+}) {
+  const mergedDark = useMemo(() => ({ ...Colors.dark, ...dark }), [dark]);
+  const mergedLight = useMemo(() => ({ ...Colors.light, ...light }), [light]);
+
+  const colorScheme = useColorScheme();
+  const colorTheme = useMemo(
+    () => (colorScheme === "dark" ? mergedDark : mergedLight),
+    [colorScheme, mergedDark, mergedLight]
+  );
+
+  return (
+    <FormThemeContext.Provider value={colorTheme}>
+      {children}
+    </FormThemeContext.Provider>
+  );
+}

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export { default as FormProvider } from "./FormContext";
+export { default as FormThemeProvider } from "./FormThemeContext";
+export { FormThemeColors } from "./FormThemeContext";

package/src/index.ts

@@ -0,0 +1,19 @@
+// Runtime check for react-native-svg
+try {
+  require("react-native-svg");
+} catch (e) {
+  throw new Error(
+    "expo-openpay requires react-native-svg. Please install it:\n" +
+      "  yarn add react-native-svg\n" +
+      "or\n" +
+      "  npm install react-native-svg"
+  );
+}
+
+// Reexport the native module. On web, it will be resolved to ExpoOpenpayModule.web.ts
+// and on native platforms to ExpoOpenpayModule.ts
+export { default } from "./ExpoOpenpayModule";
+export { default as ExpoOpenpayView } from "./ExpoOpenpayView";
+export * from "./ExpoOpenpayModule";
+export * from "./components";
+export * from "./ExpoOpenpay.types";

package/src/utility/formatting.ts

@@ -0,0 +1,23 @@
+export const formatCreditCardNumber = (value: string): string => {
+  // Remove all non-digit characters
+  const digitsOnly = value.replace(/\D/g, "");
+
+  // Group digits into chunks of 4
+  const formatted = digitsOnly.match(/.{1,4}/g)?.join(" ") || "";
+
+  return formatted;
+};
+
+export const formatExp = (value: string): string => {
+  // Remove all non-digit characters
+  const digits = value.replace(/\D/g, "");
+  // Limit to 4 digits (MMYY)
+  const limited = digits.slice(0, 4);
+
+  if (limited.length < 3) return limited;
+  return `${limited.slice(0, 2)}/${limited.slice(2)}`;
+};
+
+export const unformat = (formattedText: string): string => {
+  return formattedText.replace(/\D/g, "");
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}