{"_id":"@clockpay/react-native","_rev":"5-db79cfe7292e59c1f0a887cb72cf0f16","name":"@clockpay/react-native","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@clockpay/react-native","version":"1.0.0","keywords":["react-native","clockpay","payment","crypto","usdt","bottom-sheet","b2b"],"author":{"name":"ClockPay"},"license":"MIT","_id":"@clockpay/react-native@1.0.0","maintainers":[{"name":"clockpay","email":"paul@theclockchain.io"}],"homepage":"https://www.theclockchain.io/","bugs":{"url":"https://github.com/Clocked-Ecosystem/clockpay-react-native/issues"},"dist":{"shasum":"95e003741864bf70119bba59d17f390abbe3ced0","tarball":"https://registry.npmjs.org/@clockpay/react-native/-/react-native-1.0.0.tgz","fileCount":109,"integrity":"sha512-bBkR/VjETioT6Fdi+ULeqsXOtIPzZ4dXa+AOweAo5uztbiHEsXjEsmT/6N5BlFrW7bzM96A9YJWgZ9vb/706sw==","signatures":[{"sig":"MEUCIBRDAYfNJvUjtv5fniNFBfxQNvYH7n2mdOSx8Okx5SFJAiEAihFLrmXB/eJq30qTHCGjHaa/mppQ1ukT8G03/4bG1+g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":192363},"main":"lib/commonjs/index.js","types":"lib/typescript/index.d.ts","module":"lib/module/index.js","source":"src/index.ts","gitHead":"37eb1736083f96d268e269eb2a0c2c5a3d35ff1b","scripts":{"build":"bob build","release":"npm publish","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"clockpay","email":"paul@theclockchain.io"},"repository":{"url":"git+https://github.com/Clocked-Ecosystem/clockpay-react-native.git","type":"git"},"_npmVersion":"11.18.0","description":"A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"axios":"^1.7.2"},"react-native":"src/index.ts","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","typescript":"~5.6.2","@types/react":"^18.3.12","react-native":"^0.75.4","react-native-svg":"^15.6.0","react-native-qrcode-svg":"^6.3.2","react-native-builder-bob":"^0.30.3","@react-native-clipboard/clipboard":"^1.14.1"},"peerDependencies":{"react":">=18","react-native":">=0.72","react-native-svg":">=13","react-native-qrcode-svg":">=6","@react-native-clipboard/clipboard":">=1.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native_1.0.0_1782965276071_0.7306723704119571","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["module","commonjs","typescript"]}},"1.0.1":{"name":"@clockpay/react-native","version":"1.0.1","keywords":["react-native","clockpay","payment","crypto","usdt","bottom-sheet","b2b"],"author":{"name":"ClockPay"},"license":"MIT","_id":"@clockpay/react-native@1.0.1","maintainers":[{"name":"clockpay","email":"paul@theclockchain.io"}],"homepage":"https://www.theclockchain.io/","bugs":{"url":"https://github.com/Clocked-Ecosystem/clockpay-react-native/issues"},"dist":{"shasum":"2a078f82c1fe86fa897bf4ebf2c8802f38b654d1","tarball":"https://registry.npmjs.org/@clockpay/react-native/-/react-native-1.0.1.tgz","fileCount":116,"integrity":"sha512-nymVI5KLvR6moUqsfDBo9XyGVlWyOHY5wSsiV1Y4BsSYLX8/KKqKnZUlE9Nohvl6H2CJe9ncigJ+0X6cy43Cmw==","signatures":[{"sig":"MEQCIHvtFlV3Qksr2UVC5+JiGT4/m05Sm14OhP5U4wnR5nDtAiBHTdsYiOAwgYAJPZp1hbozfmsKWwN/fK1YJBooYKKsGQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":271765},"main":"lib/commonjs/index.js","types":"lib/typescript/index.d.ts","module":"lib/module/index.js","source":"src/index.ts","gitHead":"2de35cbc592c141ef2437ec578c5d5928f5c8bdd","scripts":{"build":"bob build","release":"npm publish","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"clockpay","email":"paul@theclockchain.io"},"repository":{"url":"git+https://github.com/Clocked-Ecosystem/clockpay-react-native.git","type":"git"},"_npmVersion":"11.18.0","description":"A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"axios":"^1.7.2"},"react-native":"src/index.ts","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","typescript":"~5.6.2","@types/react":"^18.3.12","react-native":"^0.75.4","react-native-svg":"^15.6.0","react-native-qrcode-svg":"^6.3.2","react-native-builder-bob":"^0.30.3","@react-native-clipboard/clipboard":"^1.14.1"},"peerDependencies":{"react":">=18","react-native":">=0.72","react-native-svg":">=13","react-native-qrcode-svg":">=6","@react-native-clipboard/clipboard":">=1.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native_1.0.1_1783418037858_0.280433865761736","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["module","commonjs","typescript"]}},"1.0.2":{"name":"@clockpay/react-native","version":"1.0.2","keywords":["react-native","clockpay","payment","crypto","usdt","bottom-sheet","b2b"],"author":{"name":"ClockPay"},"license":"MIT","_id":"@clockpay/react-native@1.0.2","maintainers":[{"name":"clockpay","email":"paul@theclockchain.io"}],"homepage":"https://www.theclockchain.io/","bugs":{"url":"https://github.com/Clocked-Ecosystem/clockpay-react-native/issues"},"dist":{"shasum":"b44e446ac1d4c3ac37d5c09ece7b4e80d7129a64","tarball":"https://registry.npmjs.org/@clockpay/react-native/-/react-native-1.0.2.tgz","fileCount":123,"integrity":"sha512-o/2RqELRzW4kRlv0R4ahaXuZNMye5o8n9rbY2iwoFHtYzNEUxFJXczKG81bXQf1TvVq1RR4BzGzpbRfLpUUKpA==","signatures":[{"sig":"MEYCIQDjudbtV/3hCkUkcuKx4QSkozsKpAiDNWQL3u6QA0mnhAIhALKOzBDng4XQlJPxRUGxO1yHwapy/17RElGLq6nkb4Rp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":309933},"main":"lib/commonjs/index.js","types":"lib/typescript/index.d.ts","module":"lib/module/index.js","source":"src/index.ts","gitHead":"2de35cbc592c141ef2437ec578c5d5928f5c8bdd","scripts":{"build":"bob build","release":"npm publish","typecheck":"tsc --noEmit","playground":"vite serve playground","prepublishOnly":"npm run build","playground:build":"vite build playground"},"_npmUser":{"name":"clockpay","email":"paul@theclockchain.io"},"repository":{"url":"git+https://github.com/Clocked-Ecosystem/clockpay-react-native.git","type":"git"},"_npmVersion":"11.18.0","description":"A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"axios":"^1.7.2"},"react-native":"src/index.ts","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.21","react":"^18.3.1","react-dom":"^18.3.1","typescript":"~5.6.2","@types/react":"^18.3.12","react-native":"^0.75.4","@types/react-dom":"^18.3.7","react-native-svg":"^15.6.0","react-native-web":"^0.19.13","@vitejs/plugin-react":"^4.7.0","react-native-qrcode-svg":"^6.3.2","react-native-builder-bob":"^0.30.3","@react-native-clipboard/clipboard":"^1.14.1"},"peerDependencies":{"react":">=18","react-native":">=0.72","react-native-svg":">=13","react-native-qrcode-svg":">=6","@react-native-clipboard/clipboard":">=1.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native_1.0.2_1783758885918_0.9898438772069198","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["module","commonjs","typescript"]}},"1.0.3":{"name":"@clockpay/react-native","version":"1.0.3","keywords":["react-native","clockpay","payment","crypto","usdt","bottom-sheet","b2b"],"author":{"name":"ClockPay"},"license":"MIT","_id":"@clockpay/react-native@1.0.3","maintainers":[{"name":"clockpay","email":"paul@theclockchain.io"}],"homepage":"https://www.theclockchain.io/","bugs":{"url":"https://github.com/Clocked-Ecosystem/clockpay-react-native/issues"},"dist":{"shasum":"6f7dabd907e940cd62a87155e54b7599975db173","tarball":"https://registry.npmjs.org/@clockpay/react-native/-/react-native-1.0.3.tgz","fileCount":151,"integrity":"sha512-yTr7icK6aq9Y7coYbBfrFWyz/Vqo35vCWBkPWsOzcWIulTIIpKiGjnTWNN7rmkHKB5toOsYCLvoHyMJOcpQn9A==","signatures":[{"sig":"MEQCIHUQ5S8b1ej43ywdbwAxMw/gXT2Jq2dNfLgtw6T2TcepAiArPyVtCeHaUpFBBKPELyOGIVjbnebXbW3+sDu1Df7pnQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":355801},"main":"lib/commonjs/index.js","types":"lib/typescript/index.d.ts","module":"lib/module/index.js","source":"src/index.ts","gitHead":"2de35cbc592c141ef2437ec578c5d5928f5c8bdd","scripts":{"build":"bob build","release":"npm publish","typecheck":"tsc --noEmit","playground":"vite serve playground","prepublishOnly":"npm run build","playground:build":"vite build playground"},"_npmUser":{"name":"clockpay","email":"paul@theclockchain.io"},"repository":{"url":"git+https://github.com/Clocked-Ecosystem/clockpay-react-native.git","type":"git"},"_npmVersion":"11.18.0","description":"A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"axios":"^1.7.2"},"react-native":"src/index.ts","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"viem":"^2.55.0","vite":"^5.4.21","react":"^18.3.1","wagmi":"^2.19.5","react-dom":"^18.3.1","typescript":"~5.6.2","@types/react":"^18.3.12","react-native":"^0.75.4","@types/react-dom":"^18.3.7","react-native-svg":"^15.6.0","react-native-web":"^0.19.13","@vitejs/plugin-react":"^4.7.0","@tanstack/react-query":"^5.101.2","react-native-qrcode-svg":"^6.3.2","react-native-builder-bob":"^0.30.3","@reown/appkit-react-native":"^2.0.5","@reown/appkit-wagmi-react-native":"^2.0.5","@react-native-clipboard/clipboard":"^1.14.1","@walletconnect/react-native-compat":"^2.23.10","@react-native-async-storage/async-storage":"^3.1.1"},"peerDependencies":{"viem":">=2 <3","react":">=18","wagmi":">=2 <3","react-native":">=0.72","react-native-svg":">=13","@tanstack/react-query":">=5","react-native-qrcode-svg":">=6","@reown/appkit-react-native":">=2","react-native-get-random-values":">=1.11","@react-native-community/netinfo":">=11","@reown/appkit-wagmi-react-native":">=2","@react-native-clipboard/clipboard":">=1.11","@walletconnect/react-native-compat":">=2.16.1","@react-native-async-storage/async-storage":">=1.21"},"peerDependenciesMeta":{"viem":{"optional":true},"wagmi":{"optional":true},"@tanstack/react-query":{"optional":true},"@reown/appkit-react-native":{"optional":true},"react-native-get-random-values":{"optional":true},"@react-native-community/netinfo":{"optional":true},"@reown/appkit-wagmi-react-native":{"optional":true},"@walletconnect/react-native-compat":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-native_1.0.3_1783762596041_0.26214282698161884","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["module","commonjs","typescript"]}},"1.0.4":{"name":"@clockpay/react-native","version":"1.0.4","description":"A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.","license":"MIT","author":{"name":"ClockPay"},"homepage":"https://www.theclockchain.io/","repository":{"type":"git","url":"git+https://github.com/Clocked-Ecosystem/clockpay-react-native.git"},"main":"lib/commonjs/index.js","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","react-native":"src/index.ts","source":"src/index.ts","scripts":{"build":"bob build","playground":"vite serve playground","playground:build":"vite build playground","typecheck":"tsc --noEmit","prepublishOnly":"npm run build","release":"npm publish"},"publishConfig":{"access":"public"},"keywords":["react-native","clockpay","payment","crypto","usdt","bottom-sheet","b2b"],"peerDependencies":{"@react-native-async-storage/async-storage":">=1.21","@react-native-clipboard/clipboard":">=1.11","@react-native-community/netinfo":">=11","@reown/appkit-react-native":">=2","@reown/appkit-wagmi-react-native":">=2","@tanstack/react-query":">=5","@walletconnect/react-native-compat":">=2.16.1","react":">=18","react-native":">=0.72","react-native-get-random-values":">=1.11","react-native-qrcode-svg":">=6","react-native-svg":">=13","viem":">=2 <3","wagmi":">=2 <3"},"peerDependenciesMeta":{"@react-native-async-storage/async-storage":{"optional":true},"@react-native-community/netinfo":{"optional":true},"@reown/appkit-react-native":{"optional":true},"@reown/appkit-wagmi-react-native":{"optional":true},"@tanstack/react-query":{"optional":true},"@walletconnect/react-native-compat":{"optional":true},"react-native-get-random-values":{"optional":true},"viem":{"optional":true},"wagmi":{"optional":true}},"dependencies":{"axios":"^1.7.2"},"devDependencies":{"@react-native-async-storage/async-storage":"^3.1.1","@react-native-clipboard/clipboard":"^1.14.1","@reown/appkit-react-native":"^2.0.5","@reown/appkit-wagmi-react-native":"^2.0.5","@tanstack/react-query":"^5.101.2","@types/react":"^18.3.12","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0","@walletconnect/react-native-compat":"^2.23.10","react":"^18.3.1","react-dom":"^18.3.1","react-native":"^0.75.4","react-native-builder-bob":"^0.30.3","react-native-qrcode-svg":"^6.3.2","react-native-svg":"^15.6.0","react-native-web":"^0.19.13","typescript":"~5.6.2","viem":"^2.55.0","vite":"^5.4.21","wagmi":"^2.19.5"},"react-native-builder-bob":{"source":"src","output":"lib","targets":["module","commonjs","typescript"]},"gitHead":"2de35cbc592c141ef2437ec578c5d5928f5c8bdd","_id":"@clockpay/react-native@1.0.4","bugs":{"url":"https://github.com/Clocked-Ecosystem/clockpay-react-native/issues"},"_nodeVersion":"24.15.0","_npmVersion":"11.18.0","dist":{"integrity":"sha512-4czQ7L1s6Znj9eD/uI8o8elf3NfXFblw/7cgBiG8rWRx8ZCnkM2JCksVxkkRhcFXPeO5uKsmEtCdIh6Nycwh9w==","shasum":"5e6f23e0f48151dfcbd9faa5309e8eef6cf5471a","tarball":"https://registry.npmjs.org/@clockpay/react-native/-/react-native-1.0.4.tgz","fileCount":151,"unpackedSize":370026,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICyEiCKElhEU+ZR8zbi/qXZzdSFF0gR3VNd7dzZwunnVAiB/vZukd/Ogn/gGjaTW01pRklVOlkRUFVxDiXFZ2DQAtQ=="}]},"_npmUser":{"name":"clockpay","email":"paul@theclockchain.io"},"directories":{},"maintainers":[{"name":"clockpay","email":"paul@theclockchain.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native_1.0.4_1783763511999_0.815822110647443"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T04:07:55.918Z","modified":"2026-07-11T09:51:52.280Z","1.0.0":"2026-07-02T04:07:56.213Z","1.0.1":"2026-07-07T09:53:58.009Z","1.0.2":"2026-07-11T08:34:46.077Z","1.0.3":"2026-07-11T09:36:36.202Z","1.0.4":"2026-07-11T09:51:52.169Z"},"bugs":{"url":"https://github.com/Clocked-Ecosystem/clockpay-react-native/issues"},"author":{"name":"ClockPay"},"license":"MIT","homepage":"https://www.theclockchain.io/","keywords":["react-native","clockpay","payment","crypto","usdt","bottom-sheet","b2b"],"repository":{"type":"git","url":"git+https://github.com/Clocked-Ecosystem/clockpay-react-native.git"},"description":"A type-safe React Native SDK for accepting crypto payments with ClockPay — a Stripe-style bottom-sheet payment modal.","maintainers":[{"name":"clockpay","email":"paul@theclockchain.io"}],"readme":"# ClockPay React Native SDK\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA type-safe React Native SDK for accepting crypto payments with ClockPay. Drop in a\nsingle `<PaymentButton />` — it opens a **Stripe-style bottom-sheet** payment modal\nthat slides up from the bottom of the screen.\n\n- 📱 **Native bottom sheet** — slides up with a dimmed backdrop and drag-to-dismiss.\n- 🪙 **Buyer picks coin & network** — a selection sheet fetches the coins and networks you support.\n- 🎨 **Themeable** — a Stripe-style `appearance` object controls colours and shape.\n- 🔑 **Env-aware** — the API gateway is auto-selected from your key prefix.\n- 👛 **Wallet connect (optional)** — connect a wallet in-sheet via WalletConnect. See [Wallet connection](#wallet-connection-optional).\n- 🛡️ **Type-safe** — full TypeScript types for props, callbacks and responses.\n\n## Installation\n\n```bash\nnpm install @clockpay/react-native\n```\n\nInstall the required peer dependencies (native modules):\n\n```bash\nnpm install react-native-svg react-native-qrcode-svg @react-native-clipboard/clipboard\ncd ios && pod install   # iOS only\n```\n\n`react` and `react-native` are also peer dependencies.\n\n## Quick start\n\n```tsx\nimport { PaymentButton } from '@clockpay/react-native';\n\nexport function Checkout() {\n  return (\n    <PaymentButton\n      publicKey=\"cpay_test_pk_...\"     // from your developer dashboard\n      amount={20000}                   // in the currency below\n      currency=\"ngn\"                   // 'ngn' | 'usd'\n      reference=\"order_12345\"          // your own order reference\n      meta={{\n        title: 'Order #12345',\n        description: 'Two coffees and a croissant',\n        fullName: 'Paul Paito',\n        email: 'paul@example.com',     // optional\n        phoneNumber: { code: '+234', number: '09012345678' }, // optional\n      }}\n      appearance={{ buttonColor: '#27AAE1', variant: 'outline' }}\n      onSuccess={(data) => console.log('Payment confirmed', data)}\n      onError={(error) => console.error(error)}\n    />\n  );\n}\n```\n\nPressing the button opens a **selection sheet** where the buyer picks a coin and\nnetwork. On continue, the SDK generates a payment link and presents the payment\nsheet: a QR code + deposit address to transfer to, a countdown, then a screen to\npaste the transaction hash for on-chain verification. `onSuccess` fires once the\npayment is confirmed.\n\n> No `clientSecret` or server-side call is required — the SDK creates the payment\n> link from the order details you pass. Your `publicKey` is safe in the app; keep\n> your **secret** key on the server.\n\n### Order details (`meta`)\n\nThe business supplies the order and buyer details up front — the buyer only picks a\ncoin and network.\n\n| Field | Type | Required | Description |\n|-------|------|----------|-------------|\n| `amount` | `number` | Yes | Order amount, in `currency`. |\n| `currency` | `'ngn' \\| 'usd'` | Yes | Fiat currency of `amount`. |\n| `reference` | `string` | Yes | Your own reference for the order. |\n| `meta.title` | `string` | Yes | Short order title. |\n| `meta.description` | `string` | Yes | Order description. |\n| `meta.fullName` | `string` | Yes | Buyer's full name. |\n| `meta.email` | `string` | No | Buyer email. |\n| `meta.customerId` | `string` | No | Your id for the buyer. |\n| `meta.phoneNumber` | `{ code: string; number: string }` | No | Buyer phone number. |\n\n## Theming\n\n```tsx\n<PaymentButton\n  publicKey=\"cpay_test_pk_...\"\n  amount={20000}\n  currency=\"ngn\"\n  reference=\"order_12345\"\n  meta={{ title: 'Order #12345', description: 'Two coffees', fullName: 'Paul Paito' }}\n  appearance={{\n    variant: 'solid',          // 'solid' | 'outline' (default: 'outline')\n    buttonColor: '#6C5CE7',    // primary brand colour\n    buttonTextColor: '#ffffff',\n    borderRadius: 12,\n    modalAccentColor: '#6C5CE7',\n  }}\n/>\n```\n\n## API reference\n\n### `<PaymentButton />`\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `publicKey` | `string` | Yes | Public key from the developer dashboard. |\n| `amount` | `number` | Yes | Order amount, in `currency`. |\n| `currency` | `'ngn' \\| 'usd'` | Yes | Fiat currency of `amount`. |\n| `reference` | `string` | Yes | Your own reference for the order. |\n| `meta` | `CheckoutMeta` | Yes | Order/buyer details (see [Order details](#order-details-meta)). |\n| `appearance` | `ClockPayAppearance` | No | Button/sheet theming. |\n| `label` | `ReactNode` | No | Button label. Defaults to `\"Pay with Clockpay\"`. |\n| `disabled` | `boolean` | No | Disables the button. |\n| `apiBaseUrl` | `string` | No | Override the API gateway. By default it's selected from the key prefix: `cpay_test_pk_` → dev, `cpay_live_pk_` → live. |\n| `redirectUrl` | `string` | No | Opened via `Linking` after a successful payment. |\n| `walletConnect` | `WalletConnectOptions` | No | Enables in-sheet wallet connection. See [Wallet connection](#wallet-connection-optional). |\n| `onSuccess` | `(data: VerifyCryptoResponse) => void` | No | Fired when payment is confirmed. |\n| `onError` | `(error: Error) => void` | No | Fired if initiating or verifying fails. |\n| `onClose` | `() => void` | No | Fired when the sheet closes. |\n\n### `ClockPayAppearance`\n\n| Field | Type | Default | Description |\n|-------|------|---------|-------------|\n| `variant` | `'solid' \\| 'outline'` | `'outline'` | Button fill style. |\n| `buttonColor` | `string` | `#27AAE1` | Primary brand colour. |\n| `buttonTextColor` | `string` | brand / white | Button label colour. |\n| `borderRadius` | `number` | `8` | Corner radius (dp). |\n| `fontFamily` | `string` | system | Button label font. |\n| `modalAccentColor` | `string` | `buttonColor` | Accent used inside the sheet. |\n\n## Wallet connection (optional)\n\nThe payment sheet's **Connect** tab can open a real WalletConnect session (via\n[Reown AppKit](https://reown.com/appkit)) so the buyer connects a wallet in-sheet.\nIt is **opt-in**: without the `walletConnect` prop the tab stays a non-interactive\nplaceholder and none of the packages below are needed.\n\nEnable it by passing the prop — the ClockPay WalletConnect project id is built in,\nso an empty object is enough:\n\n```tsx\n<PaymentButton\n  publicKey=\"cpay_test_pk_...\"\n  amount={20000}\n  currency=\"ngn\"\n  reference=\"order_12345\"\n  meta={{ title: 'Order #12345', description: 'Two coffees', fullName: 'Paul Paito' }}\n  walletConnect={{\n    onConnect: (address) => console.log('connected', address), // optional\n    // metadata: { redirect: { native: 'yourapp://' } },        // optional override\n  }}\n/>\n```\n\n### Setup\n\n**1. Install the wallet peer dependencies** (⚠️ `wagmi`/`viem` must be **v2**, not v3):\n\n```bash\nnpm install \\\n  @reown/appkit-react-native @reown/appkit-wagmi-react-native \\\n  wagmi@2 viem@2 @tanstack/react-query \\\n  @walletconnect/react-native-compat \\\n  @react-native-async-storage/async-storage \\\n  @react-native-community/netinfo \\\n  react-native-get-random-values\ncd ios && pod install   # iOS only\n```\n\n**2. Add the polyfills** at the very top of your app entry (e.g. `index.js`), before\nany other import:\n\n```js\nimport '@walletconnect/react-native-compat';\nimport 'react-native-get-random-values';\n```\n\n**3. Register a deep-link scheme** matching `metadata.redirect.native` (default\n`clockpay://`) so the wallet can return to your app — `Info.plist` +\n`AndroidManifest.xml` for bare React Native, or `scheme` in `app.json` +\n`expo prebuild` for Expo.\n\n> **Requirements:** React Native **≥ 0.81** (Reown AppKit v2), and a rebuilt custom\n> dev client — wallet connection does not run in Expo Go. EVM chains only\n> (Ethereum, Optimism, Arbitrum, BSC, Polygon).\n\nTapping the switch button opens the AppKit modal; once a wallet connects, the button\nshows the connected address and `onConnect` fires. A `WalletConnectProvider` is also\nexported if you prefer to own the wagmi/AppKit context yourself.\n\n## Supported networks\n\nETH, Optimism, BSC, Polygon, and Tron. The coins and networks offered on the\nselection sheet come from your account (`/wallet/checkout/coins` and\n`/wallet/checkout/networks/{coinId}`); the buyer chooses which to pay with.\n\n## Local development\n\n```bash\nnpm install\nnpm run typecheck\nnpm run build      # react-native-builder-bob → lib/\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}