diff --git a/payment_sdk/src/components/CardInputGroup.tsx b/payment_sdk/src/components/CardInputGroup.tsx index 3e87c5f..52acafb 100644 --- a/payment_sdk/src/components/CardInputGroup.tsx +++ b/payment_sdk/src/components/CardInputGroup.tsx @@ -222,7 +222,12 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => { if (text?.length < 11) dispatch({ type: Actions.SET_CARD_CVV, payload: text }); }} - inputStyle={styles.cvvInputStyle} + inputStyle={[ + styles.cvvInputStyle, + inputErrors.cvv && + !inputErrors.expiry && + styles.cvvInputErrorStyle, + ]} error={inputErrors.cvv} /> @@ -286,7 +291,10 @@ const getStyles = (theme: ThemeSchemeType) => { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, - marginLeft: -responsiveScale(1), + borderLeftWidth: 0, + }, + cvvInputErrorStyle: { + borderLeftWidth: 1, }, titleScanRow: { flexDirection: "row", diff --git a/payment_sdk/src/components/Input.tsx b/payment_sdk/src/components/Input.tsx index 49397b6..fc6af2e 100644 --- a/payment_sdk/src/components/Input.tsx +++ b/payment_sdk/src/components/Input.tsx @@ -8,6 +8,7 @@ import { ViewStyle, KeyboardTypeOptions, TextInputProps, + StyleProp, } from "react-native"; import { useTranslation } from "react-i18next"; @@ -22,7 +23,7 @@ interface InputProps extends TextInputProps { onChangeText: (text: string) => void; label?: string; placeholder?: string; - inputStyle?: ViewStyle; + inputStyle?: StyleProp; testID?: string; error?: boolean; errorText?: string; diff --git a/payment_sdk/src/util/constants.ts b/payment_sdk/src/util/constants.ts index bf3eef7..52ef1d2 100644 --- a/payment_sdk/src/util/constants.ts +++ b/payment_sdk/src/util/constants.ts @@ -7,6 +7,7 @@ export const API_HEADER = (publishableKey: string) => ({ accept: "application/json", "content-type": "application/json", "KOMOJU-VIA": "mobile_react", + "X-KOMOJU-API-VERSION": "2024-07-15", Authorization: `Basic ${btoa(publishableKey + ":")}`, });