expo-openpay 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/OPCardForm.d.ts +2 -1
- package/build/components/OPCardForm.d.ts.map +1 -1
- package/build/components/OPCardForm.js +4 -3
- package/build/components/OPCardForm.js.map +1 -1
- package/build/context/FormContext.d.ts +2 -1
- package/build/context/FormContext.d.ts.map +1 -1
- package/build/context/FormContext.js +3 -3
- package/build/context/FormContext.js.map +1 -1
- package/package.json +1 -1
- package/src/components/OPCardForm.tsx +10 -4
- package/src/context/FormContext.tsx +5 -4
|
@@ -8,7 +8,8 @@ type CardFormProps = {
|
|
|
8
8
|
options?: {
|
|
9
9
|
expIsMMYY?: boolean;
|
|
10
10
|
groupedView?: boolean;
|
|
11
|
-
|
|
11
|
+
onDeviceSessionId?: (id: string) => any;
|
|
12
|
+
onSubmit?: (token: string) => any;
|
|
12
13
|
styling?: {
|
|
13
14
|
buttonStyle?: StyleProp<ViewStyle>;
|
|
14
15
|
buttonTextStyle?: StyleProp<TextStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardForm.d.ts","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAET,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,eAAe,EAAqB,MAAM,YAAY,CAAC;AAyB9E,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,
|
|
1
|
+
{"version":3,"file":"OPCardForm.d.ts","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAET,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,eAAe,EAAqB,MAAM,YAAY,CAAC;AAyB9E,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;QACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;QAClC,OAAO,CAAC,EAAE;YACR,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACvC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;YAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;YAC5B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACtC,cAAc,CAAC,EAAE,OAAO,CAAC;YACzB,6BAA6B,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACrD,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAClC,UAAU,CAAC,EAAE,eAAe,CAAC;YAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;SACvC,CAAC;QACF,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,UAAU,EACV,MAAM,EACN,YAAoB,EACpB,WAAkB,EAClB,OAAY,GACb,EAAE,aAAa,+BAkOf"}
|
|
@@ -5,13 +5,14 @@ import { initialize, createDeviceSessionId } from "../ExpoOpenpayModule";
|
|
|
5
5
|
import { SubmitButton } from "./forms";
|
|
6
6
|
import { OPCardNumberInput, OPCvv2Input, OPExpInput, OPExpMonthInput, OPExpYearInput, OPHolderNameInput, } from ".";
|
|
7
7
|
export default function OPCardForm({ merchantId, apiKey, isProduction = false, countryCode = "MX", options = {}, }) {
|
|
8
|
-
const { expIsMMYY = true, groupedView = true,
|
|
8
|
+
const { expIsMMYY = true, groupedView = true, onDeviceSessionId, onSubmit, styling = {}, withAnimatedTexts, withIcons, withLabels, withPlaceholders, } = options;
|
|
9
9
|
const { buttonStyle = {}, buttonTextStyle = {}, colorScheme = "light", darkTheme, formFieldStyle = {}, defaultStyling = true, formKeyboardAvoidingViewStyle = {}, formScrollViewStyle = {}, labelStyle = {}, lightTheme, textInputStyle = {}, } = styling;
|
|
10
10
|
useEffect(() => {
|
|
11
11
|
const initOP = async () => {
|
|
12
12
|
try {
|
|
13
13
|
await initialize(merchantId, apiKey, isProduction, countryCode);
|
|
14
|
-
|
|
14
|
+
if (onDeviceSessionId)
|
|
15
|
+
onDeviceSessionId(await createDeviceSessionId());
|
|
15
16
|
}
|
|
16
17
|
catch (e) {
|
|
17
18
|
console.error(e);
|
|
@@ -20,7 +21,7 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
|
|
|
20
21
|
initOP();
|
|
21
22
|
}, []);
|
|
22
23
|
return (<FormThemeProvider colorScheme={colorScheme} dark={darkTheme} light={lightTheme}>
|
|
23
|
-
<FormProvider initialValues={{ cardNumber: "" }} onSubmit={
|
|
24
|
+
<FormProvider initialValues={{ cardNumber: "" }} onSubmit={onSubmit} onDeviceSessionId={onDeviceSessionId}>
|
|
24
25
|
<KeyboardAvoidingView behavior="padding" enabled keyboardVerticalOffset={100} style={defaultStyling
|
|
25
26
|
? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]
|
|
26
27
|
: formKeyboardAvoidingViewStyle}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardForm.js","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\nimport {\n KeyboardAvoidingView,\n ScrollView,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\n\nimport { FormProvider, FormThemeColors, FormThemeProvider } from \"../context\";\nimport { initialize, createDeviceSessionId } from \"../ExpoOpenpayModule\";\nimport { SubmitButton } from \"./forms\";\nimport {\n OPCardNumberInput,\n OPCvv2Input,\n OPExpInput,\n OPExpMonthInput,\n OPExpYearInput,\n OPHolderNameInput,\n} from \".\";\n\n// type ThemeColors = {\n// background: string;\n// text: string;\n// error: string;\n// primary: string;\n// placeholder: string;\n// };\n\n// type ThemeProp = {\n// light: Partial<ThemeColors>;\n// dark: Partial<ThemeColors>;\n// };\n\ntype CardFormProps = {\n apiKey: string;\n countryCode?: \"MX\" | \"CO\" | \"PE\";\n isProduction: boolean;\n merchantId: string;\n options?: {\n expIsMMYY?: boolean;\n groupedView?: boolean;\n handleSubmit?: () => any;\n styling?: {\n buttonStyle?: StyleProp<ViewStyle>;\n buttonTextStyle?: StyleProp<TextStyle>;\n colorScheme?: \"light\" | \"dark\";\n darkTheme?: FormThemeColors;\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;\n formScrollViewStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n lightTheme?: FormThemeColors;\n textInputStyle?: StyleProp<TextStyle>;\n };\n withAnimatedTexts?: boolean;\n withIcons?: boolean;\n withLabels?: boolean;\n withPlaceholders?: boolean;\n };\n};\n\nexport default function OPCardForm({\n merchantId,\n apiKey,\n isProduction = false,\n countryCode = \"MX\",\n options = {},\n}: CardFormProps) {\n const {\n expIsMMYY = true,\n groupedView = true,\n handleSubmit,\n styling = {},\n withAnimatedTexts,\n withIcons,\n withLabels,\n withPlaceholders,\n } = options;\n\n const {\n buttonStyle = {},\n buttonTextStyle = {},\n colorScheme = \"light\",\n darkTheme,\n formFieldStyle = {},\n defaultStyling = true,\n formKeyboardAvoidingViewStyle = {},\n formScrollViewStyle = {},\n labelStyle = {},\n lightTheme,\n textInputStyle = {},\n } = styling;\n\n useEffect(() => {\n const initOP = async () => {\n try {\n await initialize(merchantId, apiKey, isProduction, countryCode);\n await createDeviceSessionId();\n } catch (e) {\n console.error(e);\n }\n };\n initOP();\n }, []);\n\n return (\n <FormThemeProvider\n colorScheme={colorScheme}\n dark={darkTheme}\n light={lightTheme}\n >\n <FormProvider initialValues={{ cardNumber: \"\" }} onSubmit={handleSubmit}>\n <KeyboardAvoidingView\n behavior=\"padding\"\n enabled\n keyboardVerticalOffset={100}\n style={\n defaultStyling\n ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]\n : formKeyboardAvoidingViewStyle\n }\n >\n <ScrollView\n showsVerticalScrollIndicator={false}\n style={\n defaultStyling\n ? [styles.formView, formScrollViewStyle]\n : formScrollViewStyle\n }\n >\n <OPHolderNameInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPCardNumberInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n {defaultStyling && groupedView ? (\n <View style={{ flexDirection: \"row\", gap: 12 }}>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <OPCvv2Input\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </View>\n ) : (\n <>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle: {},\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n\n <OPCvv2Input\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <SubmitButton\n buttonStyle={buttonStyle}\n buttonTextStyle={buttonTextStyle}\n defaultStyling={defaultStyling}\n />\n </ScrollView>\n </KeyboardAvoidingView>\n </FormProvider>\n </FormThemeProvider>\n );\n}\n\nconst styles = StyleSheet.create({\n formView: {\n height: \"100%\",\n marginHorizontal: 12,\n },\n keyboardAvoidingView: {\n flex: 1,\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"OPCardForm.js","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\nimport {\n KeyboardAvoidingView,\n ScrollView,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\n\nimport { FormProvider, FormThemeColors, FormThemeProvider } from \"../context\";\nimport { initialize, createDeviceSessionId } from \"../ExpoOpenpayModule\";\nimport { SubmitButton } from \"./forms\";\nimport {\n OPCardNumberInput,\n OPCvv2Input,\n OPExpInput,\n OPExpMonthInput,\n OPExpYearInput,\n OPHolderNameInput,\n} from \".\";\n\n// type ThemeColors = {\n// background: string;\n// text: string;\n// error: string;\n// primary: string;\n// placeholder: string;\n// };\n\n// type ThemeProp = {\n// light: Partial<ThemeColors>;\n// dark: Partial<ThemeColors>;\n// };\n\ntype CardFormProps = {\n apiKey: string;\n countryCode?: \"MX\" | \"CO\" | \"PE\";\n isProduction: boolean;\n merchantId: string;\n options?: {\n expIsMMYY?: boolean;\n groupedView?: boolean;\n onDeviceSessionId?: (id: string) => any;\n onSubmit?: (token: string) => any;\n styling?: {\n buttonStyle?: StyleProp<ViewStyle>;\n buttonTextStyle?: StyleProp<TextStyle>;\n colorScheme?: \"light\" | \"dark\";\n darkTheme?: FormThemeColors;\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;\n formScrollViewStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n lightTheme?: FormThemeColors;\n textInputStyle?: StyleProp<TextStyle>;\n };\n withAnimatedTexts?: boolean;\n withIcons?: boolean;\n withLabels?: boolean;\n withPlaceholders?: boolean;\n };\n};\n\nexport default function OPCardForm({\n merchantId,\n apiKey,\n isProduction = false,\n countryCode = \"MX\",\n options = {},\n}: CardFormProps) {\n const {\n expIsMMYY = true,\n groupedView = true,\n onDeviceSessionId,\n onSubmit,\n styling = {},\n withAnimatedTexts,\n withIcons,\n withLabels,\n withPlaceholders,\n } = options;\n\n const {\n buttonStyle = {},\n buttonTextStyle = {},\n colorScheme = \"light\",\n darkTheme,\n formFieldStyle = {},\n defaultStyling = true,\n formKeyboardAvoidingViewStyle = {},\n formScrollViewStyle = {},\n labelStyle = {},\n lightTheme,\n textInputStyle = {},\n } = styling;\n\n useEffect(() => {\n const initOP = async () => {\n try {\n await initialize(merchantId, apiKey, isProduction, countryCode);\n if (onDeviceSessionId) onDeviceSessionId(await createDeviceSessionId());\n } catch (e) {\n console.error(e);\n }\n };\n initOP();\n }, []);\n\n return (\n <FormThemeProvider\n colorScheme={colorScheme}\n dark={darkTheme}\n light={lightTheme}\n >\n <FormProvider\n initialValues={{ cardNumber: \"\" }}\n onSubmit={onSubmit}\n onDeviceSessionId={onDeviceSessionId}\n >\n <KeyboardAvoidingView\n behavior=\"padding\"\n enabled\n keyboardVerticalOffset={100}\n style={\n defaultStyling\n ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]\n : formKeyboardAvoidingViewStyle\n }\n >\n <ScrollView\n showsVerticalScrollIndicator={false}\n style={\n defaultStyling\n ? [styles.formView, formScrollViewStyle]\n : formScrollViewStyle\n }\n >\n <OPHolderNameInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPCardNumberInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n {defaultStyling && groupedView ? (\n <View style={{ flexDirection: \"row\", gap: 12 }}>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <OPCvv2Input\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </View>\n ) : (\n <>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle: {},\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n\n <OPCvv2Input\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <SubmitButton\n buttonStyle={buttonStyle}\n buttonTextStyle={buttonTextStyle}\n defaultStyling={defaultStyling}\n />\n </ScrollView>\n </KeyboardAvoidingView>\n </FormProvider>\n </FormThemeProvider>\n );\n}\n\nconst styles = StyleSheet.create({\n formView: {\n height: \"100%\",\n marginHorizontal: 12,\n },\n keyboardAvoidingView: {\n flex: 1,\n },\n});\n"]}
|
|
@@ -16,7 +16,8 @@ export declare const useFormContext: () => FormContextType;
|
|
|
16
16
|
export default function FormProvider({ children, initialValues, onSubmit, }: {
|
|
17
17
|
children: React.ReactNode;
|
|
18
18
|
initialValues?: FormValues;
|
|
19
|
-
onSubmit?: () => any;
|
|
19
|
+
onSubmit?: (token: string) => any;
|
|
20
|
+
onDeviceSessionId?: (id: string) => any;
|
|
20
21
|
}): import("react").JSX.Element;
|
|
21
22
|
export {};
|
|
22
23
|
//# sourceMappingURL=FormContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormContext.d.ts","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACtC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACrD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE3C,UAAU,eAAe;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,aAAkB,EAClB,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"FormContext.d.ts","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACtC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACrD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE3C,UAAU,eAAe;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,aAAkB,EAClB,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;CACzC,+BAqEA"}
|
|
@@ -17,13 +17,13 @@ export default function FormProvider({ children, initialValues = {}, onSubmit, }
|
|
|
17
17
|
const handleSubmit = async () => {
|
|
18
18
|
try {
|
|
19
19
|
setIsSubmitting(true);
|
|
20
|
-
if (onSubmit)
|
|
21
|
-
onSubmit();
|
|
22
20
|
if (values["exp"]) {
|
|
23
21
|
values["expMonth"] = values["exp"].slice(0, 2);
|
|
24
22
|
values["expYear"] = values["exp"].slice(3);
|
|
25
23
|
}
|
|
26
|
-
await tokenizeCard(unformat(values["cardNumber"]), values["cardHolderName"], values["expYear"], values["expMonth"], values["cvc"]);
|
|
24
|
+
const token = await tokenizeCard(unformat(values["cardNumber"]), values["cardHolderName"], values["expYear"], values["expMonth"], values["cvc"]);
|
|
25
|
+
if (onSubmit)
|
|
26
|
+
await onSubmit(token);
|
|
27
27
|
resetForm();
|
|
28
28
|
}
|
|
29
29
|
catch (e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormContext.js","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAkBjD,MAAM,WAAW,GAAG,aAAa,CAA8B,SAAS,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,QAAQ,
|
|
1
|
+
{"version":3,"file":"FormContext.js","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useState } from \"react\";\n\nimport { tokenizeCard } from \"../ExpoOpenpayModule\";\nimport { unformat } from \"../utility/formatting\";\n\ntype FormValues = Record<string, any>;\ntype FormErrors = Record<string, string | undefined>;\ntype FormTouched = Record<string, boolean>;\n\ninterface FormContextType {\n errors: FormErrors;\n isSubmitting: boolean;\n touched: FormTouched;\n values: FormValues;\n handleSubmit: () => Promise<any>;\n resetForm: () => void;\n setFieldValue: (field: string, value: any) => void;\n setFieldTouched: (field: string, touched?: boolean) => void;\n setFieldError: (field: string, error: string | undefined) => void;\n}\n\nconst FormContext = createContext<FormContextType | undefined>(undefined);\n\nexport const useFormContext = () => {\n const context = useContext(FormContext);\n if (!context) {\n throw new Error(\"useFormContext must be used within a FormProvider\");\n }\n return context;\n};\n\nexport default function FormProvider({\n children,\n initialValues = {},\n onSubmit,\n}: {\n children: React.ReactNode;\n initialValues?: FormValues;\n onSubmit?: (token: string) => any;\n onDeviceSessionId?: (id: string) => any;\n}) {\n const [values, setValues] = useState<FormValues>(initialValues);\n const [errors, setErrors] = useState<FormErrors>({});\n const [touched, setTouched] = useState<FormTouched>({});\n const [isSubmitting, setIsSubmitting] = useState<boolean>(false);\n\n const handleSubmit = async (): Promise<any> => {\n try {\n setIsSubmitting(true);\n\n if (values[\"exp\"]) {\n values[\"expMonth\"] = values[\"exp\"].slice(0, 2);\n values[\"expYear\"] = values[\"exp\"].slice(3);\n }\n\n const token = await tokenizeCard(\n unformat(values[\"cardNumber\"]),\n values[\"cardHolderName\"],\n values[\"expYear\"],\n values[\"expMonth\"],\n values[\"cvc\"]\n );\n\n if (onSubmit) await onSubmit(token);\n\n resetForm();\n } catch (e) {\n if (e instanceof Error) {\n console.error(\"Error during submission:\", e.message);\n } else {\n console.error(\"Unknown error during submission\", e);\n }\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const resetForm = () => {\n setValues({});\n setErrors({});\n setTouched({});\n };\n\n const setFieldValue = (field: string, value: any) =>\n setValues((prev) => ({ ...prev, [field]: value }));\n\n const setFieldTouched = (field: string, isTouched: boolean = true) =>\n setTouched((prev) => ({ ...prev, [field]: isTouched }));\n\n const setFieldError = (field: string, error: string | undefined) =>\n setErrors((prev) => ({ ...prev, [field]: error }));\n\n return (\n <FormContext.Provider\n value={{\n errors,\n isSubmitting,\n touched,\n values,\n handleSubmit,\n resetForm,\n setFieldValue,\n setFieldTouched,\n setFieldError,\n }}\n >\n {children}\n </FormContext.Provider>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -42,7 +42,8 @@ type CardFormProps = {
|
|
|
42
42
|
options?: {
|
|
43
43
|
expIsMMYY?: boolean;
|
|
44
44
|
groupedView?: boolean;
|
|
45
|
-
|
|
45
|
+
onDeviceSessionId?: (id: string) => any;
|
|
46
|
+
onSubmit?: (token: string) => any;
|
|
46
47
|
styling?: {
|
|
47
48
|
buttonStyle?: StyleProp<ViewStyle>;
|
|
48
49
|
buttonTextStyle?: StyleProp<TextStyle>;
|
|
@@ -73,7 +74,8 @@ export default function OPCardForm({
|
|
|
73
74
|
const {
|
|
74
75
|
expIsMMYY = true,
|
|
75
76
|
groupedView = true,
|
|
76
|
-
|
|
77
|
+
onDeviceSessionId,
|
|
78
|
+
onSubmit,
|
|
77
79
|
styling = {},
|
|
78
80
|
withAnimatedTexts,
|
|
79
81
|
withIcons,
|
|
@@ -99,7 +101,7 @@ export default function OPCardForm({
|
|
|
99
101
|
const initOP = async () => {
|
|
100
102
|
try {
|
|
101
103
|
await initialize(merchantId, apiKey, isProduction, countryCode);
|
|
102
|
-
await createDeviceSessionId();
|
|
104
|
+
if (onDeviceSessionId) onDeviceSessionId(await createDeviceSessionId());
|
|
103
105
|
} catch (e) {
|
|
104
106
|
console.error(e);
|
|
105
107
|
}
|
|
@@ -113,7 +115,11 @@ export default function OPCardForm({
|
|
|
113
115
|
dark={darkTheme}
|
|
114
116
|
light={lightTheme}
|
|
115
117
|
>
|
|
116
|
-
<FormProvider
|
|
118
|
+
<FormProvider
|
|
119
|
+
initialValues={{ cardNumber: "" }}
|
|
120
|
+
onSubmit={onSubmit}
|
|
121
|
+
onDeviceSessionId={onDeviceSessionId}
|
|
122
|
+
>
|
|
117
123
|
<KeyboardAvoidingView
|
|
118
124
|
behavior="padding"
|
|
119
125
|
enabled
|
|
@@ -36,7 +36,8 @@ export default function FormProvider({
|
|
|
36
36
|
}: {
|
|
37
37
|
children: React.ReactNode;
|
|
38
38
|
initialValues?: FormValues;
|
|
39
|
-
onSubmit?: () => any;
|
|
39
|
+
onSubmit?: (token: string) => any;
|
|
40
|
+
onDeviceSessionId?: (id: string) => any;
|
|
40
41
|
}) {
|
|
41
42
|
const [values, setValues] = useState<FormValues>(initialValues);
|
|
42
43
|
const [errors, setErrors] = useState<FormErrors>({});
|
|
@@ -47,14 +48,12 @@ export default function FormProvider({
|
|
|
47
48
|
try {
|
|
48
49
|
setIsSubmitting(true);
|
|
49
50
|
|
|
50
|
-
if (onSubmit) onSubmit();
|
|
51
|
-
|
|
52
51
|
if (values["exp"]) {
|
|
53
52
|
values["expMonth"] = values["exp"].slice(0, 2);
|
|
54
53
|
values["expYear"] = values["exp"].slice(3);
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
await tokenizeCard(
|
|
56
|
+
const token = await tokenizeCard(
|
|
58
57
|
unformat(values["cardNumber"]),
|
|
59
58
|
values["cardHolderName"],
|
|
60
59
|
values["expYear"],
|
|
@@ -62,6 +61,8 @@ export default function FormProvider({
|
|
|
62
61
|
values["cvc"]
|
|
63
62
|
);
|
|
64
63
|
|
|
64
|
+
if (onSubmit) await onSubmit(token);
|
|
65
|
+
|
|
65
66
|
resetForm();
|
|
66
67
|
} catch (e) {
|
|
67
68
|
if (e instanceof Error) {
|