Skip to main content

​
Building with Expo

This guide will walk you through integrating Chipi Pay into your Expo application with biometric authentication and secure storage. We’ll cover everything from installation to implementing secure payment flows.

​
Prerequisites

  • Node.js 16 or later
  • Expo CLI
  • Basic knowledge of React Native
  • A Chipi Pay account
  • Clerk account for authentication
  • Device with biometric authentication support (for biometric features)

​
Getting Started

To get started with Chipi Pay in your Expo application, you’ll need to have a basic Expo project set up. If you don’t have one yet, you can create it using: 
npx create-expo-app@latest my-chipi-app
cd my-chipi-app

​
Installation

First, install the required packages: 
# Install Chipi Pay SDK
npx expo install @chipi-stack/chipi-expo

# Install Clerk and authentication packages
npx expo install @clerk/clerk-expo expo-secure-store expo-web-browser

# Install biometric authentication package
npx expo install expo-local-authentication

​
Configuration

  1. Create a .env file in your project root and add your API keys:
EXPO_PUBLIC_CHIPI_API_PUBLIC_KEY=your_api_key_here
CHIPI_SECRET_KEY=secret_xxx
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=secret_xxx
You can get your Chipi API keys here. And your Clerk API keys here.
  1. Update your app.json to include the required permissions:
{
  "expo": {
    "plugins": [
      [
        "expo-local-authentication",
        {
          "faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID to unlock your wallet."
        }
      ],
      "expo-secure-store"
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSFaceIDUsageDescription": "Allow $(PRODUCT_NAME) to use Face ID to unlock your wallet."
      }
    }
  }
}

​
Implementing Secure Authentication Flow

  1. Initialize the SDKs with secure storage:
// App.tsx
import { ClerkProvider } from "@clerk/clerk-expo";
import { ChipiProvider } from "@chipi-stack/chipi-expo";
import { tokenCache } from "@clerk/clerk-expo/token-cache";

export default function App() {
  return (
    <ClerkProvider tokenCache={tokenCache}>
      <ChipiProvider
        config={{
          apiPublicKey: process.env.EXPO_PUBLIC_CHIPI_API_PUBLIC_KEY || "",
        }}
      >
        <YourApp />
      </ChipiProvider>
    </ClerkProvider>
  );
}

​
Adding Clerk JWKS Endpoint

1

Copy your JWKS endpoint

Go into your Clerk dashboard and copy the JWKS endpoint available in the developers tab.
2

Register JWKS Endpoint in The Chipi dashboard

Register JWKS Endpoint URL in the dashboard.

​
Next Steps

  • Add error handling and loading states
  • Customize the UI to match your app’s design
Need help? Check out our Telegram Community for support and to connect with other developers.