@compy-ryu/payments v0.2.28
사용법
import { Payments } from "@compy-ryu/payments";
function App() {
return (<Payments
defaultCardList={/* 초기 카드 목록 (선택 옵션) */}
companyList={} /* 카드사 목록 (선택 옵션) */
amountPaid={} /* 결제 필요 금액 */
onClickPayment={(cardId) => console.log(`결제 시 발생될 클릭 이벤트 => 카드 아이디 : ${cardId}`)}
onClickCancel={(event) => console.log(`결제 취소 시 발생될 클릭 이벤트 => 이벤트 객체: ${event}`)}
onUpdatedCardData={(cardList) => {
/* 카드 정보 업데이트(추가/제거/편집) 시 발생될 이벤트 */
console.log(`저장된 카드 목록 배열 : ${cardList}`);
}}
/>);
}
설치
Yarn
yarn add @compy/payments
Npm
npm install @compy/payments
Component Props
defaultCardList
첫 로드 시 기본으로 소지할 카드 목록을 지정합니다.
이후 카드 업데이트 목록 정보는 하단의 onUpdatedCardData()
문단을 참조해주세요.
데이터 예시
const cardList = [
{
id: '아이디 (문자열)',
cardName: '카드명',
companyId: '회사 아이디(companyList의 아이디 값)',
cardNumber: ['1234', '1234', '1234', '1234'],
expireMonth: '12',
expireYear: '25',
userName: '카드 소유자 이름',
securityCode: '123',
cardPassword: '23',
},
{
id: '아이디 (문자열)',
cardName: '카드명',
companyId: '회사 아이디(companyList의 아이디 값)',
cardNumber: ['1234', '1234', '1234', '1234'],
expireMonth: '12',
expireYear: '25',
userName: '카드 소유자 이름',
securityCode: '123',
cardPassword: '23',
},
];
companyList
사용자가 카드 선택 시 추가할 수 있는 카드사 목록을 설정할 수 있습니다.
데이터 예시
const CARD_COMPANY: Record<number, CardCompany> = {
1: { name: '포코 카드', color: 'purple', icon: '👾' },
2: { name: '준 카드', color: 'yellow', icon: '😆' },
3: { name: '공원 카드', color: 'sky', icon: '🌳' },
4: { name: '월터 카드', color: 'white', icon: '👻' },
5: { name: '리트 카드', color: 'white', icon: '🎬' },
6: { name: '로이 카드', color: 'yellow', icon: '🚀' },
7: { name: '헤인티 카드', color: 'orange', icon: '🌻' },
8: { name: '발리스타 카드', color: 'purple', icon: '⭐️' },
9: { name: '아사 카드', color: 'sky', icon: '🥛' },
10: { name: '콤피 카드', color: 'green', icon: '🦖' },
};
- id 값은 cardList의 companyId로 연결됩니다.
amountPaid : number
결제 금액을 설정할 수 있습니다.
number
타입으로 값을 전달해주세요.
onClickPayment (cardId : string)
결제 버튼을 클릭할 시 발생될 이벤트입니다. 사용자가 선택한 카드의 id(string) 값이 첫번째 매개변수로 전달됩니다.
onClickCancel
결제를 취소할 시 발생될 이벤트입니다. 이벤트 객체가 첫번째 매개변수로 전달됩니다.
onUpdatedCardData
카드 정보를 추가 / 제거 / 업데이트할 시 발생될 이벤트입니다. 최신화된 카드 목록이 첫번째 매개변수로 전달됩니다.
<CardWalletApp
onUpdatedCardData={(cardList) => {
/* 카드 정보 업데이트(추가/제거/편집) 시 발생될 이벤트 */
console.log(`저장된 카드 목록 배열 : ${cardList}`);
}}
/>
/*
- 카드 추가, 편집, 제거 시 아래와 같이 배열을 반환합니다.
[
{
id: '아이디 (문자열)',
cardName: '카드명',
companyId: '회사 아이디(companyList의 아이디 값)',
cardNumber: ['1234', '1234', '1234', '1234'],
expireMonth: '12',
expireYear: '25',
userName: '카드 소유자 이름',
securityCode: '123',
cardPassword: '23',
},
{
id: '아이디 (문자열)',
cardName: '카드명',
companyId: '회사 아이디(companyList의 아이디 값)',
cardNumber: ['1234', '1234', '1234', '1234'],
expireMonth: '12',
expireYear: '25',
userName: '카드 소유자 이름',
securityCode: '123',
cardPassword: '23',
},
];
*/
스타일 가이드
이 컴포넌트는 부모 엘리먼트의 font-size를 따라갑니다. 컴포넌트 내 요소의 전반적인 글씨 크기를 조절하고 싶으시다면 상위 컨테이너에서 font-size를 설정하여주세요.
<div style={{font-size: '18px'}}>
<Payment/>
</div>
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago