Near Payments

Next Step 최종 미션에 활용되는 React 페이먼츠 애플리케이션입니다.

• Near Payments 체험하기

이슈 및 개선사항 요청이 있는 경우, 아래 링크를 통해 이슈를 등록해주세요.

• 이슈 등록하기

미션 진행에 도움이 되셨다면, ⭐️ Star 부탁드립니다. 😁

Requirements

"node": ">=20"

"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Install

# with Yarn
yarn install near-payments

# with Npm
npm install near-payments

# with Pnpm
pnpm install near-payments

Usage

1. OverlayProvider 적용

OverlayProvider를 사용하여 Near Payments 애플리케이션을 렌더링합니다. <App />을 OverlayProvider로 감싸주세요.

import { OverlayProvider } from 'near-payments';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <OverlayProvider>
      <App />
    </OverlayProvider>
  </React.StrictMode>,
);

2. useLoadNearPayments

useLoadNearPayments Hook을 사용하여 원하는 시점에 결제 화면을 열 수 있습니다.

📗 useLoadNearPayments 옵션

import { useLoadNearPayments } from 'near-payments';

const App = () => {
  const loadNearPayments = useLoadNearPayments({
    clientId: 'CLIENT_ID',
  });
}

📗 loadNearPayments 옵션

import { PaymentCancel, PaymentResult, useLoadNearPayments } from 'near-payments';

const App = () => {
  const loadNearPayments = useLoadNearPayments({
    clientId: 'CLIENT_ID',
  });

  const openPayments = async () => {
    try {
      await loadNearPayments({
        orderId: '1234567890',
        totalAmount: 10000,
        onPaymentComplete: (paymentResult: PaymentResult) => {
          // 결제 완료 시 처리
          console.log('paymentResult:', paymentResult)
        },
        onPaymentCancel: (paymentCancel: PaymentCancel) => {
          // 결제 취소 시 처리 
          console.log('paymentCancel:', paymentCancel);
        },
      });
    } catch (error) {
      // 결제 중 발생한 에러 처리
      console.error('Payment error:', error);
    }
  };

  return (
    <button onClick={openPayments}>결제하기</button>
  );
};

📘 PaymentResult 타입

export type PaymentResult = {
  success: boolean; // 결제 성공 여부
  message: string; // 결제 메시지
  orderId: string; // 주문 번호
  totalAmount: number; // 총 결제 금액
  cardNumber: string; // 결제 카드 번호
  paymentTimestamp: number; // 결제 시간
};

📘 PaymentCancel 타입

export type PaymentCancel = {
  success: boolean; // 결제 성공 여부
  message: string; // 결제 메시지
  orderId: string; // 주문 번호
};

🔴 에러 코드