expo-openpay 0.1.0

package/src/components/OPCardNumberInput.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+import { FormField } from "./forms";
+
+type IconType =
+  | {
+      type: "fa6";
+      name:
+        | "cc-visa"
+        | "cc-mastercard"
+        | "cc-amex"
+        | "cc-discover"
+        | "credit-card";
+    }
+  | { type: "material"; name: "credit-card" }
+  | { type: "png"; name: "amex" | "discover" | "mc" | "visa" };
+
+type CardInputOptions = {
+  options?: {
+    formFieldStyle?: StyleProp<ViewStyle>;
+    defaultStyling?: boolean;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputStyle?: StyleProp<TextStyle>;
+  };
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+function getCardBrandIcon(cardType: string | null): IconType {
+  switch (cardType) {
+    case "visa":
+      return { type: "png", name: "visa" };
+    case "mastercard":
+      return { type: "png", name: "mc" };
+    case "amex":
+      return { type: "png", name: "amex" };
+    case "discover":
+      return { type: "png", name: "discover" };
+    default:
+      return { type: "material", name: "credit-card" };
+  }
+}
+
+function detectCardBrand(cardNumber: string): string | null {
+  const sanitized = cardNumber.replace(/\s+/g, "");
+
+  if (/^4\d{0,15}$/.test(sanitized)) return "visa";
+  if (/^(5[1-5]|2[2-7])\d{0,14}$/.test(sanitized)) return "mastercard";
+  if (/^3[47]\d{0,13}$/.test(sanitized)) return "amex";
+  if (/^6(?:011|5\d{2})\d{0,12}$/.test(sanitized)) return "discover";
+
+  return null;
+}
+
+// Luhn algorithm validator
+function validateCardNumber(value: string) {
+  if (!value) return "Card Number is required";
+
+  const sanitized = value.replace(/\s+/g, "");
+  if (sanitized.length < 13 || sanitized.length > 19) {
+    return "Card Number must be 13-19 digits";
+  }
+
+  let sum = 0;
+  let shouldDouble = false;
+  for (let i = sanitized.length - 1; i >= 0; i--) {
+    let digit = parseInt(sanitized[i], 10);
+    if (shouldDouble) {
+      digit *= 2;
+      if (digit > 9) digit -= 9;
+    }
+    sum += digit;
+    shouldDouble = !shouldDouble;
+  }
+  if (sum % 10 !== 0) return "Invalid card number";
+
+  return undefined; // valid card
+}
+
+export default function OPCardNumberInput({
+  options = {},
+  withAnimatedText = true,
+  withIcon = true,
+  withLabel = false,
+  withPlaceholder = true,
+  ...otherProps
+}: CardInputOptions) {
+  const [cardType, setCardType] = useState<string | null>(null);
+
+  const {
+    defaultStyling = true,
+    formFieldStyle = {},
+    inputStyle = {},
+    labelStyle = {},
+    textInputStyle = {},
+  } = options;
+
+  return (
+    <FormField
+      autoCapitalize="none"
+      autoComplete="cc-number"
+      autoCorrect={false}
+      defaultStyling={defaultStyling}
+      icon={getCardBrandIcon(cardType)}
+      keyboardType="number-pad"
+      labelStyle={labelStyle}
+      maxLength={19}
+      name="cardNumber"
+      onValueChange={(text) => {
+        setCardType(detectCardBrand(text));
+      }}
+      placeholder="Card Number"
+      styling={{ formFieldStyle, inputStyle, textInputStyle }}
+      validate={validateCardNumber}
+      withAnimatedText={withAnimatedText}
+      withIcon={withIcon}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      {...otherProps}
+    />
+  );
+}

package/src/components/OPCvv2Input.tsx

@@ -0,0 +1,62 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+import { FormField } from "./forms";
+
+type CardInputOptions = {
+  options?: {
+    formFieldStyle?: StyleProp<ViewStyle>;
+    defaultStyling?: boolean;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputStyle?: StyleProp<TextStyle>;
+  };
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+function validateCvv(value: string) {
+  if (!value) return "CVV is required";
+  if (!/^\d{3,4}$/.test(value)) return "Invalid CVV";
+  return undefined;
+}
+
+export default function OPExpYearInput({
+  options = {},
+  withAnimatedText = true,
+  withIcon = true,
+  withLabel = false,
+  withPlaceholder = true,
+  ...otherProps
+}: CardInputOptions) {
+  const {
+    defaultStyling = true,
+    formFieldStyle = {},
+    inputStyle = {},
+    labelStyle = {},
+    textInputStyle = {},
+  } = options;
+
+  return (
+    <FormField
+      autoCapitalize="none"
+      autoComplete="cc-csc"
+      autoCorrect={false}
+      defaultStyling={defaultStyling}
+      icon={{ type: "material", name: "lock" }}
+      keyboardType="number-pad"
+      labelStyle={labelStyle}
+      maxLength={4}
+      name="cvc"
+      placeholder="CVC"
+      styling={{ formFieldStyle, inputStyle, textInputStyle }}
+      validate={validateCvv}
+      withAnimatedText={withAnimatedText}
+      withIcon={withIcon}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      {...otherProps}
+    />
+  );
+}

package/src/components/OPExpInput.tsx

@@ -0,0 +1,74 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+import { FormField } from "./forms";
+
+type CardInputOptions = {
+  options?: {
+    formFieldStyle?: StyleProp<ViewStyle>;
+    defaultStyling?: boolean;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputStyle?: StyleProp<TextStyle>;
+  };
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+function validateExpiry(value: string) {
+  if (!value) return "Expiry is required";
+
+  const match = /^(\d{2})\/(\d{2})$/.exec(value);
+  if (!match) return "Use MM/YY format";
+
+  const month = parseInt(match[1], 10);
+  const year = 2000 + parseInt(match[2], 10);
+
+  if (month < 1 || month > 12) return "Invalid month";
+
+  const now = new Date();
+  const expiry = new Date(year, month);
+  if (expiry <= now) return "Card expired";
+
+  return undefined;
+}
+
+export default function OPExpYearInput({
+  options = {},
+  withAnimatedText = true,
+  withIcon = true,
+  withLabel = false,
+  withPlaceholder = true,
+  ...otherProps
+}: CardInputOptions) {
+  const {
+    defaultStyling = true,
+    formFieldStyle = {},
+    inputStyle = {},
+    labelStyle = {},
+    textInputStyle = {},
+  } = options;
+
+  return (
+    <FormField
+      autoCapitalize="none"
+      autoComplete="cc-exp"
+      autoCorrect={false}
+      defaultStyling={defaultStyling}
+      icon={{ type: "material", name: "calendar-blank" }}
+      keyboardType="number-pad"
+      labelStyle={labelStyle}
+      maxLength={5}
+      name="exp"
+      placeholder="MM/YY"
+      styling={{ formFieldStyle, inputStyle, textInputStyle }}
+      validate={validateExpiry}
+      withAnimatedText={withAnimatedText}
+      withIcon={withIcon}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      {...otherProps}
+    />
+  );
+}

package/src/components/OPExpMonthInput.tsx

@@ -0,0 +1,55 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+import { FormField } from "./forms";
+
+type CardInputOptions = {
+  options?: {
+    formFieldStyle?: StyleProp<ViewStyle>;
+    defaultStyling?: boolean;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputStyle?: StyleProp<TextStyle>;
+  };
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+export default function OPExpMonthInput({
+  options = {},
+  withAnimatedText = true,
+  withIcon = true,
+  withLabel = false,
+  withPlaceholder = true,
+  ...otherProps
+}: CardInputOptions) {
+  const {
+    defaultStyling = true,
+    formFieldStyle = {},
+    inputStyle = {},
+    labelStyle = {},
+    textInputStyle = {},
+  } = options;
+
+  return (
+    <FormField
+      autoCapitalize="none"
+      autoComplete="cc-exp-month"
+      autoCorrect={false}
+      defaultStyling={defaultStyling}
+      icon={{ type: "material", name: "calendar-blank" }}
+      keyboardType="number-pad"
+      labelStyle={labelStyle}
+      maxLength={2}
+      name="expMonth"
+      placeholder="MM"
+      styling={{ formFieldStyle, inputStyle, textInputStyle }}
+      withAnimatedText={withAnimatedText}
+      withIcon={withIcon}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      {...otherProps}
+    />
+  );
+}

package/src/components/OPExpYearInput.tsx

@@ -0,0 +1,55 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+import { FormField } from "./forms";
+
+type CardInputOptions = {
+  options?: {
+    formFieldStyle?: StyleProp<ViewStyle>;
+    defaultStyling?: boolean;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputStyle?: StyleProp<TextStyle>;
+  };
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+export default function OPExpYearInput({
+  options = {},
+  withAnimatedText = true,
+  withIcon = true,
+  withLabel = false,
+  withPlaceholder = true,
+  ...otherProps
+}: CardInputOptions) {
+  const {
+    defaultStyling = true,
+    formFieldStyle = {},
+    inputStyle = {},
+    labelStyle = {},
+    textInputStyle = {},
+  } = options;
+
+  return (
+    <FormField
+      autoCapitalize="none"
+      autoComplete="cc-exp-year"
+      autoCorrect={false}
+      defaultStyling={defaultStyling}
+      icon={{ type: "material", name: "calendar-blank" }}
+      keyboardType="number-pad"
+      labelStyle={labelStyle}
+      maxLength={2}
+      name="expYear"
+      placeholder="YY"
+      styling={{ formFieldStyle, inputStyle, textInputStyle }}
+      withAnimatedText={withAnimatedText}
+      withIcon={withIcon}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      {...otherProps}
+    />
+  );
+}

package/src/components/OPHolderNameInput.tsx

@@ -0,0 +1,53 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+import { FormField } from "./forms";
+
+type CardInputOptions = {
+  options?: {
+    formFieldStyle?: StyleProp<ViewStyle>;
+    defaultStyling?: boolean;
+    inputStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputStyle?: StyleProp<TextStyle>;
+  };
+  withAnimatedText?: boolean;
+  withIcon?: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+export default function OPHolderNameInput({
+  options = {},
+  withAnimatedText = true,
+  withIcon = true,
+  withLabel = false,
+  withPlaceholder = true,
+  ...otherProps
+}: CardInputOptions) {
+  const {
+    defaultStyling = true,
+    formFieldStyle = {},
+    inputStyle = {},
+    labelStyle = {},
+    textInputStyle = {},
+  } = options;
+
+  return (
+    <FormField
+      autoCapitalize="words"
+      autoComplete="cc-name"
+      autoCorrect={false}
+      defaultStyling={defaultStyling}
+      icon={{ type: "material", name: "account" }}
+      labelStyle={labelStyle}
+      name="cardHolderName"
+      placeholder="Cardholder Name"
+      styling={{ formFieldStyle, inputStyle, textInputStyle }}
+      withAnimatedText={withAnimatedText}
+      withIcon={withIcon}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      {...otherProps}
+    />
+  );
+}

package/src/components/forms/ErrorMessage.tsx

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+
+import Text from "./Text";
+
+type ErrorMessageProps = {
+  error?: string;
+  visible: boolean;
+};
+
+function ErrorMessage({ error, visible }: ErrorMessageProps): React.ReactNode {
+  if (!visible || !error) return null;
+  return <Text style={styles.error}>{error}</Text>;
+}
+
+const styles = StyleSheet.create({
+  error: { color: "red", fontSize: 18, marginTop: 4, marginLeft: 10 },
+});
+
+export default ErrorMessage;

package/src/components/forms/FormField.tsx

@@ -0,0 +1,96 @@
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+import { FontAwesome6, MaterialCommunityIcons } from "@expo/vector-icons";
+
+import TextInput from "./TextInput";
+import { formatCreditCardNumber, formatExp } from "../../utility/formatting";
+import { useFormContext } from "../../context/FormContext";
+
+type StylingProps = {
+  formFieldStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<ViewStyle>;
+  textInputStyle?: StyleProp<TextStyle>;
+};
+
+type AppFormFieldProps = TextInputProps & {
+  customStyles?: StyleProp<ViewStyle>;
+  defaultStyling?: boolean;
+  icon?:
+    | { type: "material"; name: keyof typeof MaterialCommunityIcons.glyphMap }
+    | { type: "fa6"; name: keyof typeof FontAwesome6.glyphMap }
+    | { type: "png"; name: "amex" | "discover" | "mc" | "visa" };
+  name: string;
+  placeholder?: string;
+  styling?: StylingProps;
+  labelStyle?: StyleProp<TextStyle>;
+  onValueChange?: (value: string) => void;
+  validate?: (value: string) => string | undefined;
+  withAnimatedText: boolean;
+  withIcon: boolean;
+  withLabel?: boolean;
+  withPlaceholder?: boolean;
+};
+
+export default function AppFormField({
+  defaultStyling,
+  name,
+  labelStyle = {},
+  placeholder,
+  validate,
+  withLabel = false,
+  ...otherProps
+}: AppFormFieldProps) {
+  const {
+    errors,
+    setFieldTouched,
+    setFieldValue,
+    setFieldError,
+    touched,
+    values,
+  } = useFormContext();
+  const hasError: boolean = !!touched[name] && !!errors[name];
+
+  return (
+    <>
+      {withLabel && (
+        <Text style={defaultStyling ? [styles.label, labelStyle] : labelStyle}>
+          {placeholder}
+        </Text>
+      )}
+      <TextInput
+        defaultStyling={defaultStyling}
+        onBlur={() => {
+          setFieldTouched(name);
+          if (validate) {
+            const errorMessage = validate(values[name]);
+            setFieldError(name, errorMessage);
+          }
+        }}
+        onChangeText={(text) => {
+          if (name === "cardNumber") text = formatCreditCardNumber(text);
+          if (name === "exp") text = formatExp(text);
+          setFieldValue(name, text);
+
+          if (otherProps.onValueChange) {
+            otherProps.onValueChange(text);
+          }
+        }}
+        hasError={hasError}
+        errorText={errors[name]}
+        placeholder={hasError ? errors[name] : placeholder}
+        value={values[name]}
+        {...otherProps}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: { fontSize: 18, fontWeight: "500", marginTop: 12, paddingLeft: 6 },
+});

package/src/components/forms/SubmitButton.tsx

@@ -0,0 +1,81 @@
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+} from "react-native";
+
+import { useFormContext } from "../../context/FormContext";
+import { useFormThemeContext } from "../../context/FormThemeContext";
+
+type SubmitButtonProps = {
+  buttonStyle?: StyleProp<ViewStyle>;
+  buttonTextStyle?: StyleProp<TextStyle>;
+  defaultStyling?: boolean;
+  onPress?: () => void;
+  title?: string;
+};
+
+export default function SubmitButton({
+  buttonStyle = {},
+  buttonTextStyle = {},
+  defaultStyling,
+  onPress,
+  title = "Submit",
+}: SubmitButtonProps) {
+  const { errors, handleSubmit, isSubmitting } = useFormContext();
+  const { button, buttonText } = useFormThemeContext();
+
+  return (
+    <TouchableOpacity
+      disabled={Object.values(errors).some(Boolean) || isSubmitting}
+      style={
+        defaultStyling
+          ? [
+              Object.values(errors).some(Boolean) || isSubmitting
+                ? styles.buttonDisabled
+                : styles.button,
+              { backgroundColor: button },
+              buttonStyle,
+            ]
+          : buttonStyle
+      }
+      onPress={onPress || handleSubmit}
+    >
+      <Text
+        style={
+          defaultStyling
+            ? [styles.text, { color: buttonText }, buttonTextStyle]
+            : buttonTextStyle
+        }
+      >
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: "center",
+    borderRadius: 25,
+    justifyContent: "center",
+    marginVertical: 10,
+    padding: 15,
+  },
+  buttonDisabled: {
+    alignItems: "center",
+    borderRadius: 25,
+    justifyContent: "center",
+    marginVertical: 10,
+    opacity: 0.7,
+    padding: 15,
+  },
+  text: {
+    fontSize: 18,
+    textTransform: "uppercase",
+    fontWeight: "bold",
+  },
+});

package/src/components/forms/Text.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet, Text, TextProps } from "react-native";
+import Styles from "../../constants/Styles";
+
+type AppTextProps = TextProps & {
+  children?: React.ReactNode;
+};
+
+function AppText({ children, ...otherProps }: AppTextProps) {
+  return (
+    <Text style={[styles.text]} {...otherProps}>
+      {children}
+    </Text>
+  );
+}
+
+export default AppText;
+
+const styles = StyleSheet.create({
+  text: { ...Styles.text },
+});