토스페이먼츠 React Native 모듈

토스페이먼츠 리액트 네이티브 모듈입니다. 토스페이먼츠에서 공식적으로 지원하는 Javascript SDK를 사용하여 리액트 네이티브 모듈로 구성했습니다.

설치하기

$ npm install tosspayments-react-native

$ yarn add tosspayments-react-native

tosspayments-react-native는 v11.3.2이상의 react-native-webview와 v1.2.3이상의 react-native-send-intent를 필요로 합니다. 설치되어 있지 않은 경우 모듈 사용이 불가하오니 꼭 설치해주세요.

설정하기

iamport-react-native 모듈 설정 내용으로 작성했습니다.

1. 외부 앱 리스트 등록

3rd party앱(간편결제)를 실행할 수 있도록 외부 앱 리스트를 등록해야합니다.

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>kftc-bankpay</string>
  <!-- 계좌이체 -->
  <string>ispmobile</string>
  <!-- ISP모바일 -->
  <string>itms-apps</string>
  <!-- 앱스토어 -->
  <string>hdcardappcardansimclick</string>
  <!-- 현대카드-앱카드 -->
  <string>smhyundaiansimclick</string>
  <!-- 현대카드-공인인증서 -->
  <string>shinhan-sr-ansimclick</string>
  <!-- 신한카드-앱카드 -->
  <string>smshinhanansimclick</string>
  <!-- 신한카드-공인인증서 -->
  <string>kb-acp</string>
  <!-- 국민카드-앱카드 -->
  <string>mpocket.online.ansimclick</string>
  <!-- 삼성카드-앱카드 -->
  <string>ansimclickscard</string>
  <!-- 삼성카드-온라인결제 -->
  <string>ansimclickipcollect</string>
  <!-- 삼성카드-온라인결제 -->
  <string>vguardstart</string>
  <!-- 삼성카드-백신 -->
  <string>samsungpay</string>
  <!-- 삼성카드-삼성페이 -->
  <string>scardcertiapp</string>
  <!-- 삼성카드-공인인증서 -->
  <string>lottesmartpay</string>
  <!-- 롯데카드-모바일결제 -->
  <string>lotteappcard</string>
  <!-- 롯데카드-앱카드 -->
  <string>cloudpay</string>
  <!-- 하나카드-앱카드 -->
  <string>nhappcardansimclick</string>
  <!-- 농협카드-앱카드 -->
  <string>nonghyupcardansimclick</string>
  <!-- 농협카드-공인인증서 -->
  <string>citispay</string>
  <!-- 씨티카드-앱카드 -->
  <string>citicardappkr</string>
  <!-- 씨티카드-공인인증서 -->
  <string>citimobileapp</string>
  <!-- 씨티카드-간편결제 -->
  <string>kakaotalk</string>
  <!-- 카카오톡 -->
  <string>payco</string>
  <!-- 페이코 -->
  <string>lpayapp</string>
  <!-- 롯데 L페이 -->
  <string>hanamopmoasign</string>
  <!-- 하나카드 공인인증앱 -->
  <string>wooripay</string>
  <!-- 우리페이 -->
  <string>nhallonepayansimclick</string>
  <!-- NH 올원페이 -->
  <string>hanawalletmembers</string>
  <!-- 하나카드(하나멤버스 월렛) -->
</array>

2. App Transport Security 설정

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoadsInWebContent</key>
  <true />
  <key>NSAllowsArbitraryLoads</key>
  <true />
</dict>

예제

현재 지원하는 기능은 카드 일반결제입니다.

카드 일반결제 예제

필요 파라미터는 아래를 참고하세요. 자세한 Description은 토스페이먼츠 결제 연동 가이드에서 확인 가능합니다.

Prop	Type	Description	Required
clientKey	string	클라이언트 API 키	true
amount	number	실제 결제되는 금액입니다.	true
orderId	string	가맹점에서 사용하는 해당 주문에 대한 ID입니다.	true
orderName	string	결제에 대한 주문명입니다.	true
cardCompany	string	카드사가 고정된 상태로 결제창이 열립니다.	false
cardInstallmentPlan	number	할부 개월 수가 고정된 상태로 결제창이 열립니다.	false
maxCardInstallmentPlan	number	최대 할부 개월 수를 제한하기 위해 사용합니다.	false
useCardPoint	boolean	카드사 포인트 사용 여부를 결정합니다.	false
customerName	string	결제하는 고객의 실명입니다.	false
customerEmail	string	결제하는 고객의 이메일입니다.	false
customerMobilePhone	string	결제하는 고객의 휴대폰 번호입니다.	false
taxFreeAmount	number	결제하는 상품에 대한 면세 금액입니다.	false
useInternationalCardOnly	boolean	결제창에서 해외카드를 지원합니다.	false
flowMode	'DEFAULT' | 'DIRECT'	토스페이먼츠의 약관 동의 페이지와 카드 선택 페이지를 건너뛰고 바로 카드사 페이지를 엽니다.	false
discountCode	string	할인 코드입니다. 이 값을 주면 할인 코드에 해당하는 할인이 적용됩니다.	false
appScheme	string	모바일 ISP 앱에서 가맹점 앱으로 전환하기 위해 사용됩니다.	false
onSuccess	void	결제가 성공했을 때의 콜백 함수입니다.	true
onError	void	결제가 실패했을 때의 콜백 함수입니다.	true

<Payments
  clientKey="test_ck_7XZYkKL4MrjN11xmYmar0zJwlEWR"
  orderId="TEST01010101010101"
  orderName="테스트 주문"
  amount={5000}
  onSuccess={(data) => Alert.alert("결제 성공", JSON.stringify(data))}
  onError={(error) => Alert.alert("결제 실패", JSON.stringify(error))}
/>