update example app for new alpha.2 release

ios/Podfile.lock

@@ -491,7 +491,7 @@ PODS:
   - RNSVG (14.1.0):
     - React-Core
   - SocketRocket (0.6.1)
-  - tyro-pay-api-react-native (0.0.1-alpha.1):
+  - tyro-pay-api-react-native (0.0.1-alpha.2):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - Yoga (1.14.0)
@@ -724,10 +724,10 @@ SPEC CHECKSUMS:
   ReactCommon: 5f704096ccf7733b390f59043b6fa9cc180ee4f6
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  tyro-pay-api-react-native: 6300368a6f854e02059a4bf1c298150944c04aab
+  tyro-pay-api-react-native: e9ccad89ca70def21c2f3231af42701250dee86f
   Yoga: 4c3aa327e4a6a23eeacd71f61c81df1bcdf677d5
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 18fd48e808e852bd26c1f45356abe046e8173b89
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

package.json

@@ -31,7 +31,7 @@
     "gradlew:build:sdk": "cd android && chmod +x ./gradlew && ./gradlew --no-daemon -S -Dorg.gradle.dependency.verification=off clean build"
   },
   "dependencies": {
-    "@tyro/tyro-pay-api-react-native": "0.0.1-alpha.1",
+    "@tyro/tyro-pay-api-react-native": "^0.0.1-alpha.2",
     "react": "18.2.0",
     "react-native": "0.72.7",
     "react-native-svg": "^14.1.0",

src/App.tsx

@@ -54,14 +54,10 @@ function App(): JSX.Element {
                       googlePay: {
                         enabled: true,
                         merchantName: 'Example Merchant',
-                        supportedNetworks: ['mastercard'],
                       },
-                    },
-                    styleProps: {
-                      googlePayButton: {
-                        buttonColor: 'black',
-                        buttonType: 'pay',
-                        buttonBorderRadius: 4,
+                      applePay: {
+                        enabled: true,
+                        merchantIdentifier: 'The merchant name',
                       },
                     },
                   }}

src/CheckoutPage.tsx

@@ -6,14 +6,24 @@ import { useTyro, PaySheet } from '@tyro/tyro-pay-api-react-native';
 import React, { useEffect } from 'react';
 import { ActivityIndicator, Button, StyleSheet, Text, View } from 'react-native';
 import ErrorHandler from 'Error';
+import PayButton from 'PayButton';
 
 interface CheckoutPageProps {
   paySecret: string;
   resetPaySecret: () => void;
 }
 
 const CheckoutPage = ({ paySecret, resetPaySecret }: CheckoutPageProps): JSX.Element => {
-  const { initPaySheet, initialised, payRequest, isPayRequestReady, isPayRequestLoading, tyroError } = useTyro();
+  const {
+    initPaySheet,
+    initialised,
+    payRequest,
+    isPayRequestReady,
+    isPayRequestLoading,
+    tyroError,
+    isSubmitting,
+    submitPayForm,
+  } = useTyro();
 
   useEffect(() => {
     if (initialised === true && paySecret) {
@@ -41,6 +51,7 @@ const CheckoutPage = ({ paySecret, resetPaySecret }: CheckoutPageProps): JSX.Ele
     <>
       <ErrorHandler errorCode={tyroError?.errorCode ?? tyroError?.errorType} errorMessage={tyroError?.errorMessage} />
       {isPayRequestReady && <PaySheet />}
+      {isPayRequestReady && <PayButton onSubmit={submitPayForm} loading={isSubmitting} title="Pay" />}
       {isPayRequestLoading && <ActivityIndicator />}
     </>
   );

src/PayButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ActivityIndicator, TouchableOpacity, View, StyleSheet, Text } from 'react-native';
+
+type PayButtonProps = {
+  onSubmit: () => Promise<void>;
+  loading: boolean;
+  title: string;
+};
+
+const PayButton = ({ onSubmit, loading, title }: PayButtonProps): JSX.Element => {
+  return (
+    <View>
+      {loading ? (
+        <ActivityIndicator />
+      ) : (
+        <TouchableOpacity
+          style={[styles.container, styles.button]}
+          activeOpacity={0.3}
+          onPress={onSubmit}
+          accessibilityLabel="Submit the Pay Form"
+          testID="pay-button"
+        >
+          <Text style={styles.buttonText}>{title}</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 10,
+  },
+  button: {
+    borderRadius: 5,
+    height: 40,
+    width: '100%',
+    backgroundColor: 'blue',
+  },
+  buttonText: {
+    color: 'white',
+  },
+});
+
+export default PayButton;

src/tests/integration/subflows/wallets/assert-gpay.yml

@@ -1,4 +1,4 @@
 appId: com.exampleapp
 ---
 - assertVisible:
-    id: "com.exampleapp:id/pay_button_logo"
+    id: "google-pay-button"