Is there a plan to support Expo out of the box ?

[wcastand]

Hi, First thanks for making this package.

I'm using Expo CNG and putting stuff in the android folder and modifying is not really possible. So i was wondering if you plan to add an expo module in the package to support those modifications. it looks like on the the IOs side, nothing is needed since the only change is in the entitlement that we can already do in the app config altho i guess having the module add it automatically would be nice too.

thanks again for the package!

I'm happy to help with the expo-module if needed, my two blocker are i need to figure it out how to get rootDir for the expo module and how i can safely copy paste in android/libs the sdk.

Also it's not super clear to me when you say unzip and extract, do we copy paste the unzip sdk with the same folder structure or we should only keep the folder at the end called play-services-tapandpay ?

[evgenyshenets91]

@wcastand If you don't want to do prebuild and use expo managed app create plugin for adjusting android build-gradle. Via plugin I am adding these lines to code:

 def walletSdkPath = new File(rootDir, "../modules/wallet-provisioning/android/libs/google-wallet-sdk/m2repository")
        if (walletSdkPath.exists()) {
            maven { url walletSdkPath.toURI() }
        }

Created and placed modules folder inside repo. Play-services is here:

[wcastand]

yeah i will probably do a module to handle this and the ios entitlement. maybe it can't be part of the repo since the tap and pay sdk is "private" so people need to provide it but i think part of the doc on how to do it in CNG expo would be great !

[thrcrt]

+1 here, need this!

[Skalakid]

Thanks for the feedback and +1s 🙌 If anyone already has a working config plugin setup, a PR would be super welcome! Ideally it could include:

• the plugin template (under plugin/)
• an update to the README explaining how Expo users can configure their own walletSdkPath

That way we can support Expo CNG users without shipping the private SDK inside the repo

[wcastand]

i should soon implement this to replace our custom modules. i didn't have time and the current implementation is pretty much the same as yours so was little benefit until we handle yellow path to switch.

but i will do it as a first step soon hopefully so i'll post the expo plugin/module once done 👍

[wcastand]

small update
still working on it and will let you know when it's on prod and tested but this is the expo plugin i have for now: https://gist.github.com/wcastand/4160c31062e085b043e4d78953642150

it seems to work in dev app, but need to push on production build to actually test since only our production app is validated to work with apple pay and google pay sdk.

[wcastand]

Update
I couldn't make it work so far and i had to focus on other things more urgent so reverted my changes to our local setup for now

i could build fine and didn't see any specific errors but trying to add a card was not working, i don't know if the issue was out config, the sdk or the expo-plugins tho. so will try again when i have time.

i can't make it work on IOS, Android seems good to go but on ios i get an error in the wallet flow (asking to setup later), i don't receive errors back from the module.

I tried to log at each step and i receive a proper payload and result from the back that i send back in the returned promise of the callback handler for ios.

only difference i could see between our current module to handle apple pay kit and this lib is in the way we format the nonce and nonceSignature.

you do this:

public func addPaymentPassViewController(
    _ controller: PKAddPaymentPassViewController,
    generateRequestWithCertificateChain certificates: [Data],
    nonce: Data, nonceSignature: Data,
    completionHandler handler: @escaping (PKAddPaymentPassRequest) -> Void) {
      let stringNonce = nonce.base64EncodedString() as NSString
      let stringNonceSignature = nonceSignature.base64EncodedString() as NSString
      let stringCertificates = certificates.map {
        $0.base64EncodedString() as NSString
      }

while in our module we do:

func addPaymentPassViewController(
        _ controller: PKAddPaymentPassViewController,
        generateRequestWithCertificateChain certificates: [Data],
        nonce: Data, nonceSignature: Data,
        completionHandler handler: @escaping (PKAddPaymentPassRequest) -> Void) {
            let mainCert = certificates[0].base64EncodedString(options: [])
            let subCert = certificates[1].base64EncodedString(options: [])

            onEncrypt([
                "certificates": [mainCert, subCert],
                "nonce": nonce.hexEncodedString(),
                "nonceSignature": nonceSignature.hexEncodedString(),
            ])


[...]

extension Data {
    struct HexEncodingOptions: OptionSet {
        let rawValue: Int
        static let upperCase = HexEncodingOptions(rawValue: 1 << 0)
    }

    func hexEncodedString(options: HexEncodingOptions = []) -> String {
        let format = options.contains(.upperCase) ? "%02hhX" : "%02hhx"
        return self.map { String(format: format, $0) }.joined()
    }
}

only diff i can find since we get no error, just not working on wallet app side, can only assume it's a difference in encoding the signature and nonce, since it's currently working in production with our custom module.

any chance you have a better idea than me why it's different and if that could be the reason?

[Skalakid]

Thanks for digging into this! The difference you spotted is important. Our implementation uses base64 encoding for nonce and nonceSignature, while your module uses hex encoding. Wallet/issuer APIs are very strict about those formats, so that mismatch could explain why the iOS flow fails without an explicit error. Certificates are expected in base64, but nonce/signature should be aligned with whatever your backend/issuer requires

[wcastand]

yes i just figure it out today
in our codebase, we need to convert the value we received in the ios callback

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,
			}
[...]

I just opened a draft PR to add expo plugin, i think i will add these possibility in the doc at the same time. It could save a lot of time to someone else 😅

[wcastand]

@Skalakid updated the Pull request, i think it's in a state where i need your input to know what to change to match your expectation doc wise and code wise.

like i said in the Pr, i never really publish an expo plugin as part of a lib so not sure i configured everything right.

[Skalakid]

Okay, thanks @wcastand. I now have to focus on some other tasks, but reviewing your PR is on my list and I will try to do it this week 👍