[$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
• Automatic offers:
• brunovjk | Reviewer | 107119121

Issue Owner

Current Issue Owner: @lschurr

[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?

[parasharrajat]

This is not yet completed. cc: @roryabraham

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.40-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [No QA] Simplify hybrid and standalone setup #60494

If no regressions arise, payment will be issued on 2025-05-14. 🎊

For reference, here are some details about the assignees on this issue:

• @akinwale requires payment through NewDot Manual Requests
• @parasharrajat requires payment through NewDot Manual Requests
• @brunovjk requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@akinwale / @parasharrajat / @brunovjk] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@lschurr] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.46-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Setup react-native-wallet on Android #60270

If no regressions arise, payment will be issued on 2025-05-27. 🎊

For reference, here are some details about the assignees on this issue:

• @akinwale requires payment through NewDot Manual Requests
• @parasharrajat requires payment through NewDot Manual Requests
• @brunovjk requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@akinwale / @parasharrajat / @brunovjk] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@lschurr] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[parasharrajat]

PR #60494 was deployed to PROD 2 weeks back, but somehow the automation failed to update the issue status. As I reviewed only that PR. It should be ready for payment for me as per #36957 (comment). @lschurr Can you please add payment summary for me?

[mountiny]

@parasharrajat we are going to wait with this one once the project is completed I think to not crumble this to many payments, it should not take long

[Skalakid]

Hello, the react-native-wallet library is nearly finished. We are now waiting for the results of testing in-app provisioning on E/App production. We need to test the following things:

• Adding Expensify Card to the Apple and Google Wallet from E/App
• Getting cards in-wallet state inside the E/App - verifying if the Add to ... Wallet button disappears after the card is successfully added
• Adding Expensify Card to the Wallet directly from the Apple/Google Wallet App, and verifying if the card state is updated in E/App

If all the above test cases succeed, we will publish the library to npm :D