0.3.5 • Published 1 month ago
🚀 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 |