결제 연동 문의 드립니다. (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={
scalesPageToFit={false}
/>
</SafeAreaView>
);
};
이런식으로 구현했는데 첨부한 사진과 같이 토스앱이 설치 되어있음에도 토스페이먼츠로 이동하고 있지않습니다.
혹시 잘못 설정했는지 문의 드립니다.
지금 이부분에서 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>
);
};
이런식으로 구현했는데 첨부한 사진과 같이 토스앱이 설치 되어있음에도 토스페이먼츠로 이동하고 있지않습니다.
혹시 잘못 설정했는지 문의 드립니다.
모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.
