update example app for new alpha.2 release

.github/workflows/codeql.yaml

@@ -45,11 +45,6 @@ jobs:
 
     steps:
 
-    - name: Install SSH Client 🔑
-      uses: webfactory/[email protected]
-      with:
-        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-
     - name: Checkout code
       uses: actions/checkout@v3
 

.github/workflows/integration-tests.yml

@@ -13,19 +13,17 @@ env:
 
 jobs: 
   android-e2e: 
-    runs-on: macos-latest
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        api-level: [33]
 
     steps:
       - name: Setup Node.js env
         uses: actions/[email protected]
         with:
           node-version: 18.0.0
 
-      - name: Install SSH Client 🔑
-        uses: webfactory/[email protected]
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-
       - name: Checkout code
         uses: actions/checkout@v3
 
@@ -37,14 +35,6 @@ jobs:
         with:
           distribution: 'corretto'
           java-version: '11'
-
-      - name: Gradle cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            ~/.gradle/caches
-            ~/.gradle/wrapper
-          key: gradle-${{ runner.os }}-${{ hashFiles('**/*.gradle*') }}-${{ hashFiles('**/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('**/buildSrc/**/*.kt') }}
 
       - name: Install Maestro CLI
         run: curl -Ls "https://get.maestro.mobile.dev" | bash
@@ -55,11 +45,41 @@ jobs:
       - name: Install Dependencies and build android
         run: |
           npm run install:no-pods
+
+      - name: Enable KVM
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Gradle cache
+        uses: gradle/actions/setup-gradle@v3
+
+      - name: AVD cache
+        uses: actions/cache@v4
+        id: avd-cache
+        with:
+          path: |
+            ~/.android/avd/*
+            ~/.android/adb*
+          key: avd-${{ matrix.api-level }}
+
+      - name: create AVD and generate snapshot for caching
+        if: steps.avd-cache.outputs.cache-hit != 'true'
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: ${{ matrix.api-level }}
+          arch: x86_64
+          target: google_apis
+          force-avd-creation: false
+          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+          disable-animations: false
+          script: echo "Generated AVD snapshot for caching."
 
       - name: Run Android Emulator and app
         uses: reactivecircus/android-emulator-runner@v2
         with:
-          api-level: 29
+          api-level: ${{ matrix.api-level }}
           arch: x86_64
           target: google_apis
           force-avd-creation: false
@@ -68,23 +88,47 @@ jobs:
           script: |
             npm run android:release
             npm run test:e2e:android
+        env:
+          MAESTRO_DRIVER_STARTUP_TIMEOUT: 30000
 
   ios-e2e:
     runs-on: macos-14
 
     steps:
 
-      - name: Install SSH Client 🔑
-        uses: webfactory/[email protected]
+      - name: Setup Node.js env
+        uses: actions/[email protected]
         with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+          node-version: 18.0.0
+
+      - name: setup-cocoapods
+        uses: maxim-lobanov/setup-cocoapods@v1
+        with:
+          version: 1.14.3
 
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Get package cache directory path
-        id: package-cache-dir-path
-        run: echo "::set-output name=dir::$(package cache dir)"
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - uses: actions/cache@v2
+        with:
+          path: ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-pods-
+
 
       - name: Install React Native CLI
         run: npm install react-native-cli
@@ -105,6 +149,8 @@ jobs:
         run: |
           npm run ios:release
           npm run test:e2e:ios
+        env:
+          MAESTRO_DRIVER_STARTUP_TIMEOUT: 30000
 
       - name: Stop Emulator
         run: killall "Simulator"

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"