# iamraphson/react-paystack architecture

> Architecture diagram of the GitHub repository iamraphson/react-paystack, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/iamraphson/react-paystack
- Repository: https://github.com/iamraphson/react-paystack

## Overview

react-paystack is a React wrapper for initiating Paystack payments. An application supplies transaction configuration and success/close callbacks through a hook, button, or context consumer; each route reaches shared payment-argument preparation and the Paystack Inline integration. The README also documents metadata and additional transaction options. The implementation of the action module and the Inline dependency was not sampled, so their internal behavior is not expanded.

Main entry points: [`libs/index.ts`](https://github.com/iamraphson/react-paystack/blob/master/libs/index.ts) (Public exports), [`libs/use-paystack.ts`](https://github.com/iamraphson/react-paystack/blob/master/libs/use-paystack.ts) (Payment hook), [`libs/paystack-consumer.tsx`](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-consumer.tsx) (Context consumer), [`libs/paystack-provider.tsx`](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-provider.tsx) (Context provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["React API"]
  node_entry["Public exports<br/>[index.ts]"]
  node_hook["Payment hook<br/>[use-paystack.ts]"]
  node_button["Payment button"]
  node_consumer["Context consumer"]
end

subgraph group_flow["Payment Flow"]
  node_provider["Context provider"]
  node_context["Payment context"]
  node_types["Payment options<br/>[types.ts]"]
end

subgraph group_gateway["Gateway Integration"]
  node_actions["Paystack actions"]
  node_inline["Paystack Inline"]
end

node_app(("React application"))

node_app -->|"imports API"| node_entry
node_entry -->|"exports"| node_hook
node_entry -->|"exports"| node_button
node_entry -->|"exports"| node_consumer
node_button -->|"calls"| node_hook
node_consumer -->|"renders"| node_provider
node_provider -->|"calls"| node_hook
node_provider -->|"provides values"| node_context
node_consumer -->|"reads values"| node_context
node_hook -->|"calls"| node_actions
node_actions -->|"invokes"| node_inline

click node_entry "https://github.com/iamraphson/react-paystack/blob/master/libs/index.ts"
click node_hook "https://github.com/iamraphson/react-paystack/blob/master/libs/use-paystack.ts"
click node_button "https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-button.tsx"
click node_consumer "https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-consumer.tsx"
click node_provider "https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-provider.tsx"
click node_context "https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-context.ts"
click node_types "https://github.com/iamraphson/react-paystack/blob/master/libs/types.ts"
click node_actions "https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-actions.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_hook,node_button,node_consumer toneBlue
class node_provider,node_context,node_types toneAmber
class node_actions,node_inline toneMint
class node_app toneIndigo
```

## Components

### React API

- [Public exports](https://github.com/iamraphson/react-paystack/blob/master/libs/index.ts): `libs/index.ts`
- [Payment hook](https://github.com/iamraphson/react-paystack/blob/master/libs/use-paystack.ts): `libs/use-paystack.ts`
- [Payment button](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-button.tsx): `libs/paystack-button.tsx`
- [Context consumer](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-consumer.tsx): `libs/paystack-consumer.tsx`

### Payment Flow

- [Context provider](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-provider.tsx): `libs/paystack-provider.tsx`
- [Payment context](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-context.ts): `libs/paystack-context.ts`
- [Payment options](https://github.com/iamraphson/react-paystack/blob/master/libs/types.ts): `libs/types.ts`

### Gateway Integration

- [Paystack actions](https://github.com/iamraphson/react-paystack/blob/master/libs/paystack-actions.ts): `libs/paystack-actions.ts`
- **Paystack Inline**

### Other components

- **React application**

## Connections

- React application → Public exports: imports API
- Public exports → Payment hook: exports
- Public exports → Payment button: exports
- Public exports → Context consumer: exports
- Payment button → Payment hook: calls
- Context consumer → Context provider: renders
- Context provider → Payment hook: calls
- Context provider → Payment context: provides values
- Context consumer → Payment context: reads values
- Payment hook → Paystack actions: calls
- Paystack actions → Paystack Inline: invokes