알림에서 결제

빠른 결제 데모 통합

일부 비즈니스는 서비스(예: 모바일 데이터 요금제, 가정 요금 청구, 서비스 업그레이드 또는 이전에 거부된 결제)에 대한 액세스 권한을 얻거나 다시 얻기 위해 신속하게 결제할 수 있는 기능이 필요합니다. 비즈니스는 대부분 이런 이벤트에 관해 모바일 기기로 사용자에게 알립니다. 하지만 실제 결제를 수행하려면 사용자가 컨텍스트를 전환하고 시간이 오래 걸리는 양식을 탐색해야 하기 때문에 결제를 완료할 가능성이 현저히 줄어듭니다.

이 패턴을 사용하면 사용자가 결제 작업을 바로 알림에 추가할 수 있으므로 사용자가 두 번 탭하기만 하면 바로 작업을 시작할 수 있습니다. 이 가이드에서는 Android 애플리케이션에서 비슷한 환경을 만드는 방법을 알아봅니다.

요구사항

이 가이드에서는 Android 애플리케이션에서 활성 Google Pay 통합을 사용한다고 가정합니다. 통합을 아직 추가하지 않았다면 튜토리얼 또는 단계별 안내 Codelab으로 시작할 수 있습니다.

구성 요소

알림에 Google Pay 버튼을 추가하는 것은 Android의 두 가지 기본 구성 요소를 기반으로 합니다.

맞춤 알림 레이아웃

Android의 일반 알림에는 여러 시각적 컨텍스트에 맞게 적용되는 체계가 정의되어 있습니다. 표준 템플릿을 사용하면 기기의 방향, 폼 팩터, OS 버전에 관계없이 알림을 올바르게 표시할 수 있으므로 사용자가 주의를 기울여야 할 이벤트에 대한 정보를 전달하는 데 권장되는 방법입니다.

표준 레이아웃이 필요에 맞지 않는 경우 맞춤 알림 레이아웃을 사용하여 자체 레이아웃을 제공할 수 있습니다. 이 가이드에서는 맞춤 레이아웃을 사용하여 알림에 Google Pay 버튼을 추가하고 사용자가 바로 결제를 시작할 수 있도록 합니다.

활동

활동은 애플리케이션의 사용자에게 기능을 표시하는 데 도움이 됩니다. 일반적으로 활동은 관련 사용자 인터페이스가 있으며 애플리케이션에서 탐색 가능한 계층 구조를 구성합니다.

사용자가 Google Pay 버튼을 누르면 Google이 사용자가 거래를 완료할 수 있는 결제 수단 목록을 반환합니다. 이 결제 명세서는 호스팅 활동에서 시작해야 합니다. 투명한 활동을 사용하여 결제 명세서가 알림 위에 직접 표시되는 노출을 만들 수 있습니다.

알림의 레이아웃 정의

알림의 레이아웃을 만드는 프로세스는 일반 활동의 사용자 인터페이스를 정의하는 방법과 매우 유사합니다. 위젯과 마찬가지로 알림은 RemoteViews 클래스를 사용하여 레이아웃의 요소를 관리합니다. 이렇게 하면 일반 레이아웃과 비교하여 지원되는 보기 목록을 줄일 수 있습니다.

먼저 알림을 표시할 방법을 설명하는 res/layout/ 폴더에 레이아웃 리소스 파일을 만듭니다. 샘플 애플리케이션의 notification_account_top_up.xml을 참조하세요.

맞춤 알림 레이아웃 샘플
그림 1. 맞춤 알림 레이아웃 샘플

Google Pay 버튼 추가

레이아웃이 준비되었으면 마지막 단계는 여기에 Google Pay 버튼을 추가하는 것입니다. 그러려면 미리 빌드된 Google Pay 애셋 컬렉션에서 레이아웃 XML 파일에 적절한 버튼 리소스를 포함하기만 하면 됩니다. 이러한 애셋에는 버튼의 그래픽 리소스가 포함되어 있는데 이 리소스는 다양한 화면 크기와 해상도뿐만 아니라 여러 언어에 맞게 변경되고 Google Pay 브랜드 가이드라인을 준수합니다. 브랜드 가이드라인 섹션에서 바로 리소스를 다운로드할 수 있습니다.

<include
  android:id="@+id/googlePayButton"
  layout="@layout/buy_with_googlepay_button"
  android:layout_width="wrap_content"
  android:layout_height="48sp" />

이제 레이아웃의 디자인 보기에서 Google Pay 버튼이 보일 것입니다.

Google Pay 버튼이 있는 맞춤 알림 샘플
그림 2. Google Pay 버튼이 있는 맞춤 알림 샘플

알림 트리거

애플리케이션 또는 서비스의 상호작용 흐름에 따라 다양한 이벤트에 대한 응답으로 알림을 전달할 수 있습니다. 일반적인 패턴은 메시지 서비스를 사용하여 백엔드 서버에서 푸시 알림을 실행하는 것입니다. Android 애플리케이션에 푸시 기능을 아직 추가하지 않은 경우 Firebase 클라우드 메시징튜토리얼에서 시작 방법을 알아보세요.

뷰 만들기 및 설정

알림 레이아웃 및 포함된 뷰를 초기화하기 위해 프로세스는 일반 활동과 약간 다르게 작동합니다. 뷰의 구성과 사용자 상호작용에 대한 응답을 별도로 모두 구성합니다. 상태가 업데이트될 때마다 알림을 다시 그려야 합니다.

먼저 레이아웃 계층 구조를 저장할 RemoteViews 객체를 만듭니다.

Kotlin

    val notificationLayout = RemoteViews(packageName, R.layout.large_notification)

자바

    RemoteViews notificationLayout = new RemoteViews(packageName, R.layout.large_notification);

이제 notificationLayout 객체를 사용하여 기본 뷰(버튼, 텍스트, 이미지 등)를 변경하여 스타일을 수정하거나 사용자 상호작용에 응답하도록 구성할 수 있습니다. 이 예에서 Google Pay 버튼은 결제 흐름을 시작하기 위해 탭 이벤트를 캡처합니다.

Kotlin

    val selectOptionIntent = Intent(context, PaymentNotificationIntentService::class.java)
      selectOptionIntent.action = ACTION_SELECT_PREFIX + option
      notificationLayout.setOnClickPendingIntent(buttonId, PendingIntent.getService(
              context, 0, selectOptionIntent, PendingIntent.FLAG_UPDATE_CURRENT))

자바

    Intent payIntent = new Intent(context, PaymentTransparentActivity.class);
    payIntent.setAction(ACTION_PAY_GOOGLE_PAY);
    payIntent.putExtra(OPTION_PRICE_EXTRA, OPTION_PRICE_CENTS.get(selectedOption));
    notificationLayout.setOnClickPendingIntent(
        R.id.googlePayButton, pendingIntentForActivity(context, payIntent));

이 인스턴스에서 결제 명세서를 표시하는 IntentIntent의 목표를 나타내고 선택된 항목의 가격과 같은 추가 정보를 포함하는 작업을 포함합니다. 또한 Intent는 이벤트를 Google Pay 버튼에 연결하므로 사용자가 이벤트를 탭할 때마다 Intent가 실행되고 결제 활동이 포그라운드로 가져옵니다.

알림 표시

알림을 만들고 구성한 후 마지막 단계는 사용자에게 표시하는 것입니다. 이를 위해서는 위에서 정의한 매개변수와 추가 구성을 통해 알림 객체를 빌드하여 동작 방식을 결정합니다.

Kotlin

    val notification = NotificationCompat.Builder(context, NOTIFICATION_CHANNEL_ID)
            .setSmallIcon(R.mipmap.ic_launcher)
            .setContentTitle(context.getString(R.string.notification_title))
            .setContentText(context.getString(R.string.notification_text))
            .setCustomBigContentView(notificationLayout)
            .setPriority(NotificationCompat.PRIORITY_DEFAULT)
            .setAutoCancel(false)
            .setOnlyAlertOnce(true)
            .build()

자바

    Notification notification = new NotificationCompat.Builder(context, NOTIFICATION_CHANNEL_ID)
        .setSmallIcon(R.mipmap.ic_launcher)
        .setContentTitle(context.getString(R.string.notification_title))
        .setContentText(context.getString(R.string.notification_text))
        .setCustomBigContentView(notificationLayout)
        .setPriority(NotificationCompat.PRIORITY_DEFAULT)
        .setAutoCancel(false)
        .setOnlyAlertOnce(true)
        .build();

이 구성의 일부 속성은 이 알림의 작동 방식을 보여줍니다. 그 외 속성은 환경설정과 사용 사례에 따라 애플리케이션별로 다를 수 있습니다. 필드는 다음과 같습니다.

입력란 설명
알림 채널 NOTIFICATION_CHANNEL_ID Android 8.0(API 수준 26)부터는 모든 알림을 채널에 할당해야 합니다. 채널은 사용자가 관리할 수 있는 범주별 주제로 알림을 그룹화합니다. 자세한 내용은 Android 문서의 알림 채널을 참조하세요.
맞춤 빅 콘텐츠 보기 notificationLayout 여기에서 앞서 준비한 레이아웃이 알림에 연결됩니다.
자동 취소 false 알림을 대화형으로 만드는 경우(이 예에서 사용된 것과 같음) 자동 취소 매개변수를 false로 설정하면 사용자가 알림 안쪽의 뷰를 터치할 때 알림이 자동으로 닫히지 않습니다.
한 번만 알림 true 이 알림은 사용자 입력에 반응합니다. 알림이 업데이트될 때 소리, 메시지, 진동이 울리지 않도록 하려면 이 매개변수를 true로 설정하세요.

알림과 관련된 다른 구성 및 일반적인 개념에 대해 알아보려면 Android 문서의 맞춤 알림개요 섹션을 참조하세요.

마지막으로, 알림을 트리거하고 표시하려면 notify 메서드를 사용하여 앞에서 만든 notification 객체를 전달합니다.

Kotlin

    NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification)

자바

    NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification);

NOTIFICATION_ID는 알림을 식별하며 나중에 업데이트하거나 삭제하는 데 필요한 임의의 정수입니다.

결제하기

사용자가 Google Pay 버튼을 탭하면 결제 수단을 선택하여 거래를 완료할 수 있도록 결제 명세서를 표시합니다. Google Pay API를 사용하여 활동 위에 결제 명세서를 표시할 수 있습니다. 알림에서 새로운 결제 프로세스가 시작되므로 이 활동을 투명하게 처리하여 사용자에게 애플리케이션을 열지 않고도 작업이 완료된다는 인상을 주세요. 이 활동의 onCreate 메서드를 살펴보세요.

Kotlin

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Dismiss the notification UI if the activity was opened from a notification
    if (Notifications.ACTION_PAY_GOOGLE_PAY == intent.action) {
      sendBroadcast(Intent(Intent.ACTION_CLOSE_SYSTEM_DIALOGS))
    }

    // Initialise the payments client
    startPayment()
  }

자바

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Dismiss the notification UI if the activity was opened from a notification
    if (Notifications.ACTION_PAY_GOOGLE_PAY.equals(getIntent().getAction())) {
      sendBroadcast(new Intent(Intent.ACTION_CLOSE_SYSTEM_DIALOGS));
    }

    // Initialise the payments client
    startPayment();
  }

보시다시피, 아직은 이 활동에 별다른 이벤트가 없습니다. 인텐트 상수 ACTION_CLOSE_SYSTEM_DIALOGS를 포함하는 브로드캐스트는 알림 메뉴를 닫습니다. 이 활동은 알림의 Google Pay 버튼을 통해서만 액세스하며 브로드캐스트 없이는 알림 대화상자가 열린 상태로 유지됩니다.

그 외에 이 활동에서 필요한 작업은 showPaymentsSheet 메서드를 통해 시작되는 결제 명세서를 표시하는 것뿐입니다. 여기에서 Google Pay API의 loadPaymentData 메서드를 호출하기만 하면 됩니다. 활동의 모든 로직을 살펴보려면 샘플 애플리케이션의 PaymentTransparentActivity.java 파일을 확인하세요.