class TosspayActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tosspay)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true // 자바스크립트 허용
        webView.webViewClient = MyWebViewClient() // WebViewClient 설정
webView.loadUrl("file:///android_asset/payment.html")

    }

    @Suppress("DEPRECATION", "UNREACHABLE_CODE")
    class MyWebViewClient : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 페이지 로드 완료 후 PaymentWidget 사용
            val paymentWidgetScript = """
                const clientKey = 'test_ck_k6bJXmgo28em0BeWYEA8LAnGKWx4';
                const customerKey = 'YbX2HuSlsC9uVJW6NMRMj';
                const paymentWidget = PaymentWidget(clientKey, customerKey);
                paymentWidget.renderPaymentMethods('#payment-method', 15000);
                paymentWidget.requestPayment({
                    orderId: 'AD8aZDpbzXs4EQa-UkIX6',
                    orderName: '토스 티셔츠 외 2건',
                    successUrl: 'http://localhost:8080/success',
                    failUrl: 'http://localhost:8080/fail',
                    customerEmail: 'customer123@gmail.com',
                    customerName: '김토스'
                });
            """.trimIndent()
            view?.evaluateJavascript(paymentWidgetScript, null)
        }

    }

class TosspayActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tosspay)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true // 자바스크립트 허용
        webView.webViewClient = MyWebViewClient() // WebViewClient 설정
webView.loadUrl("file:///android_asset/payment.html")

    }

    @Suppress("DEPRECATION", "UNREACHABLE_CODE")
    class MyWebViewClient : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 페이지 로드 완료 후 PaymentWidget 사용
            val paymentWidgetScript = """
                const clientKey = 'test_ck_k6bJXmgo28em0BeWYEA8LAnGKWx4';
                const customerKey = 'YbX2HuSlsC9uVJW6NMRMj';
                const paymentWidget = PaymentWidget(clientKey, customerKey);
                paymentWidget.renderPaymentMethods('#payment-method', 15000);
                paymentWidget.requestPayment({
                    orderId: 'AD8aZDpbzXs4EQa-UkIX6',
                    orderName: '토스 티셔츠 외 2건',
                    successUrl: 'http://localhost:8080/success',
                    failUrl: 'http://localhost:8080/fail',
                    customerEmail: 'customer123@gmail.com',
                    customerName: '김토스'
                });
            """.trimIndent()
            view?.evaluateJavascript(paymentWidgetScript, null)
        }

    }

class TosspayActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tosspay)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true // 자바스크립트 허용
        webView.webViewClient = MyWebViewClient() // WebViewClient 설정

        // 위의 코드를 WebView에서 로드
        webView.loadUrl("file:///android_asset/payment.html")

    }

    @Suppress("DEPRECATION", "UNREACHABLE_CODE")
    class MyWebViewClient : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 페이지 로드 완료 후 PaymentWidget 사용
            val paymentWidgetScript = """
                const clientKey = 'test_ck_k6bJXmgo28em0BeWYEA8LAnGKWx4';
                const customerKey = 'YbX2HuSlsC9uVJW6NMRMj';
                const paymentWidget = PaymentWidget(clientKey, customerKey);
                paymentWidget.renderPaymentMethods('#payment-method', 15000);
                paymentWidget.requestPayment({
                    orderId: 'AD8aZDpbzXs4EQa-UkIX6',
                    orderName: '토스 티셔츠 외 2건',
                    successUrl: 'http://localhost:8080/success',
                    failUrl: 'http://localhost:8080/fail',
                    customerEmail: 'customer123@gmail.com',
                    customerName: '김토스'
                });
            """.trimIndent()
            view?.evaluateJavascript(paymentWidgetScript, null)
        }

    }

class TosspayActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tosspay)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true // 자바스크립트 허용
        webView.webViewClient = MyWebViewClient() // WebViewClient 설정

        // 위의 코드를 WebView에서 로드
        webView.loadUrl("file:///android_asset/payment.html")

    }

    @Suppress("DEPRECATION", "UNREACHABLE_CODE")
    class MyWebViewClient : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 페이지 로드 완료 후 PaymentWidget 사용
            val paymentWidgetScript = """
                const clientKey = 'test_ck_k6bJXmgo28em0BeWYEA8LAnGKWx4';
                const customerKey = 'YbX2HuSlsC9uVJW6NMRMj';
                const paymentWidget = PaymentWidget(clientKey, customerKey);
                paymentWidget.renderPaymentMethods('#payment-method', 15000);
                paymentWidget.requestPayment({
                    orderId: 'AD8aZDpbzXs4EQa-UkIX6',
                    orderName: '토스 티셔츠 외 2건',
                    successUrl: 'http://localhost:8080/success',
                    failUrl: 'http://localhost:8080/fail',
                    customerEmail: 'customer123@gmail.com',
                    customerName: '김토스'
                });
            """.trimIndent()
            view?.evaluateJavascript(paymentWidgetScript, null)
        }

    }

액티비티에 코드를 이렇게 작성해줬는데 아직 같은 이슈가 생겨서 다시 문의드립니다 ㅜㅜ

<activity
            android:name=".customer_ui.home.TosspayActivity"
            android:exported="false"
            tools:ignore="AppLinkUrlError">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                    android:scheme="supertoss" />
            </intent-filter>
        </activity>

<activity
            android:name=".customer_ui.home.TosspayActivity"
            android:exported="false"
            tools:ignore="AppLinkUrlError">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                    android:scheme="supertoss" />
            </intent-filter>
        </activity>

manifest에는 toss 앱 스킴 하나만 추가해두었습니다..!

Kimoon Lee•2y ago

그쪽 뿐 아니라

Kimoon Lee•2y ago

이부분을 추가해 주셔야 합니다.

Kimoon Lee•2y ago

https://docs.tosspayments.com/common/webview#android

웹뷰(WebView)에서 외부 앱 열기 | 토스페이먼츠 개발자센터

정채은OP•2y ago

해당 사이트에 나와있는 kotlin 코드를 액티비티파일에 넣어주었습니다.

class MyWebViewClient : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 페이지 로드 완료 후 PaymentWidget 사용
            val paymentWidgetScript = """
                const clientKey = 'test_ck_k6bJXmgo28em0BeWYEA8LAnGKWx4';
                const customerKey = 'YbX2HuSlsC9uVJW6NMRMj';
                const paymentWidget = PaymentWidget(clientKey, customerKey);
                paymentWidget.renderPaymentMethods('#payment-method', 15000);
                paymentWidget.requestPayment({
                    orderId: 'AD8aZDpbzXs4EQa-UkIX6',
                    orderName: '토스 티셔츠 외 2건',
                    successUrl: 'http://localhost:8080/success',
                    failUrl: 'http://localhost:8080/fail',
                    customerEmail: 'customer123@gmail.com',
                    customerName: '김토스'
                });
            """.trimIndent()
            view?.evaluateJavascript(paymentWidgetScript, null)
        }

    }

class MyWebViewClient : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            // 페이지 로드 완료 후 PaymentWidget 사용
            val paymentWidgetScript = """
                const clientKey = 'test_ck_k6bJXmgo28em0BeWYEA8LAnGKWx4';
                const customerKey = 'YbX2HuSlsC9uVJW6NMRMj';
                const paymentWidget = PaymentWidget(clientKey, customerKey);
                paymentWidget.renderPaymentMethods('#payment-method', 15000);
                paymentWidget.requestPayment({
                    orderId: 'AD8aZDpbzXs4EQa-UkIX6',
                    orderName: '토스 티셔츠 외 2건',
                    successUrl: 'http://localhost:8080/success',
                    failUrl: 'http://localhost:8080/fail',
                    customerEmail: 'customer123@gmail.com',
                    customerName: '김토스'
                });
            """.trimIndent()
            view?.evaluateJavascript(paymentWidgetScript, null)
        }

    }

아직 안드로이드를 잘 몰라서 여러 사이트 참고하며 여기 webViewClient 이 코드 밑에 위의 두 함수들을 넣어줬는데 혹시 여기가 문제일까요??

Kimoon Lee•2y ago

어떤 코틀린 코드를 넣으셨다는 걸까요?

정채은OP•2y ago

override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean
    url?.let {
        if (!URLUtil.isNetworkUrl(url) && !URLUtil.isJavaScriptUrl(url)) {
            val uri = try {
                Uri.parse(url)
            } catch (e: Exception) {
                return false
            }

            return when (uri.scheme) {
                "intent" -> {
                    startSchemeIntent(it)
                }
                else -> {
                    return try {
                        startActivity(Intent(Intent.ACTION_VIEW, uri))
                        true
                    } catch (e: java.lang.Exception) {
                        false
                    }
                }
            }
        } else {
            return false
        }
    } ?: return false

private fun startSchemeIntent(url: String): Boolean {
    val schemeIntent: Intent = try {
        Intent.parseUri(url, Intent.URI_INTENT_SCHEME)
    } catch (e: URISyntaxException) {
        return false
    }
    try {
        startActivity(schemeIntent)
        return true
    } catch (e: ActivityNotFoundException) {
        val packageName = schemeIntent.getPackage()

        if (!packageName.isNullOrBlank()) {
            startActivity(
                Intent(
                    Intent.ACTION_VIEW,
                    Uri.parse("market://details?id=$packageName")
                )
            )
            return true
        }
    }
    return false
}

override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean
    url?.let {
        if (!URLUtil.isNetworkUrl(url) && !URLUtil.isJavaScriptUrl(url)) {
            val uri = try {
                Uri.parse(url)
            } catch (e: Exception) {
                return false
            }

            return when (uri.scheme) {
                "intent" -> {
                    startSchemeIntent(it)
                }
                else -> {
                    return try {
                        startActivity(Intent(Intent.ACTION_VIEW, uri))
                        true
                    } catch (e: java.lang.Exception) {
                        false
                    }
                }
            }
        } else {
            return false
        }
    } ?: return false

private fun startSchemeIntent(url: String): Boolean {
    val schemeIntent: Intent = try {
        Intent.parseUri(url, Intent.URI_INTENT_SCHEME)
    } catch (e: URISyntaxException) {
        return false
    }
    try {
        startActivity(schemeIntent)
        return true
    } catch (e: ActivityNotFoundException) {
        val packageName = schemeIntent.getPackage()

        if (!packageName.isNullOrBlank()) {
            startActivity(
                Intent(
                    Intent.ACTION_VIEW,
                    Uri.parse("market://details?id=$packageName")
                )
            )
            return true
        }
    }
    return false
}

이 코드입니다!

Kimoon Lee•2y ago

올려주신 이 코드를 MyWebViewClient class 에서 구현해 주신게 맞을까요?

정채은OP•2y ago

오오 아니요..! 안에 넣으니 오류가 생겨서 밖으로 빼뒀는데 다시 넣어보겠습니다ㅜㅜㅜㅜ!!!!

Kimoon Lee•2y ago

그리고 웹사이트를 구축하지 않으시고 결제위젯을 쓰시는 거라면

Kimoon Lee•2y ago

https://docs.tosspayments.com/reference/widget-android

결제위젯 Android SDK | 토스페이먼츠 개발자센터

결제위젯 Android SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

Kimoon Lee•2y ago

여기를 참고하시는게 좋을겁니다.

정채은OP•2y ago

엇 혹시 모바일로 구현하는거면 https://docs.tosspayments.com/guides/payment-widget/integration 이 페이지를 참고하면 안되는건가요?

결제위젯 연동하기 | 토스페이먼츠 개발자센터

내 상점의 주문서 웹 페이지에 결제위젯을 연동하세요. JavaScript SDK 이용 가이드입니다.

정채은OP•2y ago

sdk 추가는 해줬는데 레이아웃 부분이 잘 안되어서 아래 제가 보낸 페이지에 있는 html파일을 만들어서 구현하고 있습니다 ㅜㅜ

Kimoon Lee•2y ago

모바일 앱으로 연동하시는 거면 제가 드린 링크를 사용해 주시고. 지금보내주신건 웹페이지(웹서버를 사용해서 ) 에서 연동하는 겁니다

정채은OP•2y ago

답변 감사합니다! 바쁘실텐데 하나만 더 여쭤보겠습니다 ㅜㅜ 그럼 sdk를 gradle에 추가하고 layout만 WebView 없이 결제 페이지 xml파일에 넣으면 될까요? 앱스킴은 따로 안해도 되는걸까요?

Kimoon Lee•2y ago

네 앱스킴을 저희 Native SDK 에서 처리하는 것으로 알고 있습니다.

정채은OP•2y ago

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    ...

    <com.tosspayments.paymentsdk.view.PaymentMethodWidget
        android:id="@+id/payment_widget"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp" />

        ...

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    ...

    <com.tosspayments.paymentsdk.view.PaymentMethodWidget
        android:id="@+id/payment_widget"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp" />

        ...

</androidx.constraintlayout.widget.ConstraintLayout>

xml 파일에 레이아웃 설정 그대로 넣어줬는데 실행했을때 아무런 변화가 없습니다 ㅜㅜ

Kimoon Lee•2y ago

... 이것도 넣으신건가요?

정채은OP•2y ago

아니요! 빼고 넣었는데도 하얀 화면만 나오고 다른 변화가 없습니다1

Kimoon Lee•2y ago

저희쪽에서 제공한 코드 말고 다른코드가 어떻게 된것인지에 따라 상황이 다를수 있어서 정확히 가이드를 드리기 어렵습니다.

Kimoon Lee•2y ago

https://github.com/tosspayments/payment-sdk-android

GitHub

GitHub - tosspayments/payment-sdk-android

Contribute to tosspayments/payment-sdk-android development by creating an account on GitHub.

Kimoon Lee•2y ago

여기에 있는 샘플을 참고하시면 도움이 되실거에요.

정채은OP•2y ago

늦게 확인했습니다 ㅜ 감사합니다 참고해서 다시 해보겠습니다

paytoken 문의

Did you find this page helpful?