H

Toss payments 개발자 커뮤니티•11mo ago•

8 replies

Handyman

결제 연동 문의 드립니다. (RN)

https://docs.tosspayments.com/guides/v2/webview#react-native
지금 이부분에서 android, ios 앱스킴 관련 셋팅은 끝마친 상태입니다.

이후 App.tsx 파일에


import React, {useEffect, useRef, useState} from 'react';
import {SafeAreaView, Platform, BackHandler, Alert} from 'react-native';
import {WebView} from 'react-native-webview';
import {ConvertUrl} from '@tosspayments/widget-sdk-react-native/src/utils/convertUrl';

const urlConverter = (url: string) => {
const convertUrl = new ConvertUrl(url);
if (convertUrl.isAppLink()) {
convertUrl.launchApp().then(isLaunch => {
if (isLaunch === false) {
console.log('앱이 실행되어 있는지 확인해주세요.');
} else {
console.log('앱이 실행되었습니다.');
}
});
return false;
} else {
return true;
}
};

... 기타 코드...

const handleShouldStartLoadWithRequest = (event: any) => {
return urlConverter(event.url);
};

...기타 코드...

return (
<SafeAreaView style={{flex: 1, paddingTop: Platform.OS === 'ios' ? 20 : 0}}>
<WebView
ref={webViewRef}
source={{
uri: '웹뷰url',
}}
style={{flex: 1}}
onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
onNavigationStateChange={onNavigationStateChange}
onMessage={onMessage}
injectedJavaScript={ window.alert = function(message) { window.ReactNativeWebView.postMessage(message); }; window.alert = function(message) { window.ReactNativeWebView.postMessage(message); }; }
scalesPageToFit={false}
/>
</SafeAreaView>
);
};

이런식으로 구현했는데 첨부한 사진과 같이 토스앱이 설치 되어있음에도 토스페이먼츠로 이동하고 있지않습니다.

혹시 잘못 설정했는지 문의 드립니다.

웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터

모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.