[$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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[bot]]

:warning: 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 :warning:

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

[thienlnam]

@brunovjk Can you add some details such like what native methods you are going to use to fetch the items we'll need to pass to CreateDigitalWallet?

[jeremy-croff]

Do we already have the entitlements necessary to add cards to apple like mentioned here: https://developer.apple.com/documentation/passkit_apple_pay_and_wallet/pkaddpaymentpassrequest?language=objc ?

[brunovjk]

@brunovjk Can you add some details such like what native methods you are going to use to fetch the items we'll need to pass to CreateDigitalWallet?

Proposal

Updated Added detailed steps for fetching parameters and executing tokenization process.

cc: @thienlnam

[akinwale]

@brunovjk's proposal looks good to me. However, the relevant API to handle adding cards to to Google Pay is the Android Push Provisioning API, not the Google Pay API which is used for checkout.

@thienlnam Looks like special access is required to be able to view the documentation (for the Android API), while the iOS view controller requires a special entitlement.

Android

• Android Push Provisioning API
• https://developers.google.com/pay/issuers/request-access?api=true

iOS

• PKAddPaymentPassViewController reference

🎀👀🎀 C+ reviewed.

[brunovjk]

Proposal

Updated Updated the Android section to reflect the correct API usage. Thanks, @akinwale, for the review and correction.

[lschurr]

Are we good to assigne this to @brunovjk? @akinwale @thienlnam?

[thienlnam]

Yup - let's get started on this - thanks! Let us know if you need any additional permissions. Before we create the library - let's just start with a branch in App so we can ensure it all works before we move it to a new library

[melvin-bot[bot]]

❌ There was an error making the offer to @akinwale for the Reviewer role. The BZ member will need to manually hire the contributor.

[melvin-bot[bot]]

❌ There was an error making the offer to @brunovjk for the Contributor role. The BZ member will need to manually hire the contributor.

[brunovjk]

let's get started on this

I'm diving straight into. Setting up the branch and will keep you posted here throughout the week. When I run into permissions and/or need further information, I'll be sure to ask. Thank you.

[brunovjk]

Task Checklist for Creating react-native-wallet Library and Native Module:

• [x] Create a new branch in the Expensify app repository.
• [x] Create react-native-wallet folder and run npx create-react-native-library to initialize the library.
• [ ] Familiarize with Google Pay and Apple Pay integration documentation.
  • [ ] Android Push Provisioning API
  • [x] PKAddPaymentPassViewController (iOS)
• [ ] Identify necessary native modules for Android and iOS platforms.
  • [ ] Android Push Provisioning API
  • [ ] PKAddPaymentPassViewController (iOS)
• [ ] Add react-native-device-info to fetch the app version.
• [ ] Integrate dependencies for Android Push Provisioning API.
• [ ] Integrate dependencies for iOS PassKit framework.
• [ ] Implement native methods to fetch parameters for Android (walletAccountID, deviceID).
• [ ] Implement native methods to fetch parameters for iOS (certificates, nonce, nonceSignature).
• [ ] Implement code to interact with Google Pay services for Android.
• [ ] Implement code to interact with Apple Wallet services for iOS.
• [ ] Define JavaScript functions to expose native module methods.
• [ ] Implement CreateDigitalWallet functionality in JavaScript.
• [ ] Test functionality on Android and iOS devices.
• [ ] Ensure compatibility with different React Native versions and device configurations.
• [ ] Document usage instructions for react-native-wallet library.
• [ ] Provide examples and code snippets for integration.

This checklist will be updated as we progress and when necessary. Any feedback is welcome.

[brunovjk]

Update:

• Created new branch.
• Initialized react-native-wallet.

Next: Review payment integration docs.

[brunovjk]

Update:

@thienlnam I've confirmed the need for permissions to access both Android Push Provisioning API and the PKAddPaymentPassViewController. These APIs require special permissions typically granted to card issuers. I've looked into the steps required to request access, but it seems we'll need to navigate some bureaucratic processes with Google and Apple.

Google Requriment:

You must provide a corporate email address for access to the issuer developer's site

Apple Requriment:

You need special permission from Apple to submit apps with this key enabled. For more information, contact [email protected]

I'm wondering if anyone on the team has experience with obtaining these permissions or knows someone who does.

Next: To proceed with the next steps, particularly on Android, authorization is required to access the documentation.

[thienlnam]

@AndrewGable Probably knows best from our OldApp - do you remember going through this process / do we need to again with NewDot?

[AndrewGable]

We have the permissions, but you probably will have to work with @joekaufmanexpensify to get it added to the NewApp ID until we can add this to HybridApp.

[brunovjk]

Hey @joekaufmanexpensify! 😊 Do you mind lending a hand here?

[joekaufmanexpensify]

Sure, happy to help if I can. @AndrewGable mind clarifying a bit more what this means:

to get it added to the NewApp ID until we can add this to HybridApp.

I'm not super sure based on this what I'm supposed to be helping with.

[AndrewGable]

In the past we've had to provide our OldApp ID for Apple/Google to whitelist (I believe this was shared with Marqeta?), we will need to do the same for the NewApp ID