React Native 환경에서 포트원 V2 결제 시스템에 연동하기 위한 SDK입니다.
Node.js v18을 지원하며, Expo 51.0.38과 react-native-webview 13.8.6 환경에서 테스트되었습니다.
- Expo CLI를 사용해 @portone/react-native-sdk와 react-native-webview를 설치합니다.
npx expo install @portone/react-native-sdk react-native-webview- TypeScript를 사용하시는 경우 @portone/browser-sdk를 devDependencies에 추가합니다.
npm install --save-dev @portone/browser-sdk
yarn add -D @portone/browser-sdk- app.json의 plugin 항목으로
@portone/react-native-sdk/plugin를 추가합니다.
{
"expo": {
"plugins": ["@portone/react-native-sdk/plugin"]
}
}- TypeScript를 사용하시는 경우
tsconfig.json에 다음 항목을 추가 혹은 수정합니다.
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "NodeNext"
}- @portone/react-native-sdk와 react-native-webview를 설치합니다.
npm install --save @portone/react-native-sdk react-native-webview
yarn add @portone/react-native-sdk react-native-webview- ios 서브디렉토리에서 pod를 사용해 react-native-webview에 필요한 네이티브 의존성을 링킹힙니다.
pod install- TypeScript를 사용하시는 경우 @portone/browser-sdk를 devDependencies에 추가합니다.
npm install --save-dev @portone/browser-sdk
yarn add -D @portone/browser-sdk- TypeScript를 사용하시는 경우
tsconfig.json에 다음 항목을 추가 혹은 수정합니다.
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "NodeNext"
}- 앱 링크를 사용하기 위해 android/app/src/main/AndroidManifest.xml 파일에 아래 내용을 추가합니다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 중략 -->
<queries>
<package android:name="com.kftc.bankpay.android" />
<package android:name="kvp.jjy.MispAndroid320" />
<package android:name="com.hyundaicard.appcard" />
<package android:name="com.shcard.smartpay" />
<package android:name="com.shinhan.smartcaremgr" />
<package android:name="com.kbcard.cxh.appcard" />
<package android:name="com.kbstar.kbbank" />
<package android:name="com.kbstar.reboot" />
<package android:name="kr.co.samsungcard.mpocket" />
<package android:name="kr.co.shiftworks.vguardweb" />
<package android:name="net.ib.android.smcard" />
<package android:name="com.lcacApp" />
<package android:name="com.lottemembers.android" />
<package android:name="com.hanaskcard.paycla" />
<package android:name="nh.smart.card" />
<package android:name="nh.smart.nhallonepay" />
<package android:name="kr.co.citibank.citimobile" />
<package android:name="com.kakao.talk" />
<package android:name="com.nhnent.payapp" />
<package android:name="com.wooricard.smartapp" />
<package android:name="com.wooribank.smart.npib" />
<package android:name="viva.republica.toss" />
<package android:name="com.nhn.android.search" />
<package android:name="com.kakaobank.channel" />
<package android:name="com.ahnlab.v3mobileplus" />
<package android:name="com.samsung.android.spay" />
<package android:name="jp.naver.line.android" />
<package android:name="com.eg.android.AlipayGphone" />
<package android:name="com.tencent.mm" />
<intent>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" />
</intent>
</queries>
</manifest>- 앱 링크를 사용하기 위해 ios/(프로젝트 이름)/Info.plist 파일에 아래 내용을 추가합니다.
<dict>
<!-- 중략 -->
<key>LSApplicationQueriesSchemes</key>
<array>
<string>kftc-bankpay</string>
<string>ispmobile</string>
<string>hdcardappcardansimclick</string>
<string>smhyundaiansimclick</string>
<string>hyundaicardappcardid</string>
<string>shinhan-sr-ansimclick</string>
<string>shinhan-sr-ansimclick-naverpay</string>
<string>shinhan-sr-ansimclick-payco</string>
<string>shinhan-sr-ansimclick-lpay</string>
<string>shinhan-sr-ansimclick-mola</string>
<string>smshinhanansimclick</string>
<string>smailapp</string>
<string>kb-acp</string>
<string>kb-auth</string>
<string>kb-screen</string>
<string>kbbank</string>
<string>liivbank</string>
<string>newliiv</string>
<string>mpocket.online.ansimclick</string>
<string>ansimclickscard</string>
<string>ansimclickipcollect</string>
<string>vguardstart</string>
<string>samsungpay</string>
<string>scardcertiapp</string>
<string>monimopay</string>
<string>monimopayauth</string>
<string>lottesmartpay</string>
<string>lotteappcard</string>
<string>lmslpay</string>
<string>lpayapp</string>
<string>cloudpay</string>
<string>hanawalletmembers</string>
<string>nhappcardansimclick</string>
<string>nonghyupcardansimclick</string>
<string>nhallonepayansimclick</string>
<string>citispay</string>
<string>citicardappkr</string>
<string>citimobileapp</string>
<string>kakaotalk</string>
<string>payco</string>
<string>com.wooricard.wcard</string>
<string>newsmartpib</string>
<string>NewSmartPib</string>
<string>supertoss</string>
<string>naversearchthirdlogin</string>
<string>kakaobank</string>
<string>v3mobileplusweb</string>
<string>line</string>
<string>alipays</string>
<string>weixin</string>
</array>
</dict>import {
IdentityVerification,
IssueBillingKey,
IssueBillingKeyAndPay,
Payment,
IssueBillingKeyUI,
PaymentUI,
} from '@portone/react-native-sdk'
<Payment request={/* ... */} />세부 사용법과 관련하여 React Native 포트원 샘플 프로젝트 및 React Native Expo 포트원 샘플 프로젝트를 참고하실 수 있습니다.
Made with create-react-native-library
Packages under portone-io/react-native-sdk are primarily distributed under the terms of both the Apache License (Version 2.0) and the MIT license. See COPYRIGHT for details.