react-native-bootpay-api 라이브러리

부트페이에서 지원하는 공식 react native 라이브러리 입니다. (클라이언트 용)
* PG 결제창 연동은 클라이언트 라이브러리에서 수행됩니다. (Javascript, Android, iOS, React Native, Flutter 등)
* 결제 검증 및 취소, 빌링키 발급, 본인인증 등의 수행은 서버사이드에서 진행됩니다. (Java, PHP, Python, Ruby, Node.js, Go, ASP.NET 등)

1-1. 설치하기

$3

``sh
npm install react-native-bootpay-api
`

$3

`sh
yarn add react-native-bootpay-api
`

또는 package.json 파일의 dependencies에 추가 후 yarn install을 합니다.

`sh
"dependencies": {
"react-native-webview-api": last_version
}

`

$3

react-native-bootpay-api는 내부적으로 아래의 모듈에 의존합니다. 아래를 참조하여 설치해주세요.

`sh
"dependencies": {
"react-native-webview-api": last_version
},
"devDependencies": {
"react-native-webview-bootpay": last_version,
"react-native-sensitive-info": last_version,
"react-native-base64": last_version,
"react-native-device-info": last_version
},
`




설정하기

$3

따로 설정하실 것이 없습니다.

$3

{your project root}/ios/Runner/Info.plist
CFBundleURLName과 CFBundleURLSchemes의 값은 개발사에서 고유값으로 지정해주셔야 합니다. 외부앱(카드사앱)에서 다시 기존 앱으로 앱투앱 호출시 필요한 스키마 값입니다.
`xml




...

NSAppTransportSecurity

NSAllowsArbitraryLoads


CFBundleURLTypes


CFBundleTypeRole
Editor
CFBundleURLName
kr.co.bootpaySample
CFBundleURLSchemes

bootpaySample

...


`

사용예제

`typescript

import React, { useRef } from 'react';

import {
StyleSheet,
View,
Text,
TouchableOpacity
} from 'react-native';
import { Bootpay, Extra } from 'react-native-bootpay-api';


export default function App() {
const bootpay = useRef(null);



const goBootpayTest = () => {
const payload = {
pg: '나이스페이', //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
method: '카드', // ['카드', '휴대폰', '계좌이체', '가상계좌', '카카오페이', '네이버페이', '페이코', '카드자동'] 중 택 1
order_name: '마스카라', //결제창에 보여질 상품명
order_id: '1234_1234', //개발사에 관리하는 주문번호
// subscription_id: '12345_21345', //개발사에 관리하는 주문번호 (정기결제용)
// authentication_id: '12345_21345', //개발사에 관리하는 주문번호 (본인인증용)
// method: 'card',
// methods: ['card', 'vbank', 'bank', 'phone'], // 통합결제창 진행시 사용하고자 하는 결제수단 지정 가능, method와 함께 적용 불가
price: 1000, //결제금액
// taxFree: 0, //면세금액
}

//결제되는 상품정보들로 통계에 사용되며, price의 합은 결제금액과 동일해야함
const items = [
{
name: '키보드', //통계에 반영될 상품명
qty: 1, //수량
id: 'ITEM_CODE_KEYBOARD', //개발사에서 관리하는 상품고유번호
price: 1000, //상품단가
cat1: '패션', //카테고리 상 , 자유롭게 기술
cat2: '여성상의', //카테고리 중, 자유롭게 기술
cat3: '블라우스', //카테고리 하, 자유롭게 기술
}
]

//구매자 정보로 결제창이 미리 적용될 수 있으며, 통계에도 사용되는 정보
const user = {
id: 'user_id_1234', //개발사에서 관리하는 회원고유번호
username: '홍길동', //구매자명
email: 'user1234@gmail.com', //구매자 이메일
gender: 0, //성별, 1:남자 , 0:여자
birth: '1986-10-14', //생년월일 yyyy-MM-dd
phone: '01012345678', //전화번호, 페이앱 필수
area: '서울', // [서울,인천,대구,광주,부산,울산,경기,강원,충청북도,충북,충청남도,충남,전라북도,전북,전라남도,전남,경상북도,경북,경상남도,경남,제주,세종,대전] 중 택 1
addr: '서울시 동작구 상도로' //주소
}


//기타 설정

const extra = {
card_quota: "0,2,3", //결제금액이 5만원 이상시 할부개월 허용범위를 설정할 수 있음, [0(일시불), 2개월, 3개월] 허용, 미설정시 12개월까지 허용
app_scheme: "bootpayrnapi", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명
show_close_button: false, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)
}


if(bootpay != null && bootpay.current != null) bootpay.current.requestPayment(payload, items, user, extra);
}


const goBootpaySubscriptionTest = () => {
const payload = {
pg: '나이스페이', //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
method: '카드자동', // ['카드', '휴대폰', '계좌이체', '가상계좌', '카카오페이', '네이버페이', '페이코', '카드자동'] 중 택 1
order_name: '마스카라', //결제창에 보여질 상품명
// order_id: '1234_1234', //개발사에 관리하는 주문번호
subscription_id: '12345_21345', //개발사에 관리하는 주문번호 (카드자동결제용)
// authentication_id: '12345_21345', //개발사에 관리하는 주문번호 (본인인증용)
// method: 'card',
// methods: ['card', 'vbank', 'bank', 'phone'], // 통합결제창 진행시 사용하고자 하는 결제수단 지정 가능, method와 함께 적용 불가
price: 1000, //결제금액
// taxFree: 0, //면세금액
}

//결제되는 상품정보들로 통계에 사용되며, price의 합은 결제금액과 동일해야함
const items = [
{
name: '키보드', //통계에 반영될 상품명
qty: 1, //수량
id: 'ITEM_CODE_KEYBOARD', //개발사에서 관리하는 상품고유번호
price: 1000, //상품단가
cat1: '패션', //카테고리 상 , 자유롭게 기술
cat2: '여성상의', //카테고리 중, 자유롭게 기술
cat3: '블라우스', //카테고리 하, 자유롭게 기술
}
]

//구매자 정보로 결제창이 미리 적용될 수 있으며, 통계에도 사용되는 정보
const user = {
id: 'user_id_1234', //개발사에서 관리하는 회원고유번호
username: '홍길동', //구매자명
email: 'user1234@gmail.com', //구매자 이메일
gender: 0, //성별, 1:남자 , 0:여자
birth: '1986-10-14', //생년월일 yyyy-MM-dd
phone: '01012345678', //전화번호, 페이앱 필수
area: '서울', // [서울,인천,대구,광주,부산,울산,경기,강원,충청북도,충북,충청남도,충남,전라북도,전북,전라남도,전남,경상북도,경북,경상남도,경남,제주,세종,대전] 중 택 1
addr: '서울시 동작구 상도로' //주소
}


//기타 설정
const extra = {
card_quota: "0,2,3", //결제금액이 5만원 이상시 할부개월 허용범위를 설정할 수 있음, [0(일시불), 2개월, 3개월] 허용, 미설정시 12개월까지 허용
app_scheme: "bootpayrnapi2", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명
show_close_button: false, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)
}

if(bootpay != null && bootpay.current != null) bootpay.current.requestSubscription(payload, items, user, extra);
}

const goBootpayAuthTest = () => {
const payload = {
pg: '다날', //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
method: '본인인증',
order_name: '마스카라', //본인인증 명
// order_id: '1234_1234', //개발사에 관리하는 주문번호
// subscription_id: '12345_21345', //개발사에 관리하는 주문번호 (정기결제용)
authentication_id: '12345_21345', //개발사에 관리하는 주문번호 (본인인증용)
// method: 'card',
// methods: ['card', 'vbank', 'bank', 'phone'], // 통합결제창 진행시 사용하고자 하는 결제수단 지정 가능, method와 함께 적용 불가
// price: 1000, //결제금액
// taxFree: 0, //면세금액
}



//기타 설정
const extra = {
app_scheme: "bootpayrnapi", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명
show_close_button: true, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)

}

// const extra = new Extra();

if(bootpay != null && bootpay.current != null) bootpay.current.requestAuthentication(payload, [], {}, extra);

}

const onCancel = (data: string) => {
console.log('-- cancel', data);
}

const onError = (data: string) => {
console.log('-- error', data);
}

const onIssued = (data: string) => {
console.log('-- issued', data);
}

const onConfirm = (data: string) => {
console.log('-- confirm', data);
if(bootpay != null && bootpay.current != null) bootpay.current.transactionConfirm(data);
}

const onDone = (data: string) => {
console.log('-- done', data);
}

const onClose = () => {
console.log('-- closed');
}

// React.useEffect(() => {
// BootpayApi.multiply(3, 7).then(setResult);
// }, []);

return (

style={styles.button}
onPress={goBootpayTest}
>
일반결제 결제테스트


ref={bootpay}
ios_application_id={'5b8f6a4d396fa665fdc2b5e9'}
android_application_id={'5b8f6a4d396fa665fdc2b5e8'}
// ios_application_id={'5b9f51264457636ab9a07cdd'}
// android_application_id={'5b9f51264457636ab9a07cdc'}
onCancel={onCancel}
onError={onError}
onIssued={onIssued}
onConfirm={onConfirm}
onDone={onDone}
onClose={onClose}

/>
style={styles.button}
onPress={goBootpaySubscriptionTest}
>
정기결제 테스트

style={styles.button}
onPress={goBootpayAuthTest}
>
본인인증 테스트



);


}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10,
margin: 10,
},
});

`


WebView 프리워밍 (iOS/Android)

WebView는 처음 생성 시 프로세스 초기화에 시간이 소요됩니다 (iOS: 3-7초, Android: 200-300ms).
Bootpay SDK는 자동으로 패키지 import 시 백그라운드에서 프로세스를 미리 초기화하여 첫 결제 화면 로딩 속도를 개선합니다.

$3

SDK import 시 자동으로 프리워밍이 수행됩니다. 개발자가 별도로 호출할 필요가 없습니다.

`typescript
// 자동으로 warmUp이 수행됩니다
import { Bootpay } from 'react-native-bootpay-api';
`

$3

메모리 부족 시 프리워밍된 리소스를 해제할 수 있습니다:

`typescript
import { releaseWarmUp } from 'react-native-bootpay-api';

// 메모리 정리가 필요할 때 (선택사항)
releaseWarmUp();
``

$3

| 플랫폼 | 개선 효과 |
|--------|----------|
| iOS | WKWebView 프로세스 초기화 3-7초 단축 |
| Android | Chromium 엔진 초기화 200-300ms 단축 |

$3

- 프리워밍은 SDK import 시 자동으로 수행되므로 별도 설정이 필요 없습니다.
- 두 번째 결제부터는 ProcessPool/WebView 재사용으로 자동으로 빠릅니다.

Documentation

부트페이 개발매뉴얼을 참조해주세요

기술문의

채팅으로 문의

License

MIT License.