react-payment-keypad

• Getting Started
• Basic Usage
• Props
• License

Getting Started

You can install the module via npm

npm install react-payment-keypad
or
yarn add react-payment-keypad

Description

사용하기 쉬운 Payment PIN 번호 입력 컴포넌트

Basic Usage

import React from "react";
import ReactDOM from "react-dom";
import ReactPaymentKeypad from "react-payment-keypad";

ReactDOM.render(
    <ReactPaymentKeypad
        isVisible
        emptyPassword={false}
        onClose={() => null}
        className={"password"}
        onFinish={(password) => console.log(password)}
        onPassConfirm={(pass) => console.log(pass)}
        shuffle={"always"}
    />,
    document.getElementById("root")
);

Custom Usage

import ReactPaymentKeypad, { PaymentKeypadProps } from "react-payment-keypad";
import React, { useState } from "react";

const Example = () => {
  const [visible, setVisible] = useState(false);

  const setting: PaymentKeypadProps = {
    // {Required} keypad 사용 여부 입니다.
    isVisible: visible,
    // {Optional} emptyPassword true 일 경우 패스워드를 2번 입력 하도록 변경
    emptyPassword: true,
    // {Optional}  패스워드 화면을 꽉 채웁니다
    full: true,
    // {Optional} 패스워드를 입력 하는 횟수를 정하는 props 입니다
    count: 6,
    // {Optional} 에러 메세지 props 입니다.
    errorMessage: "패스워드가 일치 하지 않습니다.",
    // {Optional} 메세지 커스텀을 위한 props 입니다.
    messages: [
      "패스워드를 입력 해주세요.",
      "사용할 패스워드를 설정 해주세요",
      "다시 한번 입력해 주세요.",
    ],
    /**
     *  숫자 키패드 정렬 props 입니다.
     * - always 키패드 클릭 시 항상 패드를 재정렬 합니다.
     * - fixed 숫자 순서 그대로 정렬 합니다.
     * - once 키패드 입력 전 한번 랜덤으로 정렬 합니다.
     * */
    shuffle: "always",
    /**
     *   전체삭제 버튼 커스텀을 위한 props 입니다.
     *   @example
     *    deleteAllIcon: <img src="/image/icon.png"/> or "전체삭제"
     * */
    deleteAllIcon: "전체 삭제버튼",
    /**
     * 삭제 버튼 커스텀을 위한 props 입니다.
     *  @example
     *    deleteAllIcon: <img src="/image/icon.png"/> or "삭제"
     * */
    deleteIcon: "삭제버튼",
    // {Required} keypad close func
    onClose: () => {
      setVisible(false);
    },
    // {Required} keypad 입력 후 패스워드 결과 값이 나오는 func
    onFinish: (password) => {
      console.log(password);
    },
    // {Optional} emptyPassword true 일 경우 패스워드 결과 값이 return 되는 func
    onPassConfirm: (password) => {
      console.log(password);
    },
  };

  return <ReactKeypad {...setting} />;
};

export default Example;

새 창으로 열어서 패스워드를 받아와야 하는 경우

${your_domain}/main

import { usePaymentOpener } from "react-payment-keypad";

const Main = () => {
  const { password, onPaymentOpen } = usePaymentOpener();
  console.log(password); // passwrod callback
  
  const handleOpen = () =>{
    onPaymentOpen("/payment", { width:600, height:700 })
  }
  
  return (
    <div>
      <button onClick={handleOpen}>Payment Open!</button>    
    </div>
  );
};

export default Main;

${your_domain}/payment

import ReactPaymentKeypad from "react-payment-keypad";

const Payment = () => {
  return <ReactPaymentKeypad opener={true} />
};

export default Payment;

Props

Prop	Type	Required?	Default Value	Description
isVisible	boolean	Optional	-	keypad 사용 여부 입니다.
onClose	function	Optional	-	keypad close func
onFinish	function	Optional	-	keypad 입력 후 패스워드 결과 값이 나오는 func
count	number	Optional	6	패스워드를 입력 하는 횟수를 정하는 props 입니다
emptyPassword	boolean	Optional	false	emptyPassword true 일 경우 패스워드를 2번 입력 하도록 변경
onPassConfirm	function	Optional	true	emptyPassword true 일 경우 패스워드 결과 값이 return 되는 func
shuffle	always or fixed or once	Optional	fixed	-always 키패드 클릭 시 항상 패드를 재정렬 합니다.- fixed 숫자 순서 그대로 정렬 합니다.- once 키패드 입력 전 한번 랜덤으로 정렬 합니다.
errorMessage	string	Optional	-	에러 메세지 props 입니다.
messages	array	Optional	메세지 커스텀을 위한 props 입니다.	message
deleteAllIcon	string or React.ReactNode	Optional	전체삭제	전체삭제 버튼 커스텀을 위한 props 입니다.
deleteIcon	string or React.ReactNode	Optional	삭제	삭제 버튼 커스텀을 위한 props 입니다.
full	boolean	Optional	false	true 일 경우 패스워드창이 페이지를 꽉 채웁니다.
opener	boolean	Optional	false	새 창 열기로 패스워드를 입력 받을 경우 해당 페이지에서 true

License

MIT