React Native Cybrid Payment Integration

A full-stack application integrating Cybrid's payment infrastructure with a React frontend and Node.js backend.

Project Structure

react-native-cybrid/
├── backend/          # Express.js + TypeScript backend
└── frontend/         # React + Vite frontend

Features

• Cybrid payment integration via official SDKs
• RESTful API backend with Express
• Modern React frontend with TypeScript
• Secure authentication and authorization
• Real-time payment processing

Prerequisites

• Node.js >= 18.0.0
• npm or yarn
• Cybrid API credentials (Client ID, Client Secret, Bank GUID)

Quick Start

1. Clone the repository

   git clone https://github.com/spence709/react-native-cybrid.git
   cd react-native-cybrid

2. Set up the backend

   cd backend
   npm install
   cp .env.example .env
   # Edit .env with your Cybrid credentials
   npm run dev

3. Set up the frontend

   cd frontend
   npm install
   npm run dev

4. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:5000

Configuration

Backend Environment Variables

Copy backend/.env.example to backend/.env and configure:

• CYBRID_CLIENT_ID - Your Cybrid client ID
• CYBRID_CLIENT_SECRET - Your Cybrid client secret
• CYBRID_BANK_GUID - Your Cybrid bank GUID
• PORT - Backend server port (default: 5000)

See backend/README.md for detailed backend setup.

Documentation

• Backend Documentation
• Frontend Documentation

Technology Stack

Backend

• Express.js
• TypeScript
• Cybrid API SDK
• Axios
• Helmet & CORS

Frontend

• React 18
• TypeScript
• Vite
• TailwindCSS
• React Router
• Zustand (state management)
• SWR (data fetching)

Development

# Run backend in development mode
cd backend && npm run dev

# Run frontend in development mode
cd frontend && npm run dev

# Build for production
cd backend && npm run build
cd frontend && npm run build

License

ISC