결제 연동 문의 드립니다. (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);
};
}
scalesPageToFit={false}
/>
</SafeAreaView>
);
};
이런식으로 구현했는데 첨부한 사진과 같이 토스앱이 설치 되어있음에도 토스페이먼츠로 이동하고 있지않습니다.
혹시 잘못 설정했는지 문의 드립니다.웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.
7 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
GitHub
GitHub - youjun-lee/rn_webview_sample_app
Contribute to youjun-lee/rn_webview_sample_app development by creating an account on GitHub.
여기 참고해서 진행해보세요
넵 알겠습니다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
보내주신 링크 타고 토스페이먼츠 설명대로 androidmanifest.xml 파일 확인해봤는데 설정 따로 안해줘도 될까요?
네 저 샘플 한번 그대로 실행해보세요!
네 알겠습니다!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.