ReactNative에서 결제정보 데이터 구성에 질문이 있습니다.
안녕하세요. 새로 토스페이먼츠 가입하여 결제기능을 구현중입니다. ReactNative로 모바일에 올라갈 App을 개발하고 있는데요, 결제정보 데이터를 구성하는데에 있어서 url 을 넣는 부분에 어려움이 있습니다.
const testPaymentData: TossPaymentRequestDataTypes = {
orderId: 'KR' + Date.now().toString(),
amount: 100,
customerName: '',
customerEmail: '',
orderName: '',
appScheme: 'YOUR_APP_SCHEME://',
successUrl: 'https://your.website/success',
failUrl: 'https://your.website/fail',
};
이런 식으로 구성할 때 Url이 Origin을 포함해야 한다고 가이드에 나와있는데요, ReactNative App내에서 상대경로로 호출하는 것이 아니라 도메인 주소가 붙어야 하는 것으로 이해를 했습니다. 그래서 어떻게 해야하는 지를 잘 이해하지 못했습니다. 도메인 주소를 하나 준비해서 web service를 띄우고 그 아래에 success, fail page를 만들어야 하나요?
23 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
네 successURL, fail URL 은 web 서비스를 통해 제공되어야 합니다.
즉 앱만 으로 결제를 구현하실수는 없고 웹 사이트를 같이 구현해 주셔야 합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
월요일 아침부터 기운차게 답변해주셔서 감사합니다. Web 사이트에서 success, fail 페이지를 만들고 webview를 통해서 호출하는 식으로 구현을 해야겠네요. 같은 질문이 여러번 있었을 것 같은데요, 참고할만한 샘플 코드라든가 문서가 있을까요?
GitHub
payment-samples/payment-window at main · tosspayments/payment-samples
Contribute to tosspayments/payment-samples development by creating an account on GitHub.
여기 repo 를 참고하시면 될겁니다.
@Broadway requestPayment로 결제창 띄우는 페이지는 어떤방식으로 구현하셨나요?
안녕하세요 @이실장 님, 개인 개발자가 만드신 Library를 이용했습니다.
https://github.com/Eumhongin/react-native-toss-payments
를 활용해서 Widget을 띄웠습니다.
GitHub
GitHub - Eumhongin/react-native-toss-payments: tosspayments for rea...
tosspayments for react-native. Contribute to Eumhongin/react-native-toss-payments development by creating an account on GitHub.
일단 개인이 만든 라이브러리이기에 쭉 훑어보고 답변드려요. 정답은 알아서 찾아주시면 됩니다.
React Native에서 아래 method를 호출하면 라이브러리에서 정의한 웹뷰가 호출되고, 결제창이 뜹니다.
이중 아래 2개 메서드가 각각 succes/failUrl로 이동후 이벤트 헨들링을 하고 있네요
success/FailUrl의 가장 큰 목적은 인증완료 후, paymentKey/orderId/amount를 getParam으로 받아와서 승인API를 호출 하는 것입니다.
이에, 웹서버 없이 아래와 같은 방식으로 선언해도 웹뷰에서 아래와 같은 url로 이동 후 getparam으로 값을 전달해줄거에요.
이후에 값을 받아와서 핸들링해서 진행하면됩니다.
너무 감사합니다. 지난 한시간 동안 웹서비스 구성할 생각을 하고 있었는데 @이실장 님의 말씀 덕분에 더욱 빠르게 진행할 수 있을 것 같습니다. 바로 진행해보겠습니다.
다만 웹사이트가 없을 경우 특정카드사는 심사가 제외될 수 있습니다. 계약 관련해서는 아래로 문의주시면 답변얻으실 수 있을거에요
토스페이먼츠 결제연동팀
@이실장 님, 제가 이해가 부족한 것 같아서 추가 질문을 드립니다.
말씀처럼 success/fail Url 2개의 file에서 승인 API를 호출해야 하는데요, 그렇기 위해서 별도의 success.tsx 또는 fail.tsx 라는 파일을 만들어 그 안에서 승인 API를 호출하도록 구현해야 하는 것으로 이해하고 있습니다.
그래서 웹서버를 구성해서 2개 파일의 URL을 https://내도메인/suceess
https://내도메인/fail 와 같이 만들어 줄 생각을 하고 있었는데요, 실장님의 답변을 보니 'tosspayments://payment/sucesss' 와 같이 선언할 수 있다고 해주셔서요. 제가 여기서 조금 헷갈리는데요
ReactNative project 내의 위치로 url을 지정할 수 있다는 말씀이실까요?
이를테면 파일 import 하는 것처럼 "../payment/success" 라고 해도 된다는 말씀이신지 궁금합니다.
아니요
아래 메뉴는 RN 웹뷰에서 실행될거에요. 앱 위에 웹뷰 브라우저가 뜨는거죠
웹뷰 component에
tosspayments://payment/sucesss URL을 initial하면 일반적으로 native 언어나 flutter등은 해당 url로 브라우저가 이동합니다.
다만 웹서버가 아니라 화면에 나타나는건 아무것도 없겠죠?옙
그럼 브라우저에서 getParam으로 넘어온 값을 받아, 열린 웹뷰는 닫고
API 호출은 어떤 방법을 쓰시든 하시면 될 것 같아요
위 개념이 일반적으로 native component를 활용하여 결제창을 연동하는 방식입니다.
아예 모바일 웹이 있고, RN은 감싸기만 할거면 위에 방식으로 진행해주시면되요
정리해서 쉽게 말씀드리면.
tosspayments://payment/sucesss은 RN 내부에 페이지 경로도 아니고, 그냥 getParam을 받기 위한 가상의 URL입니다.
감사합니다. 제가 이해가 모자란 부분이 여기에 있었네요.
말씀해주신 가상의 URL을 넣어서 Toss Widget을 띄우면 다음과 같이 결제 widget이 정상적으로 나옵니다.
이제 success / fail 이 발생했을 때 parameter가 넘어가게 될텐데, 이게 가장의 URL로 타겟을 잡아놓다보니 제가 어디에서 parameter를 가져와야 할 지를 이해하지 못했던 것이었어요. 이 부분은 제가 webview 공부가 부족해서 그런 것 같습니다.
참고로 현재 보여지는 화면은 저희 제품상 결제위젯이 아닌, 결제창입니다~
실제로 카드 인증 완료후 tosspayments://payment/sucesss로 이동하는지 먼저 확인 해보시면 좋을 것 같네요~
감사합니다. 말씀해주신대로 확인해보겠습니다.
잘 넘어오고 있습니다. 도움 주셔서 감사합니다.