iamport/iamport-react-native

webview 카카오 페이 미작동

kipackjeong opened this issue · 3 comments

kipackjeong commented

안녕하세요.
작업중인 앱에 카카오 페이를 구현해야해서 iamport-react-native 라이브러리를 연결했습니다. 이 앱은 react으로 쓰여졌고 react-native-webview 를 사용하여 모바일 앱 형태로 배포할 계획입니다.

제공해주신 example들 중에 webview example이 저의 경우 같았기에 그대로 구현해보았으나.
image
이 화면에서 '다음' 을 클릭후 아무것도 일어나지 않고있습니다.
image

아래 info.plist 를 보시면 UrlScheme 이 두개입니다. 하나는 제 앱 스킴 이고 하나는 카카오페이 스킴입니다.
원래는 제 앱 스킴밖에 없었는데 그러면 카카오페이창에서 '다음' 을 클릭할시 Safari 에서 invalid url 이라고 오류가 떠서,
kakaotalk 이라는 url scheme 을 추가해주니 invalid url 오류는 뜨지않게 되었습니다. 다만 아무일도 일어나지 않는 상태입니다.

어떤곳이 문제일까요??

iamport-react-native 의 IMP.Payment 호출 코드

  return (
    <IMP.Payment
      userCode={userCode as string}
      loading={<Loading />}
      data={{
        pg: 'kakaopay',
        ...data,
        app_scheme: 'mslawMobile',
        // m_redirect_url: 'mslawMobile:' + data.redirect_url,
      }}
      callback={callback}
    />
  );

package.json

{
  "name": "mslawMobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build:android": "npx react-native build-android --mode=release",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "iamport-react-native": "^2.0.7",
    "query-string": "^8.1.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-navigation": "^7.37.1",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-webview": "11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>CFBundleDevelopmentRegion</key>
		<string>en</string>
		<key>CFBundleDisplayName</key>
		<string>Allaw</string>
		<key>CFBundleExecutable</key>
		<string>$(EXECUTABLE_NAME)</string>
		<key>CFBundleGetInfoString</key>
		<string></string>
		<key>CFBundleIdentifier</key>
		<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
		<key>CFBundleInfoDictionaryVersion</key>
		<string>6.0</string>
		<key>CFBundleName</key>
		<string>$(PRODUCT_NAME)</string>
		<key>CFBundlePackageType</key>
		<string>APPL</string>
		<key>CFBundleShortVersionString</key>
		<string>$(MARKETING_VERSION)</string>
		<key>CFBundleSignature</key>
		<string>????</string>
		<key>CFBundleURLTypes</key>
		<array>
			<dict>
				<key>CFBundleTypeRole</key>
				<string>Editor</string>
				<key>CFBundleURLSchemes</key>
				<array>
					<string>kakaotalk</string>
				</array>
			</dict>
			<dict>
				<key>CFBundleTypeRole</key>
				<string>Editor</string>
				<key>CFBundleURLSchemes</key>
				<array>
					<string>mslawMobile</string>
				</array>
			</dict>
		</array>
		<key>CFBundleVersion</key>
		<string>$(CURRENT_PROJECT_VERSION)</string>
		<key>LSApplicationCategoryType</key>
		<string></string>
		<key>LSApplicationQueriesSchemes</key>
		<array>
			<string>kakaotalk</string>
		</array>
		<key>LSRequiresIPhoneOS</key>
		<true />
		<key>NSAppTransportSecurity</key>
		<dict>
			<key>NSAllowsArbitraryLoadsInWebContent</key>
			<true />
			<key>NSAllowsArbitraryLoads</key>
			<true />
		</dict>
		<key>NSLocationWhenInUseUsageDescription</key>
		<string></string>
		<key>UILaunchStoryboardName</key>
		<string>LaunchScreen.storyboard</string>
		<key>UIRequiredDeviceCapabilities</key>
		<array>
			<string>armv7</string>
		</array>
		<key>UISupportedInterfaceOrientations</key>
		<array>
			<string>UIInterfaceOrientationPortrait</string>
			<string>UIInterfaceOrientationLandscapeLeft</string>
			<string>UIInterfaceOrientationLandscapeRight</string>
		</array>
		<key>UIViewControllerBasedStatusBarAppearance</key>
		<true />
	</dict>
</plist>
anymate98 commented

안녕하세요. CFBundleURLTypes 아래 scheme이 두개 설정되어 있는데 실행된 앱이 위쪽 scheme으로 빌드가 되어 카카오톡을 여는 대신 자기 스스로를 열고 있어서 카카오톡으로 넘어가지 않는 것 같습니다. 실행하고자 하는 앱의 app_scheme은 LSApplicationQueriesSchemes 안에 적어주시면 되고 CFBundleURLTypes에서 kakaotalk 삭제해주시면 정상적으로 카카오톡 실행될 것입니다.

kipackjeong commented

답변 감사합니다.
원래 말씀해주신대로 구현이 되어있었는데.
노란색 다음 버튼 클릭후 이런 에러가 떳었습니다.
image
image

이 부분은 어떻게 해결이 가능할까요??
시뮬레이터에서만 이렇게 나오는걸까요?

anymate98 commented

네 시뮬레이터에는 카카오톡이 깔려있지 않고 앱스토어로 카카오톡을 설치할수도 없어 발생하는 문제로 보입니다.