사용법

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>