React Native 연동 가이드
돈나무 React Native SDK 사용법을 소개합니다.
돈나무 서버 정보
개발 서버 URI: https://sandbox-api.moneytree.bz
운영 서버 URI: https://api.moneytree.bz
설치 가이드
1.
@lumigloo/moneytree-rn 을 설치하기 위해 터미널에서 아래 명령어를 실행합니다.
npm install @lumigloo/moneytree-rn
JavaScript
복사
2.
예제 코드
import { confirmPaymentEvent, MoneytreeEvent, MoneytreeEventType, MoneytreeMode, MoneytreeWebview } from "@lumigloo/moneytree-rn";
export default function MoneytreeViewExample() {
const jwtToken = '돈나무 sign-in API(엔드포인트 항목 참조)를 호출하여 얻은 토큰 값';
const completeOrder = '돈나무 order-complete API(엔드포인트 항목 참조)'
return (
<MoneytreeWebview
(1) Mode
mode={MoneytreeMode.PROD}
(2) JWT Token
jwtToken={jwtToken}
(3) onInit: 돈나무 웹뷰 초기 설정 완료 시 호출되는 함수
onInit={() => {console.log("moneytree webview init")}}
(4) onEventRecieved: 돈나무 웹뷰 이벤트 리스너
onEventReceived={async (paymentEvent) => {
if (paymentEvent.type === MoneytreeEventType.PAYMENT) {
const orderResult = await completeOrder(paymentEvent);
confirmPaymentEvent(orderResult.orderId);
}
}}
(5) onPressedBackInMain: 메인 페이지에서 백 버튼을 누를 시 호출되는 함수
onPressedBackInMain={() => {console.log("onPressedBackInMain")}}
/>
);
}
JavaScript
복사
Method | Type | Description | Default | Required |
mode | MoneytreeMode | 1. Moneytree.PROD(default): 돈나무 운영 서비스를 이용합니다.
2. Moneytree.TEST: 돈나무 개발(환경) 서비스를 이용합니다.(실거래 방지를 위해 개발 환경에서는 반드시 이 모드를 사용해주시기 바랍니다.) | MoneytreeMode.prod | x |
jwtToken | string | o | ||
onInit | () ⇒ void | - MoneytreeWebview가 렌더링될 때 호출되는 콜백 함수 입니다. | x | |
onEventReceived | (event: MoneytreeEvent) ⇒ void | - Moneytree에서 발생하는 이벤트를 수신하기 위한 콜백 함수입니다. | o | |
onPressedBackInMain | () ⇒ void | 메인 화면에서 뒤로 가기 버튼(android)이 눌렸을 때 호출되는 콜백함수입니다. | x |
이벤트
이벤트(Event)란, 유저의 행동에 의해 동나무 웹사이트로부터 요청받은 행위를 말하며, onEventReceived를 통해 이벤트를 받을 수 있습니다.
onEventRecieved={(event)=>{}}
JavaScript
복사
또한, event 객체는 다음과 같은 값이 있습니다. event.type에 따라 data 타입이 달라질 수 있습니다.
Name | Type | Description |
type | MoneytreeEventType | 이벤트의 종류를 나타냅니다. |
data | any | 이벤트 요청을 받았을 때 오는 데이터를 의미합니다. |
결제 이벤트:
sequenceDiagram
participant U as 사용자
participant DF as 돈나무 서비스(FE)
participant DB as 돈나무 BE
participant BA as 고객사 앱(FE)
participant BB as 고객사 서버(BE)
U->>DF: 1. 상품 '구매하기' 버튼 클릭
DF->>DB: 2. 주문 생성 요청
DB->>DF: 3. 주문 생성 후 응답
DF->>BA: 4. 주문 결제 요청
BA->>BB: 5. 주문 결제 완료 요청
BB->>DB: 6. 주문 상태 변경(결제완료) 요청
DB->>BB: 7. 주문 상태 변경(결제완료) 응답
BB->>BB: 8. 포인트 차감
BB->>BA: 9. 주문 결제 완료 응답
DF->>DB: 10. 해당 주문 건 조회 요청
DB->>DF: 11. 해당 주문 건 조회 응답(결제완료)
DF->>U: 12. 구매내역 페이지로 이동Mermaid
복사
1.
결제 이벤트의 event.data에는 다음과 같은 값이 있습니다. 총 주문 금액에서 사용된 포인트를 뺀 값이 결제 금액입니다.
Name | Type | Description | Required |
orderId | String | 돈나무 주문 ID | O |
totalAmount | int | 총 주문 금액 | O |
usedPoint | int | 사용된 포인트 | O |
paidAmount | int | 결제된 금액 | O |
expirationTime | DateTime | 결제 만료시간
결제 만료시간이 지난 결제 완료 건은 처리되지 않습니다. | O |
createdAt | String | 주문 생성일시 | O |
2.
사용자의 결제 프로세스 중 해당 결제 건을 최종 완료하기 전 돈나무 Backend 결제 완료 API를 호출해야 합니다. 돈나무로부터 응답을 받은 뒤 모든 결제 프로세스를 완료합니다(돈나무 결제 완료 API는 해당 주문 건을 검증하고 최종 결제 완료 처리 후 상품 생성 및 지급합니다).
curl -X POST "https://api.moneytree.bz/v1/order/complete" \
-H "Content-Type: application/json" \
-H "x-api-key: YOUR_API_KEY"
-d '{"orderId": 돈나무 Order Id}'
JavaScript
복사
3.
결제 프로세스가 성공적으로 완료되었을 경우에는 orderId를 담아 confirmPaymentEvent를 호출해야 합니다.
4.
결제 완료
엔드포인트
개발 서버 URI: https://sandbox-api.moneytree.bz
운영 서버 URI: https://api.moneytree.bz
All Endpoints
Search
웹훅(지원예정)
웹훅 설정은 돈나무 고객사 어드민 페이지에서 가능합니다.
All Webhook Events
Search
