@dongminahn/react-payments NPM

🚀 Getting Started

import { PaymentModal, Payment } from "@dongminahn/react-payments";

function App() {
  const { isModalOpen, onClose, onOpen } = PaymentModal.useModal();
  return (
    <>
      <button onClick={onOpen}>결제하기</button>
      {isModalOpen && (
        <PaymentModal.Modal isOpen={isModalOpen} onClose={onClose}>
          <Payment
            price={2000}
            onSuccess={({ massage }) => {
              alert(massage);
              onClose();
            }}
          />
        </PaymentModal.Modal>
      )}
    </>
  );
}

📦 Installation

yarn add @ahndongmin/react-payment

npm install @ahndongmin/react-payment

📚 Dependencies

React
Typescript
Emotion
Storybook

Component

Payment

props	type	description
price	number	결제 금액
onSuccess	function	결제 성공시 콜백 함수
onFail	function	결제 실패시 콜백 함수

PaymentModal.Modal

props	type	description
isOpen	boolean	모달 오픈 여부
onClose	function	모달 닫기 콜백 함수

PaymentModal.useModal

return	type	description
isModalOpen	boolean	모달 오픈 여부
onClose	function	모달 닫기 콜백 함수
onOpen	function	모달 오픈 콜백 함수

초기 설계

컴포넌트 명	props
Card	cardName, cardNumber, userName, expirationMonth,expirationYear
Header	title, onLeftIconClick, LeftIcon
Input	placeholder, onChange , value , id , width, textAlign
CardCategoryITem	name, color
Label	textLength, limit , children , title
BottomModal	바텀 모달 컴포넌트
TextButton	text , onClick
CardAddButton	onClick
LineInput	value , onChange