토스페이먼츠 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))}
/>