{"id":18369876,"url":"https://github.com/cawfree/react-native-pretty-payment","last_synced_at":"2025-06-26T08:33:03.900Z","repository":{"id":57339199,"uuid":"312454296","full_name":"cawfree/react-native-pretty-payment","owner":"cawfree","description":"⚛️ 🤑 Super pretty payment inputs for React Native.","archived":false,"fork":false,"pushed_at":"2020-11-15T04:02:31.000Z","size":635,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T18:38:34.712Z","etag":null,"topics":["animation","keypad","number","payment","react-native","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-13T02:41:16.000Z","updated_at":"2023-07-09T19:19:48.000Z","dependencies_parsed_at":"2022-09-16T02:23:50.744Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-pretty-payment","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cawfree/react-native-pretty-payment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-pretty-payment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-pretty-payment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-pretty-payment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-pretty-payment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-pretty-payment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-pretty-payment/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262030294,"owners_count":23247628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","keypad","number","payment","react-native","ui"],"created_at":"2024-11-05T23:32:51.816Z","updated_at":"2025-06-26T08:33:03.881Z","avatar_url":"https://github.com/cawfree.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-pretty-payment\nSuper pretty payment inputs for [**React Native**](https://reactnative.dev). It exports a bunch of hooks and utility components to help you deliver a sweeter payment experience, faster. It uses [**bignumber.js**](https://github.com/MikeMcl/bignumber.js/) to avoid floating point rounding errors.\n\n[**☮️  Hippy Demo**](https://twitter.com/cawfree/status/1327734123415302144?s=20) [**😴 Sleepy Demo**](https://twitter.com/cawfree/status/1327800083908325378?s=20)\n\n## 🚀 Getting Started\n\nUsing [**Yarn**](https://yarnpkg.com):\n\n```sh\nyarn add react-native-pretty-payment\n```\n\n\u003e This solution is most effective when comprised with an internationalization library with support for currency, such as [`react-intl`](https://github.com/formatjs/formatjs).\n\n## ✏️ Usage\n\nFirstly, you don't actually _need_ any of the included UI to begin accepting payment information; all of the important business logic and props are retained inside a call to [`usePaymentButtons`](./src/hooks/usePaymentButtons.ts):\n\n```typescript\nimport {usePaymentButtons} from 'react-native-pretty-payment';\nimport BigNumber from 'bignumber.js';\n\nconst [valueAsString, value, {...helpers}] = usePaymentButtons(new BigNumber(1), {\n  min: new BigNumber(1),\n  max: new BigNumber(75),\n  maximumFractionDigits: 2,\n});\n```\n\nFrom this point, you're free render as you please, with the assurance that input and output values are going to remain bounded to the parameters supplied in the initial invocation of `usePaymentButtons`.\n\nFor a full demonstration, please check out the included [**Example**](./example/App.tsx).\n\n## 📒 Reference\n\n### `usePaymentButtons`\n\n`usePaymentButtons` is used to synthesize all of the form validation logic and related props required to pass into a payment input layout.\n\n\n```typescript\ntype usePaymentButtonsParams = {\n  readonly min: BigNumber; // min required payment\n  readonly max: BigNumber; // max required payment\n  readonly maximumFractionDigits: number; // maximum digits the user can enter\n}\n```\n\n\n```typescript\ntype usePaymentButtonsResult = [\n  valueAsString: string, // currently entered value as a string\n  value: BigNumber, // currently entered value as a non-lossy numeric representation\n  helpers: PaymentButtonsHelpers, // props and useful functions to help build your form\n]\n```\n\n```typescript\ntype PaymentButtonsHelpers = {\n  readonly overflow: boolean; // signalling value exceeds max\n  readonly underflow: boolean; // signalling value is less than min\n  readonly getDigits: () =\u003e readonly ButtonProps[]; // returns all digit props\n  readonly getBackspace: () =\u003e ButtonProps; // returns backspace props\n  readonly getPeriod: () =\u003e ButtonProps; // returns decimal point props\n  readonly hasPeriod: boolean; // defines whether the user has tapped the decimal point\n  readonly numberOfFractionalDigits: number; // the number of decimal points that have been entered\n}\n```\n\n```typescript\ntype ButtonProps = {\n  readonly onPress: onPressHandler; // callback used to change the entered payment value\n  readonly disabled: boolean; // whether the input is disabled\n  readonly children: string; // which value is being rendered [0123456789\\.\u003c]\n};\n```\n\n## ✌️ License\n[**MIT**](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-pretty-payment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-pretty-payment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-pretty-payment/lists"}