Skip to content

nialldbarber/react-native-nitro-wallet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

27 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

react-native-nitro-wallet

React Native Nitro Wallet Logo

โš ๏ธ This package is under development, please report any issues!

A React Native Wallet integration package built with Nitro Modules. You can add a pass, detect the existence of a pass and remove a pass. Bulk add passes is coming soon ๐Ÿšง. Currently Apple Wallet (iOS) only, but support for Google Wallet (Android) coming soon ๐Ÿ‘€

โš ๏ธ Requirements

  • React Native v0.76.0 or higher
  • Node 18.0.0 or higher

๐Ÿ”ง Installation

yarn add react-native-nitro-wallet react-native-nitro-modules
cd ios && pod install

Important

It is recommended to first read Getting Started with Apple Wallet to get familiar with the concepts of creating, distributing and updating passes for Apple Wallet

This package assumes you have already a generated pass, which is generally served to the app via a backend. passkit-generator is a solid resource for this.

โš™๏ธ Set up

iOS

  • Follow the documentation on creating a Pass Type ID certificate
  • Open your project in xcode - open ${YourProjectName}.xcworkspace
  • Go to Target > Signing & Capabilities and click + Capability
  • Then filter by "Wallet" and click to add
  • This will generate a new Entitlements file: ${YourProjectName}/ios/${YourProject}/${YourProject}.entitlements. Which will add the following to it:
<key>com.apple.developer.pass-type-identifiers</key>
<array>
  <string>$(TeamIdentifierPrefix)*</string>
</array>
  • If you already have an entitlements file, then you don't need to follow the above, you can simply add the above code block to that file.
  • The wildcard (<string>$(TeamIdentifierPrefix)*</string>), is auto-generated when adding Wallet capabilities via xcode, but it can be flaky on newer versions of React Native. If you find this package is not working (adding, viewing, deleting passes etc), then try removing the wildcard and explicitly putting in your Pass Type ID like so: <string>$(TeamIdentifierPrefix)pass.com.example.myapp</string>
  • Once this is done, re-run:
cd ios && pod install

๐Ÿš€ Usage

import { Wallet } from "react-native-nitro-wallet";

๐Ÿ“˜ API Reference

canAddPassesToAppleWallet(): Promise<boolean>

Checks if the current device can add passes to Apple Wallet (e.g. Wallet app installed, supported device)

try {
  const canAddPass = await Wallet.canAddPassesToAppleWallet();
  return canAddPass // true or false
} catch (error) {
  console.error("Can't add pass");
}

addPassToAppleWallet(base64String: string): Promise<boolean>

Important

The parameter passed to addPassToAppleWallet must be base 64 encoded!

  • Adds a single pass to Apple Wallet
  • base64String: A base64-encoded .pkpass file
try {
  await Wallet.addPassToAppleWallet(base64PkPass);
} catch (error) {
  console.error("Failed to add pass to wallet");
}

viewPassInAppleWallet(cardIdentifier: string, serialNumber?: string): Promise<void>

Opens an existing pass in Apple Wallet

  • Use this if you want to let the user view the pass from inside your app
  • cardIdentifier: Your registered Pass Type ID
  • serialNumber: Optional - use if your system issues multiple passes under one ID
try {
  await Wallet.viewPassInAppleWallet('pass.com.example.myapp', '1234567890');
} catch (error) {
  console.error("Failed to view pass in wallet");
}

doesPassExistInAppleWallet(cardIdentifier: string, serialNumber?: string): Promise<boolean>

Checks if a pass matching the provided identifiers exists in the userโ€™s Wallet

try {
  const exists = await Wallet.doesPassExistInAppleWallet('pass.com.example.myapp', '1234567890');
  return exists // true or false
} catch (error) {
  console.error("Failed to check if pass exists in wallet");
}

removePassFromAppleWallet(cardIdentifier: string, serialNumber?: string): Promise<void>

Removes a matching pass from the Wallet, if it exists

try {
  await Wallet.removePassFromAppleWallet('pass.com.example.myapp', '1234567890');
} catch (error) {
  console.error("Failed to remove pass from wallet");
}

Credits

Bootstrapped with create-nitro-module.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

About

๐ŸŽŸ๏ธ Add, view, and manage Apple Wallet passes in React Native (iOS only) with Nitro Modules

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published