0.3.5 • Published 2 years 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 |