feat: implement checkout vault option picker

primer-io · Nov 7, 2024 · e68af51 · e68af51
1 parent ddc6509
commit e68af51
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/packages/example/src/models/IClientSessionRequestBody.ts b/packages/example/src/models/IClientSessionRequestBody.ts
@@ -71,6 +71,7 @@ export interface IClientSession_Action {
 
 export interface IClientSessionPaymentMethod {
     vaultOnSuccess?: boolean;
+    vaultOnAgreement?: boolean;
     paymentType?: string;
     options?: IClientSessionPaymentMethodOptions;
 }
@@ -158,6 +159,7 @@ export let appPaymentParameters: AppPaymentParameters = {
         },
         paymentMethod: {
             vaultOnSuccess: false,
+            vaultOnAgreement: false,
             paymentType: 'FIRST_PAYMENT',
         }
     },

diff --git a/packages/example/src/screens/SettingsScreen.tsx b/packages/example/src/screens/SettingsScreen.tsx
@@ -27,6 +27,26 @@ export interface AppPaymentParameters {
 export let customApiKey: string | undefined;
 export let customClientToken: string | undefined;
 
+enum CheckoutVaultingType {
+    NONE,
+    VAULT_ON_SUCCESS,
+    VAULT_ON_AGREEMENT
+}
+
+export function makeCheckoutVaultingTypeFromIntVal(env: number): CheckoutVaultingType {
+    switch (env) {
+        case 0:
+            return CheckoutVaultingType.NONE;
+        case 1:
+            return CheckoutVaultingType.VAULT_ON_SUCCESS;
+        case 2:
+            return CheckoutVaultingType.VAULT_ON_AGREEMENT;
+        default:
+            throw new Error("Failed to create checkout vaulting type.");
+    }
+}
+
+
 // @ts-ignore
 const SettingsScreen = ({ navigation }) => {
     const isDarkMode = useColorScheme() === 'dark';
@@ -66,6 +86,11 @@ const SettingsScreen = ({ navigation }) => {
     const [visaSurcharge, setVisaSurcharge] = React.useState<number | undefined>(appPaymentParameters.clientSessionRequestBody.paymentMethod?.options?.PAYMENT_CARD?.networks.VISA?.surcharge.amount);
     const [masterCardSurcharge, setMasterCardSurcharge] = React.useState<number | undefined>(appPaymentParameters.clientSessionRequestBody.paymentMethod?.options?.PAYMENT_CARD?.networks.MASTERCARD?.surcharge.amount);
 
+    const vaultOnSuccess = appPaymentParameters.clientSessionRequestBody.paymentMethod?.vaultOnSuccess;
+    const vaultOnAgreement = appPaymentParameters.clientSessionRequestBody.paymentMethod?.vaultOnAgreement;
+
+    const [checkoutVaultingType, setCheckoutVaultingType] = React.useState<CheckoutVaultingType | undefined>(vaultOnSuccess ? CheckoutVaultingType.VAULT_ON_SUCCESS : vaultOnAgreement ? CheckoutVaultingType.VAULT_ON_AGREEMENT : CheckoutVaultingType.NONE);
+
     const backgroundStyle = {
         backgroundColor: isDarkMode ? Colors.black : Colors.white
     };
@@ -107,6 +132,23 @@ const SettingsScreen = ({ navigation }) => {
                         setClientToken(text);
                     }}
                 />
+
+
+                <Text
+                style={{ marginVertical: 8, ...styles.heading1 }}> 
+                    Checkout vaulting
+                </Text>
+                <SegmentedControl
+                    testID="CheckoutVaulting"
+                    style={{ marginTop: 6, height: 56 }}
+                    values={['No vaulting', 'Vault on success', 'Vault on agreement']}
+                    selectedIndex={checkoutVaultingType}
+                    onChange={(event) => {
+                        const selectedIndex = event.nativeEvent.selectedSegmentIndex;
+                        let selectedCheckoutVaultingType = makeCheckoutVaultingTypeFromIntVal(selectedIndex);
+                        setCheckoutVaultingType(selectedCheckoutVaultingType);
+                    }}
+                />
             </View>
         )
     }
@@ -133,13 +175,13 @@ const SettingsScreen = ({ navigation }) => {
 
     const renderRecaptureCvvSection = () => {
         return (
-            <View style={{ marginTop: 12, marginBottom: 8, flexDirection:'row', alignItems:'center', justifyContent:'left'}}>
+            <View style={{ marginTop: 12, marginBottom: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'left' }}>
                 <Text style={{ ...styles.heading1 }}>
                     Enable Recapture CVV
                 </Text>
                 <Switch
-                  onValueChange={setCaptureVaultedCardCvv}
-                  value={captureVaultedCardCvv}
+                    onValueChange={setCaptureVaultedCardCvv}
+                    value={captureVaultedCardCvv}
                 />
             </View>
         );
@@ -776,6 +818,8 @@ const SettingsScreen = ({ navigation }) => {
 
 
         currentPaymentMethod.options = Object.keys(currentPaymentMethodOptions || {}).length === 0 ? undefined : currentPaymentMethodOptions;
+        currentPaymentMethod.vaultOnSuccess = checkoutVaultingType === CheckoutVaultingType.VAULT_ON_SUCCESS;
+        currentPaymentMethod.vaultOnAgreement = checkoutVaultingType === CheckoutVaultingType.VAULT_ON_AGREEMENT;
         currentClientSessionRequestBody.paymentMethod = Object.keys(currentPaymentMethod).length === 0 ? undefined : currentPaymentMethod;
 
         appPaymentParameters.clientSessionRequestBody = currentClientSessionRequestBody;