feat: add expo plugin and example (#49)

Co-authored-by: Michał Skałka <michal.skalka@swmansion.com>

Author: wcastand

.eslintignore

@@ -6,6 +6,7 @@
 
 # Output of the build process & scripts
 lib/**/*
+plugin/build/**/*
 scripts/**/*
 
 babel.config.js
@@ -14,3 +15,4 @@ react-native.config.js
 jest.config.js
 webpack.config.js
 .eslintrc.js
+app.plugin.js

.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
     },
   },
   root: true,
+  ignorePatterns: ['plugins/build/**'],
   rules: {
     'rulesdir/prefer-underscore-method': 'off',
     'rulesdir/prefer-import-module-contents': 'off',
@@ -66,5 +67,11 @@ module.exports = {
     '@typescript-eslint/array-type': ['error', {default: 'array-simple'}],
     '@typescript-eslint/consistent-type-definitions': 'off',
     'curly': ['error', 'all'],
+    '@lwc/lwc/no-async-await': 'off',
+    'no-return-await': 'off',
+    'no-else-return': 'off',
+    'import/prefer-default-export': 'off',
+    'no-restricted-imports': 'off',
+    'react/destructuring-assignment': 'off',
   },
 };

.github/workflows/typescript.yml

@@ -32,5 +32,5 @@ jobs:
       - name: Typecheck library
         run: npm run typecheck -- --project tsconfig.json
 
-      - name: Typecheck example app
-        run: npm run typecheck -- --project example/tsconfig.json
+      - name: Typecheck common app
+        run: npm run typecheck -- --project apps/common-app/tsconfig.json

.gitignore

@@ -39,10 +39,10 @@ android.iml
 
 # Cocoapods
 #
-example/ios/Pods
+apps/basic-example/ios/Pods
 
 # Ruby
-example/vendor/
+apps/basic-example/vendor/
 
 # node.js
 #
@@ -66,6 +66,10 @@ ios/generated
 android/generated
 
 # Android  libs (Google Tap And Pay SDK)
-example/android/libs
+apps/basic-example/android/libs
 
 .kotlin/
+
+# expo plugin build
+plugin/build/
+*.tsbuildinfo

.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

.prettierignore

@@ -6,6 +6,7 @@ CODE_OF_CONDUCT.md
 .well-known
 desktop/dist/**/*.js
 dist/**/*.js
+plugin/build/**/*.js
 assets/animations
 android
 ios

README.md

@@ -5,10 +5,11 @@
 - ♻️ Universal solution (Apple Wallet and Google Wallet)
 - 💳 Easy and secure addition of payment cards from your app directly
 - 💰 Supports Visa, MasterCard, Amex and Discover payment cards
+- 🎉 Expo support (expo-plugin)
 
 ## Getting started
 
-Using the `react-native-wallet` Push Provisioning features requires proper configuration and access from both Google and Apple. 
+Using the `react-native-wallet` Push Provisioning features requires proper configuration and access from both Google and Apple.
 Please follow the instructions below before installing the library:
 
 ### Android
@@ -20,10 +21,10 @@ To be able to interact with the Google Wallet on the Android please make sure to
 1. Visit [the Google Pay Android Push Provisioning API documentation](https://developers.google.com/pay/issuers/apis/push-provisioning/android/) and request access to it.
 
 2. Once getting an approval from the Google team
-	1. Download the [TapAndPay SDK](https://developers.google.com/pay/issuers/apis/push-provisioning/android/releases). 
-	2. Unzip it and extract the SDK into the `/android/libs` folder in your React Native project (if there is no `libs` folder, create one). 
+	1. Download the [TapAndPay SDK](https://developers.google.com/pay/issuers/apis/push-provisioning/android/releases).
+	2. Unzip it and extract the SDK into the `/android/libs` folder in your React Native project (if there is no `libs` folder, create one).
 	3. Add `/android/libs` to `.gitignore`.
-	
+
 3. Then connect the SDK to your project in `build.gradle`, for example like in [example/android/build.gradle](https://github.com/Expensify/react-native-wallet/blob/main/example/android/build.gradle):
 
 ```groovy
@@ -37,7 +38,7 @@ allprojects {
 
 #### Step 2: Whitelist your app for SDK use.
 
-To use the Google SDK in your app, you will need to whitelist your app details. Without it, calling some functions will result in a `Not verified` error. 
+To use the Google SDK in your app, you will need to whitelist your app details. Without it, calling some functions will result in a `Not verified` error.
 To resolve it, please follow the instructions from [the official Google documentation](https://developers.google.com/pay/issuers/apis/push-provisioning/android/allowlist).
 
 For your builds, you will need to prepare your app's `package name` and `fingerprint` following [these steps](https://developers.google.com/pay/issuers/apis/push-provisioning/android/allowlist#how_to_get_your_apps_fingerprint). The values should, for example, look like this:
@@ -72,13 +73,13 @@ Make sure to familiarize yourself with that document before deploying your app.
 
 ### Step 2: Activate the entitlement
 
-After getting a positive response from Apple, open the developer portal panel and search `Certificates, Identifiers & Profiles` -> `Profiles` -> `Our distribution profile` -> `Edit` and add the `ApplePay In-App Provisioning Distribution` entitlement. 
+After getting a positive response from Apple, open the developer portal panel and search `Certificates, Identifiers & Profiles` -> `Profiles` -> `Our distribution profile` -> `Edit` and add the `ApplePay In-App Provisioning Distribution` entitlement.
 It’s available only for the production environment so your QA must work with physical devices and cards.
 
 
 ### Step 3: Add the entitlement to your project
 
-Add `com.apple.developer.payment-pass-provisioning` entitlement to your project. Find or create `.entitlements` file in your project and add the entitlement like below (similarly to [WalletExample.entitlements](https://github.com/Expensify/react-native-wallet/blob/main/example/ios/WalletExample/WalletExample.entitlements)): 
+Add `com.apple.developer.payment-pass-provisioning` entitlement to your project. Find or create `.entitlements` file in your project and add the entitlement like below (similarly to [WalletExample.entitlements](https://github.com/Expensify/react-native-wallet/blob/main/example/ios/WalletExample/WalletExample.entitlements)):
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
@@ -105,14 +106,44 @@ or
 yarn add @expensify/react-native-wallet
 ```
 
+### Expo plugin
+
+To use `@expensify/react-native-wallet` with expo, you will need to use the expo-plugin.
+
+In your `app.json` file, add the following configuration:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+  			"@expensify/react-native-wallet",
+  			{
+  				enableApplePayProvisioning: true,
+  				googleTapAndPaySdkPath: "./libs/tapandpay-v18.7.0.zip", // path to the Google Tap & Pay SDK zip file
+  			},
+      ],
+    ]
+  }
+}
+```
 
+You will need to rebuild your app after that since the lib has native files.
+
+```bash
+npx expo prebuild --clean
+npx expo run:ios
+npx expo run:android
+```
 
-## Required data 
+
+
+## Required data
 Here you can find data elements used in the library, essential to work with Google Wallet and Apple Wallet APIs.
 
 ### Android
 - **Opaque Payment Card** (OPC) - a binary blob of information Google Pay receives from the issuer app that could be presented to TSP to receive a token.
-- **Token Service Provider** (TSP) - a service that enhances payment security by replacing a credit card number during transactions with a unique digital identifier - token. The TSP specifies the tokenization service used to create a given token e.g. Visa, MasterCard, American Express. 
+- **Token Service Provider** (TSP) - a service that enhances payment security by replacing a credit card number during transactions with a unique digital identifier - token. The TSP specifies the tokenization service used to create a given token e.g. Visa, MasterCard, American Express.
 - **Token Reference ID** - a unique identifying number to refer to a DPAN (Dynamic Personal Account Number). Token Providers will assign each DPAN an issuer token ID at the time of tokenization.
 
 ### iOS
@@ -170,10 +201,10 @@ The library offers seven functions for seamless integration and use of the Apple
 ### `AddToWalletButton`
 
 A ready-to-use component that simplifies the addition of payment cards to Google Wallet and Apple Wallet. The button automatically adapts its appearance according to the platform and language specified.
-It uses official assets provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) in their Wallet-related branding guidelines. 
+It uses official assets provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) in their Wallet-related branding guidelines.
 
 > [!IMPORTANT]
-> Please bear in mind the brand rules provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) when adding this component to your application. 
+> Please bear in mind the brand rules provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) when adding this component to your application.
 
 Adhering to these guidelines is crucial not only to comply with legal requirements but also to reassure users of the authenticity and security of your application.
 
@@ -204,6 +235,40 @@ Adhering to these guidelines is crucial not only to comply with legal requiremen
 |:----:|:---------------:|
 | <img src="./assets/buttons/android_button.svg" height="50" /> | <img src="./assets/buttons/ios_button.svg" height="50" /> |
 
+# Hex Encoding
+
+This library use base64 encoding to encode the data. Yours might use hex encoding.
+
+If that is the case, you will need to convert the data in the proper format.
+
+This is an example of how to convert data to hex format:
+
+```ts
+import { Buffer } from "buffer"
+const base64ToHex = (base64: string): string => Buffer.from(base64, "base64").toString("hex")
+
+[...]
+
+	const issuerEncryptPayloadCallback = async (
+		nonce: string,
+		nonceSignature: string,
+		certificate: string[],
+	): Promise<IOSEncryptPayload> => {
+		try {
+			const payload = {
+				encryptionDetails: {
+					nonce: base64ToHex(nonce),
+					nonceSignature: base64ToHex(nonceSignature),
+					wspCertificates: certificate,
+				},
+				serialNumber,
+				wspId: "APPLE" as const,
+			}
+[...]
+```
+
+This will depend on the implementation of your backend/issuer so make sure to check with them otherwise IOS might fail to provision the card.
+
 # Publishing your app
 
 To successfully publish your app, you will need to navigate through a series of mandatory test cases on both platforms.
@@ -214,14 +279,14 @@ Before deploying your app to the Google Play Store, make sure you have taken car
 
 The latest information about deploying apps with Google TapAndPay SDK can be found in the [pre-launch process](https://developers.google.com/pay/issuers/apis/push-provisioning/android/launch-process#step_3_issuer_app_product_review) and [beta tests](https://developers.google.com/pay/issuers/apis/push-provisioning/android/beta-testing) sections in Google documentation. Make sure to complete all of the steps specified by Google connected to the __Google's branding__, __API safety__, and __app stability__.
 
-The app will need to be reviewed by Google. During this process, it will need to pass 4 mandatory test cases that are specified [here](https://developers.google.com/pay/issuers/apis/push-provisioning/android/test-cases). They verify how your app handles card state tracking in different scenarios. 
+The app will need to be reviewed by Google. During this process, it will need to pass 4 mandatory test cases that are specified [here](https://developers.google.com/pay/issuers/apis/push-provisioning/android/test-cases). They verify how your app handles card state tracking in different scenarios.
 
 > [!NOTE]
 >Please make sure to hide the `Add to Google Wallet` buttons when cards are already added to the wallet.
 
 ### iOS
 
-When implementing the In-App Push Provisioning feature in your App make sure that your app follows Apple's [branding guidelines connected to Apple Wallet](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/). Remember that you must not create your own buttons or your app could be rejected at revision. You can use the[ AddWalletButton component](#components) instead! 
+When implementing the In-App Push Provisioning feature in your App make sure that your app follows Apple's [branding guidelines connected to Apple Wallet](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/). Remember that you must not create your own buttons or your app could be rejected at revision. You can use the[ AddWalletButton component](#components) instead!
 When the pass is already provisioned, make sure to hide this button and replace it with text like `Added to Apple Wallet`. The card is fully provisioned once it added to your main device (user's iPhone) and all linked devices (for example Apple Watch).
 
 Next to branding guidelines, please follow the instructions and best practices from [the In-App provisioning documentation]((#ios)) provided by Apple.
@@ -246,7 +311,6 @@ Additionally, when submitting your app to the App Store, you must include:
 
 `@expensify/react-native-wallet` is compatible with the five latest minor releases of React Native (≥0.76.0) and works exclusively with the new architecture.
 
-
 # Contributing
 
 Contributions to this library are done under [https://github.com/Expensify/App](https://github.com/Expensify/App). Please refer to that repo and all its guidelines for contributing.

app.plugin.js

@@ -0,0 +1,2 @@
+// This file configures the entry file for your plugin.
+module.exports = require('./plugins/build');