[wip] Apple Pay

examples/expo/package.json

@@ -6,10 +6,12 @@
     "expo": "expo",
     "dev": "expo start --localhost",
     "android": "rimraf android && expo run:android --no-bundler",
-    "android:release": "rimraf android && expo run:android --no-bundler --variant release",
+    "android:release": "pnpm android --variant release",
     "android:release:proguard": "PROGUARD_ENABLED=true pnpm android:release",
     "ios": "rimraf ios && expo run:ios --no-bundler",
-    "ios:release": "rimraf ios && expo run:ios --no-bundler --configuration Release"
+    "ios:release": "pnpm ios --configuration Release",
+    "xcode": "open ios/evervaultexpoexample.xcworkspace",
+    "pod": "cd ios && pod"
   },
   "dependencies": {
     "@evervault/react-native": "workspace:*",

examples/expo/src/App.tsx

@@ -7,6 +7,7 @@ import { CardExample } from "@/src/screens/Card";
 import { ThreeDSecureExample } from "@/src/screens/ThreeDSecure";
 import { Image, ImageSourcePropType } from "react-native";
 import { EncryptExample } from "@/src/screens/Encrypt";
+import { PayExample } from "@/src/screens/Pay";
 
 function tabBarIcon(source: ImageSourcePropType) {
   return function TabBarIcon({ color, size }: { color: string; size: number }) {
@@ -33,6 +34,15 @@ const Tabs = createBottomTabNavigator({
       },
     },
 
+    Pay: {
+      screen: PayExample,
+      options: {
+        headerShown: false,
+        title: "Pay",
+        tabBarIcon: tabBarIcon(require("@/assets/images/icons/smartphone.png")),
+      },
+    },
+
     ThreeDSecure: {
       screen: ThreeDSecureExample,
       options: {

examples/expo/src/screens/Pay.tsx

@@ -0,0 +1,117 @@
+import { Code } from "@/src/ui/Code";
+import { Heading } from "@/src/ui/Heading";
+import { ApplePayButton, ApplePayResponse } from "@evervault/react-native";
+import { useState } from "react";
+import { Platform, ScrollView, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+function format(value: any) {
+  if (value === undefined) {
+    return "";
+  }
+
+  return JSON.stringify(value, null, 2);
+}
+
+export function PayExample() {
+  const insets = useSafeAreaInsets();
+
+  const [response, setResponse] = useState<ApplePayResponse | null>(null);
+
+  return (
+    <ScrollView
+      style={[styles.scroll, { paddingTop: insets.top }]}
+      contentContainerStyle={styles.container}
+      keyboardShouldPersistTaps="always"
+      keyboardDismissMode="interactive"
+    >
+      <View style={styles.header}>
+        <Heading>Pay</Heading>
+      </View>
+
+      <View style={styles.body}>
+        <ApplePayButton
+          style={styles.applePayButton}
+          merchantId="merchant-id"
+          supportedNetworks={["visa", "masterCard", "amex", "discover"]}
+          appearance="automatic"
+          paymentType="book"
+          onAuthorizePayment={setResponse}
+          onError={console.log}
+          onPrepareTransaction={async () => {
+            return {
+              type: "oneOffPayment",
+              country: "US",
+              currency: "USD",
+              paymentSummaryItems: [
+                { label: "Product", amount: "30.00" },
+                { label: "Product 2", amount: "0.01" },
+                { label: "Total", amount: "30.01" },
+              ],
+            };
+          }}
+        />
+        <Code style={styles.code}>{format(response)}</Code>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+    backgroundColor: "white",
+  },
+  container: {
+    paddingBlock: 16,
+    gap: 16,
+    flex: 1,
+  },
+  header: {
+    paddingInline: 16,
+  },
+  error: {
+    color: "red",
+    paddingInline: 16,
+  },
+  body: {
+    flex: 1,
+    gap: 16,
+    paddingInline: 16,
+  },
+
+  applePayButton: {
+    width: "100%",
+    height: 50,
+  },
+
+  chipsScroll: {
+    flexGrow: 0,
+    marginBottom: -6,
+  },
+  chips: {
+    paddingInline: 16,
+    flexDirection: "row",
+    gap: 4,
+  },
+  editor: {
+    flex: 1,
+    padding: 14,
+    backgroundColor: "#FBFAFD",
+    borderWidth: 1,
+    borderColor: "#E9E5F5",
+    borderRadius: 12,
+    fontFamily: Platform.select({
+      ios: "Menlo",
+      default: "monospace",
+    }),
+    fontSize: 12,
+    lineHeight: 20,
+    width: "100%",
+    color: "#000",
+  },
+
+  code: {
+    flex: 1,
+  },
+});