[$1000] Create new library and native module react-native-wallet

[thienlnam]

To support tokenization in NewDot which is adding a virtual card to Apple / Google Pay, we will need access to some native methods.

Problem:
Apple Pay and Google Pay are table stakes in the card market today. We support both of them for physical and virtual cards. Going forward, members will be able to access their virtual card details in NewDot. However, it isn't intuitive to know that you can copy your virtual card details, and manually key them into the Apple/Google wallet apps to tokenize your virtual card.

We're going to create a new package that will return the necessary parameters and call native methods for adding a card to the wallet

The endpoint we want to call is CreateDigitalWallet.
We will need to call native modules to fetch specific native variables to call CreateDigitalWallet

• deviceID
• certificates
• nonce
• nonceSignature

Then once we have the return values, we will call the native modules to add these to apple / google wallets

CreateDigitalWallet Summary

The parameters required for the new CreateDigitalWallet API/auth command are:

Mutual parameters	Android specific parameters	iOS specific parameters
1.appVersion	1.walletAccountID 2.deviceID	1.certificates 2.nonce 3.nonceSignature

The return values for the new CreateDigitalWallet API/auth command are:

Mutual return values	Android return values	iOS return values
1.cardToken	1.opaquePaymentCard 2.userAddress 3.network 4.tokenServiceProvider 5.displayName 6.lastDigits	1.encryptedPassData 2.activationData 3.ephemeralPublicKey

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e91e840e65f1cbba
• Upwork Job ID: 1765158784361259008
• Last Price Increase: 2024-03-12

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e91e840e65f1cbba

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @akinwale (External)

[melvin-bot]

Triggered auto assignment to @lschurr (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[suneox]

Hi @thienlnam how can I access issue?

[thienlnam]

Hey @suneox, I copied what was relevant from the issue into this description

[lschurr]

Hey @thienlnam - are we just waiting for proposals on this one?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

Upwork job price has been updated to $1000

[thienlnam]

Updated the bounty since this is a more intensive - let's give it another week and then we can hand it to our expert contributors? cc @lschurr

[brunovjk]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The problem identified is that users may find it unintuitive to manually input their virtual card details into the Apple Pay or Google Pay wallet apps.

What is the root cause of that problem?

New Feature

What changes do you think we should make in order to solve the problem?

The proposed solution is to create a new package that will handle the process of adding a Expensify NewDot Virtual Card to the Google Pay/Apple Pay Wallet by creating a new package that will return the necessary parameters and call native methods for adding the card to the wallet

First we need to call native modules to fetch specific native variables:

1. Mutual Parameters:

   • appVersion: We'll utilize the react-native-device-info library to fetch the current version of the application.

2. For Android:

   • walletAccountID: We'll use native methods provided by the Google Pay API to retrieve the user's Google account ID associated with their Google Pay wallet. This ID is typically obtained through the Google Pay PaymentDataRequest object, specifically from the getGoogleTransactionId() method.
   • deviceID: To fetch the unique device identifier (ID) for Android devices, we'll utilize the react-native-device-info library.

3. For iOS:

   • certificates: We will utilize the server certificates provided by Apple's PKAddPaymentPassRequest class for adding payment passes to Apple Pay.
   • nonce: We will generate a nonce using cryptographic operations, such as elliptic curve cryptography (ECC), as required by Apple's PKAddPaymentPassRequest class.
   • nonceSignature: nonceSignature: We will generate a nonce signature using cryptographic operations, such as ECC, as specified by Apple's PKAddPaymentPassRequest class.

Fetch return values:

4. For Android:

   • Android Push Provisioning API: We need to utilize this API to interact with Google Pay services and retrieve the necessary return values. This includes obtaining the opaquePaymentCard, userAddress, network, tokenServiceProvider, displayName, and lastDigits. We can integrate the Android Push Provisioning API using the official documentation provided by Google.

5. For iOS:

   • Apple Wallet PassKit Framework: To interact with Apple Wallet and retrieve return values such as encryptedPassData, activationData, and ephemeralPublicKey, we'll need to use Apple's PassKit framework. This framework provides APIs for adding passes to Apple Wallet and managing pass data.

What alternative solutions did you explore? (Optional)

N/A

Note: While I've outlined the proposed solution based on the current understanding of the problem and available resources, I'm open to exploring alternative approaches suggested by the team.

[lschurr]

Could you review the proposal @akinwale?

[brunovjk]

Sorry, I can't answer your question. Unfortunately when it comes to permissions I cannot do much.

[brunovjk]

Same as above :D

[thienlnam]

Update: Attempted to test canAddPaymentPass() method for adding cards to Apple Pay, but discovered that we need a production build to fully test it:
"Adding a card to Apple Wallet can be tested only via TestFlight, which requires a production build with a specific entitlement in both provisioning profile and in Entitlements-Release.plist."

I can generate an adhoc build on your PR which should allow this to get tested on an iOS device.

Can you turn your branch into a draft PR?

@thienlnam @brunovjk do we still need to whitelist the new App ID with Apple/Google? If so, curious if y'all have any ideas for #36957 (comment)?

I can get the answers to these - will DM you

[joekaufmanexpensify]

sweet. TY!

[brunovjk]

I'll be OOO until May 6th

[brunovjk]

Update: Continuing to gather iOS native calls this week

[brunovjk]

Same as above :D

[brunovjk]

Update: Keep working on iOS modules

[brunovjk]

Update: Started structuring files for native Android modules

[brunovjk]

Update: Keep working on native Android modules
local branch: https://github.com/brunovjk/Expensify-App/tree/feat/36957/modules/react-native-wallet

[brunovjk]

Update: Continue working on the local branch

[brunovjk]

Update: Same as above.

[brunovjk]

Update: Continue working on the local branch: https://github.com/brunovjk/Expensify-App/tree/feat/36957/modules/react-native-wallet

[brunovjk]

Same as above

[melvin-bot]

📣 @Darren120! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[brunovjk]

Update: Making progress on error handling, documentation, and unit tests.
Next: Build the library locally