{"id":17513080,"url":"https://github.com/qqww08/react-payment-keypad","last_synced_at":"2026-04-28T08:37:54.975Z","repository":{"id":45077018,"uuid":"445784350","full_name":"qqww08/react-payment-keypad","owner":"qqww08","description":"react simple password keypad","archived":false,"fork":false,"pushed_at":"2022-10-17T11:14:12.000Z","size":78140,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T07:41:28.831Z","etag":null,"topics":["keyboard","keypad","mobile","password","payment","react","reactjs","typescript"],"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/qqww08.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-01-08T10:07:25.000Z","updated_at":"2022-12-31T07:55:46.000Z","dependencies_parsed_at":"2023-01-20T07:15:42.198Z","dependency_job_id":null,"html_url":"https://github.com/qqww08/react-payment-keypad","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qqww08%2Freact-payment-keypad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qqww08%2Freact-payment-keypad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qqww08%2Freact-payment-keypad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qqww08%2Freact-payment-keypad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qqww08","download_url":"https://codeload.github.com/qqww08/react-payment-keypad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245192414,"owners_count":20575386,"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":["keyboard","keypad","mobile","password","payment","react","reactjs","typescript"],"created_at":"2024-10-20T06:07:14.718Z","updated_at":"2026-04-28T08:37:44.956Z","avatar_url":"https://github.com/qqww08.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![da2b8967-2dbe-455b-a07e-1dafb2bf6941](https://user-images.githubusercontent.com/62181345/149617448-d98c2f8f-3a75-4371-8eca-eca5b3819df1.gif)\n\n* [Getting Started](#getting-started)\n* [Basic Usage](#basic-usage)\n* [Props](#props)\n* [License](#license)\n\n## Getting Started\n\nYou can install the module via `npm`\n\n```sh\nnpm install react-payment-keypad\nor\nyarn add react-payment-keypad\n```\n\n\n\n### Description\n사용하기 쉬운 Payment PIN 번호 입력 컴포넌트 \n\n\n### Basic Usage\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ReactPaymentKeypad from \"react-payment-keypad\";\n\nReactDOM.render(\n    \u003cReactPaymentKeypad\n        isVisible\n        emptyPassword={false}\n        onClose={() =\u003e null}\n        className={\"password\"}\n        onFinish={(password) =\u003e console.log(password)}\n        onPassConfirm={(pass) =\u003e console.log(pass)}\n        shuffle={\"always\"}\n    /\u003e,\n    document.getElementById(\"root\")\n);\n\n\n```\n### Custom Usage\n```js\nimport ReactPaymentKeypad, { PaymentKeypadProps } from \"react-payment-keypad\";\nimport React, { useState } from \"react\";\n\nconst Example = () =\u003e {\n  const [visible, setVisible] = useState(false);\n\n  const setting: PaymentKeypadProps = {\n    // {Required} keypad 사용 여부 입니다.\n    isVisible: visible,\n    // {Optional} emptyPassword true 일 경우 패스워드를 2번 입력 하도록 변경\n    emptyPassword: true,\n    // {Optional}  패스워드 화면을 꽉 채웁니다\n    full: true,\n    // {Optional} 패스워드를 입력 하는 횟수를 정하는 props 입니다\n    count: 6,\n    // {Optional} 에러 메세지 props 입니다.\n    errorMessage: \"패스워드가 일치 하지 않습니다.\",\n    // {Optional} 메세지 커스텀을 위한 props 입니다.\n    messages: [\n      \"패스워드를 입력 해주세요.\",\n      \"사용할 패스워드를 설정 해주세요\",\n      \"다시 한번 입력해 주세요.\",\n    ],\n    /**\n     *  숫자 키패드 정렬 props 입니다.\n     * - always 키패드 클릭 시 항상 패드를 재정렬 합니다.\n     * - fixed 숫자 순서 그대로 정렬 합니다.\n     * - once 키패드 입력 전 한번 랜덤으로 정렬 합니다.\n     * */\n    shuffle: \"always\",\n    /**\n     *   전체삭제 버튼 커스텀을 위한 props 입니다.\n     *   @example\n     *    deleteAllIcon: \u003cimg src=\"/image/icon.png\"/\u003e or \"전체삭제\"\n     * */\n    deleteAllIcon: \"전체 삭제버튼\",\n    /**\n     * 삭제 버튼 커스텀을 위한 props 입니다.\n     *  @example\n     *    deleteAllIcon: \u003cimg src=\"/image/icon.png\"/\u003e or \"삭제\"\n     * */\n    deleteIcon: \"삭제버튼\",\n    // {Required} keypad close func\n    onClose: () =\u003e {\n      setVisible(false);\n    },\n    // {Required} keypad 입력 후 패스워드 결과 값이 나오는 func\n    onFinish: (password) =\u003e {\n      console.log(password);\n    },\n    // {Optional} emptyPassword true 일 경우 패스워드 결과 값이 return 되는 func\n    onPassConfirm: (password) =\u003e {\n      console.log(password);\n    },\n  };\n\n  return \u003cReactKeypad {...setting} /\u003e;\n};\n\nexport default Example;\n\n```\n\n### 새 창으로 열어서 패스워드를 받아와야 하는 경우\n\n#### ${your_domain}/main\n```js\nimport { usePaymentOpener } from \"react-payment-keypad\";\n\nconst Main = () =\u003e {\n  const { password, onPaymentOpen } = usePaymentOpener();\n  console.log(password); // passwrod callback\n  \n  const handleOpen = () =\u003e{\n    onPaymentOpen(\"/payment\", { width:600, height:700 })\n  }\n  \n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleOpen}\u003ePayment Open!\u003c/button\u003e    \n    \u003c/div\u003e\n  );\n};\n\nexport default Main;\n```\n#### ${your_domain}/payment\n```js\nimport ReactPaymentKeypad from \"react-payment-keypad\";\n\nconst Payment = () =\u003e {\n  return \u003cReactPaymentKeypad opener={true} /\u003e\n};\n\nexport default Payment;\n```\n## Props\n\n| Prop           | Type                        | Required? | Default Value | Description                                       |\n| -------------- |-----------------------------| --------- | ------------- |---------------------------------------------------|\n| isVisible      | `boolean`                   | Optional  | -             | keypad 사용 여부 입니다.                                 |\n| onClose        | `function`                  | Optional  | -             | keypad close func                                 |\n| onFinish       | `function`                  | Optional  | -             | keypad 입력 후 패스워드 결과 값이 나오는 func                   |\n| count          | `number`                    | Optional  | `6`           | 패스워드를 입력 하는 횟수를 정하는 props 입니다                     |\n| emptyPassword  | `boolean`                   | Optional  | `false`       | emptyPassword true 일 경우 패스워드를 2번 입력 하도록 변경        |\n| onPassConfirm  | `function`                  | Optional  | `true`        | emptyPassword true 일 경우 패스워드 결과 값이 return 되는 func |\n| shuffle        | `always or fixed or once`   | Optional  | `fixed`   | -always 키패드 클릭 시 항상 패드를 재정렬 합니다.- fixed 숫자 순서 그대로 정렬 합니다.- once 키패드 입력 전 한번 랜덤으로 정렬 합니다.                  |\n| errorMessage          | `string`                    | Optional  | -             | 에러 메세지 props 입니다.                               |\n| messages       | `array`                     | Optional  | ` 메세지 커스텀을 위한 props 입니다.`   | message                                           |\n| deleteAllIcon  | `string or React.ReactNode` | Optional  | `전체삭제`   | 전체삭제 버튼 커스텀을 위한 props 입니다.                                             |\n| deleteIcon     | `string or React.ReactNode` | Optional  | `삭제`   |삭제 버튼 커스텀을 위한 props 입니다.|\n| full     | `boolean`                   | Optional  | `false`   | true 일 경우 패스워드창이 페이지를 꽉 채웁니다.                     |\n| opener     | `boolean`                   | Optional  | `false`   | 새 창 열기로 패스워드를 입력 받을 경우 해당 페이지에서 true                 |\n\n\n\n## License\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqqww08%2Freact-payment-keypad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqqww08%2Freact-payment-keypad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqqww08%2Freact-payment-keypad/lists"}