안드로이드 PG 토스페이 API 연동

Gradle 설정

/* build.gradle.kts(Module:app)
 * CURRENT_VERSION 은
 * https://github.com/tosspayments/payment-sdk-android/blob/master/CHANGELOG.md
 * 여기에서 확인가능
 */ 
dependencies {
  ...
  implementation 'com.github.tosspayments:payment-sdk-android:<CURRENT_VERSION>'
}

// settings.gradle.kts
dependencyResolutionManagement {
  ...
  repositories {
    ...
    mavenCentral()
    // maven { url "https://jitpack.io" }
    maven("https://jitpack.io")
  }
}

 

Layout 설정

개발자센터 가이드에 XML 로 되어있어서, XML 로 진행했습니다.

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TossPayActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_editor_absoluteX="0dp"
        app:layout_editor_absoluteY="0dp">

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

        <com.tosspayments.paymentsdk.view.Agreement
            android:id="@+id/agreement_widget"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/pay_button"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:text="결제하기"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.738" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

해당 레이아웃을 작성하면

payment_widget, agreement_widget 은 안나오고 Button 만 나오고 Activity.kt 에서 설정을 해주도록 합니다.

 

Activity.kt 설정

class TossPayActivity : AppCompatActivity() {
    private lateinit var binding: ActivityTossPayBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityTossPayBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ...
    }
}

class TossPayActivity : AppCompatActivity() {
    private lateinit var binding: ActivityTossPayBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        
        // 테스트를 위해 발급받은 임의 키 값들
        val clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm"
        
        /* customerKey = secretKey
		 * 구매자 ID입니다. 다른 사용자가 이 값을 알게 되면 악의적으로 사용될 수 있습니다.
         * 자동 증가하는 숫자 또는 이메일・전화번호・사용자 아이디와 같이 유추가 가능한 값은 안전하지 않습니다.
         * UUID와 같이 충분히 무작위적인 고유 값으로 생성해주세요.
         * 영문 대소문자, 숫자, 특수문자 -, _, =, ., @ 를 최소 1개 이상 포함한
         * 최소 2자 이상 최대 50자 이하의 문자열이어야 합니다.
		 * 비회원 결제에는 PaymentWidget.ANONYMOUS를 사용하세요.
         */
        val secretKey = "test_ssk_docs_OaPz8L5KdmQXkzRz3y47BMw6"
        
        val paymentWidget = PaymentWidget(
            activity = this@TossPayActivity,
            clientKey = clientKey,
            customerKey = secretKey,
        )
        
        val paymentMethodWidgetStatusListener = object : PaymentWidgetStatusListener {
            override fun onFail(fail: TossPaymentResult.Fail) {
                TODO("Not yet implemented")
            }

    	    override fun onLoad() {
    	        val message = "결제위젯 렌더링 완료"
    	        Log.d("PaymentWidgetStatusListener", message)
    	    }
        }
        
        paymentWidget.run {
            renderPaymentMethods(
            	method = binding.paymentWidget,
                amount = PaymentMethod.Rendering.Amount(10000), // Number 타입
                paymentWidgetStatusListener = paymentMethodWidgetStatusListener
                // Listener 는 nullable 이지만 추가해 봤습니다.
            )
            renderAgreement(binding.agreementWidget)
        }
    }
}

 

Activity 에 진입을 하면 이제는 paymentWidget.run { ... } 으로 인해서 UI 가 그려집니다.

아직 결제하기 버튼은 동작을 안하기 때문에 이벤트리스너를 달아주도록 하겠습니다.

 

...
paymentWidget.run {
	...
}

binding.payButton.setOnClickListener {
    paymentWidget.requestPayment(
        paymentInfo = PaymentMethod.PaymentInfo(
            orderId = "eEBFBe12759b127VEne", // 주문 번호 6~64자 무작위 생성 문자열
            orderName = "생수 1병 외 1건"       // 구매상품
        ),
        paymentCallback = object : PaymentCallback {
            override fun onPaymentSuccess(success: TossPaymentResult.Success) {
                Log.i("TossPay success", success.paymentKey)
                Log.i("TossPay success", success.orderId)
                Log.i("TossPay success", success.amount.toString())
                
                /* 결제 완료 동작 추가
                 * 현재 결제방법 선택 Activity 로 돌아오기때문에
                 * Activity 종료 후 이동 등 추가 동작 작성 필요
                 */
            }

            override fun onPaymentFailed(fail: TossPaymentResult.Fail) {
                Log.e("TossPay fail",fail.errorMessage)
            }
        }
    )
}

 

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

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

 

기본 UI 는 왼쪽(국내 일반결제) 방식으로 나오고 변경 및 결제방법 추가 등을 할 수 있다.

https://docs.tosspayments.com/guides/payment-widget/admin#%EC%83%88%EB%A1%9C%EC%9A%B4-%EA%B2%B0%EC%A0%9C-ui-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

결제위젯 어드민 사용하기 | 토스페이먼츠 개발자센터