AllRightJunyoung/next-step-payments

넥스트스텝 페이먼츠 앱 배포를 위한 레포

React Payments 💳

💻 DEMO (장바구니페이지 삽입)

1. 카드 등록

2023-04-26.3.00.37.mov

2. 결제 완료

2023-04-26.3.01.30.mov

3. 결제 실패

2023-04-26.3.27.30.mov

⚙️ 기능

• 가상 키보드
• Form 유효성 검사
• Layout 수정가능 (CSS)
• Form AutoFocusing
• 카드 번호에 따라 변경되는 Card UI
• 결제 페이지 (등록된 카드가 맞는지도 유효성 체크)
• PaymentApp close버튼 Handler

⚡ 사용방법

$ npm i payment-junyoung
$ yarn add payment-junyoung

1. Context Provider 주입 (필수)

import { PaymentAppContextProvider } from 'payment-junyoung';

<React.StrictMode>
<PaymentAppContextProvider>
   <App/>
</PaymentAppContextProvider>
</React.StrictMode>

2. 원하는 컴포넌트에 PaymentApp 주입

import { PaymentApp } from 'payment-junyoung';
function App(){
    return (
        <div>
            <PaymentApp/>
        </div>
    )
}

3. 결제가 완료되어있는지 확인하는 usePayment훅

• isPayment를 값을 통해 결제가 된지 확인이 가능

import { usePayment } from 'payment-junyoung';
const { isPayment } = usePayment(); // boolean
결제가 완료가 되면 isPayment 값은 true를 반환

4. PaymenApp의 Close 버튼 handler (onCloseButton)

<PaymentApp onCloseButton={() => dispatch(handlePaymentApp(false))} />

📚 스토리북

• https://64465f8bbce72a66f7c2875a-molpqwtvyn.chromatic.com/?path=/story/domain-companylistmodal--default