[$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 apple-pay-inquiries@apple.com

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

[brunovjk]

Hey @joekaufmanexpensify, I hope this message finds you well. I'm working on integrating the React Native Wallet but need guidance on permissions.

Accessing the Android Push Provisioning API and PKAddPaymentPassViewController requires special permissions. I'm unsure how to proceed with Expensify's existing ones. Could you provide direction on obtaining these permissions?

Thanks for your help!

[joekaufmanexpensify]

Got it. So this issue is adding support for in-app tokenization of virtual cards from NewDot to Apple and Google Pay? If so, that sounds great, and happy to get the app whitelisted with Apple and Google via Marqeta.

If Marqeta just needs to work with Apple and Google to whitelist the new app so we can access the Apple/Google Pay APIs for it, can you share the NewApp ID or point me in the direction of where I can find it so I can pass that along to Marqeta?

[AndrewGable]

• iOS: com.chat.expensify.chat
• Android: com.expensify.chat

[lschurr]

What's the latest here @joekaufmanexpensify @AndrewGable @brunovjk?

[brunovjk]

@joekaufmanexpensify is currently handling the process of whitelisting the New App with Apple and Google. Meanwhile, I'm in the process of identifying the necessary native modules for Android and iOS platforms. While iOS seems straightforward, I'm encountering difficulties accessing the documentation for Android: "To access restricted sections of our Device Tokenization documentation, you must be signed into a Google Account that's been authorized to view that content. Partners must use a Google Account associated with their corporate email address rather than a personal account." Currently, I don't have such an account configured. @lschurr @thienlnam Should we obtain it from Expensify, or should I procure it independently? Thank you.

[joekaufmanexpensify]

Yep. I just asked Marqeta to whitelist the new app IDs here!

[brunovjk]

Update

In process of whitelisting the New App with Apple and Google. In process of identifying the necessary native modules for Android and iOS platforms.

[thienlnam]

Currently, I don't have such an account configured. @lschurr @thienlnam Should we obtain it from Expensify, or should I procure it independently? Thank you.

Ah good question, I can sign up for access with my account and give you third party access - however it seems like you'll need to sign an NDA with Google to do so. Can you provide me the email you intend to use?

[brunovjk]

Can you provide me the email you intend to use?

brunovjk@gmail.com

you'll need to sign an NDA with Google

Great, I'll research further. Do you know if there is a cost for this? Thank you very much @thienlnam.

[thienlnam]

Nope there shouldn't be a cost associated with having to sign their NDA, but let us know if there is

[brunovjk]

Update:

Start implementing 'PKAddPaymentPassViewController'. @thienlnam We use Swift and Java, right?

Yep. I just asked Marqeta to whitelist the new app IDs here!

Did we have any updates? I don't have access to the link above to check.

I can sign up for access with my account and give you third party access

@thienlnam Sorry to bother, but did you have the chance to invite me? Thank you.

[thienlnam]

They got back to me and provided access - I had you listed as a third party developer. Did you get sent an NDA for you to sign?

[brunovjk]

Great! I just registered, google will send the NDA within one business day, they said. Thank you very much @thienlnam

[brunovjk]

Update:

In the process of signing the NDA Google to begin implementing Android Push Provisioning API.

[lschurr]

Hey @thienlnam - Can you help me associate this feature with a wave or VIP project? Is this part of wave-collect or vip-split? Or something else?

[brunovjk]

They got back to me and provided access - I had you listed as a third party developer. Did you get sent an NDA for you to sign?

Hi @thienlnam, Could you please share the corporate email address you used to grant me access? I need it to proceed with signing the NDA requested by Google Support. Thank you.

[thienlnam]

Hi @thienlnam, Could you please share the corporate email address you used to grant me access? I need it to proceed with signing the NDA requested by Google Support. Thank you.

jack@expensify.com

Hey @thienlnam - Can you help me associate this feature with a wave or VIP project? Is this part of wave-collect or vip-split? Or something else?

This would be part of wave-collect - cc @joekaufmanexpensify to confirm here, here was the original issue

[brunovjk]

Update:

Android: Waiting for response from Google support. Apple: Implementing 'PKAddPaymentPassViewController'

[brunovjk]

Update:

Android: Waiting for response from Google support. Apple: Implementing 'PKAddPaymentPassViewController'

Same as above. If I don't hear from Google Support by the beginning of next week, I will create a Google Workspace in my name to continue, we at least need to access the documentation now.

[brunovjk]

Update: Same as above