feat: ACH public API, sample UI and Android wrapper

packages/example/android/app/build.gradle

@@ -127,6 +127,7 @@ dependencies {
   implementation "io.primer:3ds-android:1.4.3"
   implementation "io.primer:ipay88-my-android:1.0.3"
   implementation "io.primer:klarna-android:1.0.4"
+  implementation "io.primer:stripe-android:1.0.0"
 
   implementation project(path: ':primerioreactnative')
 

packages/example/src/App.tsx

@@ -13,6 +13,7 @@ import RawRetailOutletScreen from './screens/RawRetailOutletScreen';
 import HeadlessCheckoutVaultScreen from './screens/HeadlessCheckoutVaultScreen';
 import HeadlessCheckoutKlarnaScreen from './screens/HeadlessCheckoutKlarnaScreen';
 import HeadlessCheckoutWithRedirect from './screens/HeadlessCheckoutWithRedirect';
+import HeadlessCheckoutStripeAchScreen from './screens/HeadlessCheckoutStripeAchScreen';
 import { LogBox } from 'react-native';
 
 const Stack = createNativeStackNavigator();
@@ -37,6 +38,7 @@ const App = () => {
           <Stack.Screen name="RawRetailOutlet" component={RawRetailOutletScreen} />
           <Stack.Screen name="Klarna" component={HeadlessCheckoutKlarnaScreen} />
           <Stack.Screen name="HeadlessCheckoutWithRedirect" component={HeadlessCheckoutWithRedirect} />
+          <Stack.Screen name="HeadlessCheckoutStripeAchScreen" component={HeadlessCheckoutStripeAchScreen} />
         </Stack.Navigator>
       </NavigationContainer>
   );

packages/example/src/models/IClientSessionRequestBody.ts

@@ -7,6 +7,7 @@ export interface IClientSessionRequestBody {
     customerId?: string;
     orderId?: string;
     currencyCode?: string;
+    metadata?: IClientSessionMetadata;
     order?: IClientSessionOrder;
     customer?: IClientSessionCustomer;
     paymentMethod?: IClientSessionPaymentMethod;
@@ -17,6 +18,16 @@ export interface IClientSessionOrder {
     lineItems?: Array<IClientSessionLineItem>
 }
 
+export interface IClientSessionMetadata {
+    scenario?: string;
+    deviceInfo?: IClientSessionDeviceInfo;
+}
+
+export interface IClientSessionDeviceInfo {
+    ipAddress?: string;
+    userAgent?: string;
+}
+
 export interface IClientSessionCustomer {
     emailAddress?: string;
     mobileNumber?: string;
@@ -91,6 +102,13 @@ export let appPaymentParameters: AppPaymentParameters = {
         customerId: `rn-customer-${makeRandomString(8)}`,
         orderId: `rn-order-${makeRandomString(8)}`,
         currencyCode: 'EUR',
+        metadata: {
+          scenario: 'STRIPE_ACH_ONEOFF',
+          deviceInfo : {
+            ipAddress: '127.0.0.1',
+            userAgent: 'React Native'
+          } 
+        },
         order: {
             countryCode: 'DE',
             lineItems: [

packages/example/src/screens/AchMandateAlert.tsx

@@ -0,0 +1,17 @@
+import { AchMandateManager } from '@primer-io/react-native';
+import { Alert } from 'react-native';
+
+export async function showAchMandateAlert() {
+    const achMandateManager = new AchMandateManager();
+    Alert.alert('ACH Mandate', 'Would you like to accept this mandate?', [
+        {
+          text: 'No',
+          onPress: () => achMandateManager.declineMandate(),
+          style: 'cancel',
+        },
+        {
+          text: 'Yes', 
+          onPress: () => achMandateManager.acceptMandate()
+        },
+      ]);
+}

packages/example/src/screens/HeadlessCheckoutScreen.tsx

@@ -18,9 +18,10 @@ import {
   NativeUIManager,
   PaymentMethod,
   PrimerSettings,
-  SessionIntent,
+  SessionIntent
 } from '@primer-io/react-native';
 import SegmentedControl from '@react-native-segmented-control/segmented-control';
+import { showAchMandateAlert } from './AchMandateAlert';
 
 let log: string = '';
 let merchantPaymentId: string | null = null;
@@ -80,6 +81,9 @@ export const HeadlessCheckoutScreen = (props: any) => {
       iOS: {
         urlScheme: 'merchant://primer.io',
       },
+      stripeOptions: {
+          publishableKey: "<PUT_PUBLISHABE_KEY_HERE>"
+      },
     },
     debugOptions: {
       is3DSSanityCheckEnabled: false
@@ -143,6 +147,11 @@ export const HeadlessCheckoutScreen = (props: any) => {
           )}\n`,
         );
         setIsLoading(false);
+        switch(merchantCheckoutAdditionalInfo.additionalInfoName) {
+          case "DisplayStripeAchMandateAdditionalInfo":
+            showAchMandateAlert();
+            break;
+        }
       },
       onCheckoutComplete: checkoutData => {
         merchantCheckoutData = checkoutData;
@@ -376,6 +385,8 @@ export const HeadlessCheckoutScreen = (props: any) => {
         console.log("Payment session intent is " + selectedSessionIntent)
         if (paymentMethod.paymentMethodType === "KLARNA") {
           props.navigation.navigate('Klarna', { paymentSessionIntent: selectedSessionIntent });
+        } else if (paymentMethod.paymentMethodType === "STRIPE_ACH") {
+          props.navigation.navigate('HeadlessCheckoutStripeAchScreen');
         } else {
           await nativeUIManager.showPaymentMethod(SessionIntent.CHECKOUT);
         }
@@ -530,4 +541,4 @@ export const HeadlessCheckoutScreen = (props: any) => {
       {renderLoadingOverlay()}
     </View>
   );
-};
+};

packages/example/src/screens/HeadlessCheckoutStripeAchScreen.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import {
+    Text,
+    View,
+    Button,
+    StyleSheet,
+} from 'react-native';
+import {
+    AchManager,
+    StripeAchUserDetailsComponent,
+    AchStep,
+    PrimerError,
+    PrimerInvalidComponentData,
+    PrimerValidComponentData,
+    PrimerValidatingComponentData,
+    PrimerComponentDataValidationError,
+    AchManagerProps,
+    AchValidatableData,
+} from '@primer-io/react-native';
+import TextField from '../components/TextField';
+
+const achManager = new AchManager();
+let component: StripeAchUserDetailsComponent;
+
+const HeadlessCheckoutStripeAchScreen = (props: any) => {
+    const [firstName, setFirstName] = useState<string>("");
+    const [lastName, setLastName] = useState<string>("");
+    const [emailAddress, setEmailAddress] = useState<string>("");
+    const [firstNameError, setFirstNameError] = useState<string | null>(null);
+    const [lastNameError, setLastNameError] = useState<string | null>(null);
+    const [emailAddressError, setEmailAddressError] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            const achManagerProps: AchManagerProps = {
+                paymentMethodType: "STRIPE_ACH",
+                onStep: (data: AchStep) => {
+                    const log = `\nonStep: ${JSON.stringify(data)}\n`;
+                    console.log(log);
+                    switch (data.stepName) {
+                        case "userDetailsRetrieved":
+                            setFirstName(data.firstName);
+                            setLastName(data.lastName);
+                            setEmailAddress(data.emailAddress);
+                            break;
+
+                        case "userDetailsCollected":
+                            props.navigation.goBack();
+                            break;
+                    }
+                },
+                onError: (error: PrimerError) => {
+                    const log = `\nonError: ${JSON.stringify(error)}\n`;
+                    console.log(log);
+                },
+                onInvalid: (data: PrimerInvalidComponentData<AchValidatableData>) => {
+                    const log = `\nonInvalid: ${JSON.stringify(data)}\n`;
+                    console.log(log);
+                    let error = data?.errors[0]?.description ?? null
+                    switch (data.data.validatableDataName) {
+                        case "firstName":
+                            setFirstNameError(error);
+                            break;
+                        case "lastName":
+                            setLastNameError(error);
+                            break;
+                        case "emailAddress":
+                            setEmailAddressError(error);
+                            break;
+                    }
+                },
+                onValid: (data: PrimerValidComponentData<AchValidatableData>) => {
+                    const log = `\nonValid: ${JSON.stringify(data)}\n`;
+                    console.log(log);
+                    switch (data.data.validatableDataName) {
+                        case "firstName":
+                            setFirstNameError(null);
+                            break;
+                        case "lastName":
+                            setLastNameError(null);
+                            break;
+                        case "emailAddress":
+                            setEmailAddressError(null);
+                            break;
+                    }
+                },
+                onValidating: (data: PrimerValidatingComponentData<AchValidatableData>) => {
+                    const log = `\onValidating: ${JSON.stringify(data)}\n`;
+                    console.log(log);
+                },
+                onValidationError: (data: PrimerComponentDataValidationError<AchValidatableData>) => {
+                    const log = `\nonValidationError: ${JSON.stringify(data)}\n`;
+                    console.log(log);
+                    switch (data.data.validatableDataName) {
+                        case "firstName":
+                            setFirstNameError(data.error.description);
+                            break;
+                        case "lastName":
+                            setLastNameError(data.error.description);
+                            break;
+                        case "emailAddress":
+                            setEmailAddressError(data.error.description);
+                            break;
+                    }
+                },
+            };
+            console.log("Initializing Stripe ACH component")
+            try {
+                component = await achManager.provide(achManagerProps);
+                console.log("Starting Stripe ACH component");
+                component?.start();
+            } catch (error) {
+                console.log("Failed to init Stripe ACH component: " + error);
+            }
+        })()
+    }, []);
+
+    const onSubmit = async () => {
+        try {
+            await component.submit();
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const handleFirstNameChange = async (value: string) => {
+        console.log("Setting first name");
+        setFirstName(value);
+        await component.handleFirstNameChange(value);
+    };
+
+    const handleLastNameChange = async (value: string) => {
+        console.log("Setting last name");
+        setLastName(value);
+        await component.handleLastNameChange(value);
+    };
+
+    const handleEmailAddressChange = async (value: string) => {
+        console.log("Setting email address");
+        setEmailAddress(value);
+        await component.handleEmailAddressChange(value);
+    };
+
+    return (
+        <View
+            style={{
+                padding: 16,
+                flex: 1,
+                backgroundColor: 'white',
+            }}>
+
+            <Text style={{ fontSize: 18, fontWeight: 'bold', paddingBottom: 8 }}>Stripe ACH session</Text>
+
+            <TextFieldWithError title='First name' value={firstName} error={firstNameError} onChangeText={handleFirstNameChange} />
+            <TextFieldWithError title='Last name' value={lastName} error={lastNameError} onChangeText={handleLastNameChange} />
+            <TextFieldWithError title='Email address' value={emailAddress} error={emailAddressError} onChangeText={handleEmailAddressChange} />
+
+            <View style={styles.button}>
+                <Button
+                    disabled={firstNameError != null || lastNameError != null || emailAddressError != null}
+                    onPress={() => onSubmit()}
+                    title="Submit"
+                />
+            </View>
+        </View>
+    );
+};
+
+const TextFieldWithError = ({ title, value, error, onChangeText }: { title: string, value: string, error: string | null, onChangeText: (value: string) => void }) => {
+    return (
+        <View>
+            <TextField
+                title={title}
+                textInputStyle={{
+                    backgroundColor: '#f5f5f5',
+                    borderColor: '#f5f5f5',
+                    paddingHorizontal: 10,
+                }}
+                style={{
+                    marginTop: 20,
+                    borderRadius: 5,
+                    marginHorizontal: 5,
+                }}
+                placeholder={title}
+                value={value}
+                onChangeText={onChangeText}
+            />
+            {error ? <Text style={{color: 'red', marginTop: 4, marginHorizontal: 10 }}>{error}</Text> : null}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    button: {
+        paddingTop: 16,
+    },
+});
+
+export default HeadlessCheckoutStripeAchScreen;

packages/example/src/screens/HeadlessCheckoutVaultScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
+  Alert,
   Button,
   FlatList,
   ScrollView,
@@ -22,6 +23,7 @@ import {
   PrimerSettings,
   ValidationError
 } from '@primer-io/react-native';
+import { showAchMandateAlert } from './AchMandateAlert';
 
 let log: string = "";
 let merchantPaymentId: string | null = null;
@@ -84,6 +86,11 @@ export default HeadlessCheckoutVaultScreen = (props: any) => {
         merchantCheckoutAdditionalInfo = additionalInfo;
         updateLogs(`\nℹ️ onCheckoutPending\nadditionalInfo: ${JSON.stringify(additionalInfo, null, 2)}\n`);
         setIsLoading(false);
+        switch(merchantCheckoutAdditionalInfo.additionalInfoName) {
+          case "DisplayStripeAchMandateAdditionalInfo":
+            showAchMandateAlert();
+            break;
+        }
       },
       onCheckoutPending: (checkoutAdditionalInfo) => {
         merchantCheckoutAdditionalInfo = checkoutAdditionalInfo;
@@ -297,19 +304,31 @@ export default HeadlessCheckoutVaultScreen = (props: any) => {
       switch (paymentMethodType) {
         case "PAYMENT_CARD":
         case "GOOGLE_PAY":
-        case "APPLE_PAY":
-          const last4Digits = item.paymentInstrumentData.last4Digits
+        case "APPLE_PAY": {
+          let last4Digits = item.paymentInstrumentData.last4Digits
           if (last4Digits !== undefined) {
             suffix = "••••" + last4Digits
           }
           break;
-        case "PAYPAL":
+        }
+        case "PAYPAL": {
           suffix = item.paymentInstrumentData?.externalPayerInfo?.email ?? ""
           break;
-        case "KLARNA":
+        }
+        case "KLARNA": {
           const billingAddress = item.paymentInstrumentData?.sessionData?.billingAddress
           suffix = billingAddress?.email ?? ""
           break;
+        }
+        case "STRIPE_ACH": {
+          const bankName = item.paymentInstrumentData?.bankName ?? "-";
+          suffix = "(" + bankName + ")"
+          const last4Digits = item.paymentInstrumentData?.last4Digits;
+          if (last4Digits !== undefined) {
+            suffix += " ••••" + last4Digits
+          }
+          break;
+        }
       }
       return paymentMethodType + ": " + (suffix ?? "-");
   }