ชำระเงินจากการแจ้งเตือน

ธุรกิจบางแห่งจำเป็นต้องชำระเงินได้อย่างรวดเร็วเพื่อ รับหรือรับสิทธิ์เข้าถึงบริการอีกครั้ง (เช่น แพ็กเกจอินเทอร์เน็ตบนมือถือ ค่าใช้จ่ายในครัวเรือน การอัปเกรดบริการ หรือการชำระเงินที่ถูกปฏิเสธก่อนหน้านี้) หลายครั้งที่ธุรกิจจะแจ้งให้ผู้ใช้ทราบเกี่ยวกับกิจกรรมเหล่านี้ในอุปกรณ์เคลื่อนที่ อย่างไรก็ตาม หากต้องการชำระเงินจริง ผู้ใช้ต้องเปลี่ยนบริบทและไปยังส่วนต่างๆ ผ่านแบบฟอร์มที่ใช้เวลานาน ซึ่งจะลดโอกาสในการชำระเงินให้เสร็จสมบูรณ์ลงอย่างมาก

รูปแบบนี้ช่วยให้คุณเพิ่มการดำเนินการชำระเงินในการแจ้งเตือนได้โดยตรง ซึ่งช่วยให้ผู้ใช้ดำเนินการได้ทันทีและชำระเงินได้ด้วยการแตะเพียง 2 ครั้ง ในคู่มือนี้ คุณจะได้เรียนรู้วิธีสร้างประสบการณ์การใช้งานที่คล้ายกันในแอปพลิเคชัน Android

ข้อกำหนด

คู่มือนี้ถือว่ามีการผสานรวม Google Pay ที่ใช้งานได้ในแอปพลิเคชัน Android หากยังไม่ได้เพิ่มการผสานรวม คุณสามารถเริ่มต้นใช้งานได้ด้วยบทแนะนำ หรือ Codelab แบบมีคำแนะนำทีละขั้นตอน

องค์ประกอบที่ใช้สร้างสรรค์

การเพิ่มปุ่ม Google Pay ลงในการแจ้งเตือนจะอิงตามองค์ประกอบพื้นฐาน 2 อย่างใน Android ดังนี้

เลย์เอาต์การแจ้งเตือนที่กำหนดเอง

การแจ้งเตือนปกติใน Android มี โครงสร้างที่กำหนดไว้อย่างดีซึ่งปรับให้เข้ากับบริบทภาพต่างๆ การใช้เทมเพลตมาตรฐานจะช่วยให้คุณ มั่นใจได้ว่าการแจ้งเตือนจะแสดงอย่างถูกต้องไม่ว่าอุปกรณ์จะมีรูปแบบการวางแนว รูปแบบ และเวอร์ชันของระบบปฏิบัติการใดก็ตาม ดังนั้นจึงเป็นวิธีที่แนะนำในการแจ้งให้ผู้ใช้ทราบเกี่ยวกับเหตุการณ์ ที่ต้องได้รับความสนใจจากผู้ใช้

ในกรณีที่เลย์เอาต์มาตรฐานไม่ตรงกับความต้องการ คุณสามารถระบุเลย์เอาต์ของคุณเองได้ โดยใช้ เลย์เอาต์การแจ้งเตือนที่กำหนดเอง ในคู่มือนี้ คุณจะได้ใช้เลย์เอาต์ที่กำหนดเองเพื่อเพิ่มปุ่ม Google Pay ลงในการแจ้งเตือน และอนุญาตให้ผู้ใช้เริ่มการชำระเงินได้โดยตรงจากการแจ้งเตือน

กิจกรรม

กิจกรรม ช่วยแสดงฟังก์ชันการทํางานต่อผู้ใช้ในแอปพลิเคชันของคุณ โดยปกติแล้ว กิจกรรมจะมี อินเทอร์เฟซผู้ใช้ที่เชื่อมโยงกัน และประกอบเป็นลําดับชั้นของหน้าจอที่เรียกดูได้ในแอปพลิเคชัน

เมื่อผู้ใช้กดปุ่ม Google Pay ทาง Google จะแสดงรายการวิธีการชำระเงินที่ใช้ได้ เพื่อให้ผู้ใช้ทำธุรกรรมให้เสร็จสมบูรณ์ ต้องเปิดชีตการชำระเงินนี้จากกิจกรรมการโฮสต์ คุณสามารถใช้กิจกรรมโปร่งใสเพื่อสร้างความประทับใจว่าชีตการชำระเงิน แสดงอยู่เหนือการแจ้งเตือนโดยตรง

กำหนดเลย์เอาต์สำหรับการแจ้งเตือน

กระบวนการสร้างเลย์เอาต์สำหรับการแจ้งเตือนจะคล้ายกับวิธีที่คุณกำหนด อินเทอร์เฟซผู้ใช้สำหรับกิจกรรมปกติมาก การแจ้งเตือน เช่น วิดเจ็ต ใช้คลาส RemoteViews เพื่อจัดการองค์ประกอบในเลย์เอาต์ ซึ่งจะลดรายการมุมมองที่รองรับเมื่อเทียบกับเลย์เอาต์ปกติ

หากต้องการเริ่มต้นใช้งาน ให้สร้างไฟล์ทรัพยากรเลย์เอาต์ในโฟลเดอร์ res/layout/ เพื่ออธิบาย ลักษณะการแจ้งเตือนที่คุณต้องการ ดู notification_account_top_up.xml ในแอปพลิเคชันตัวอย่างเพื่อเป็นข้อมูลอ้างอิง

รูปที่ 1 ตัวอย่างเลย์เอาต์การแจ้งเตือนที่กำหนดเอง

เคล็ดลับ: โปรดทราบว่าการแจ้งเตือนที่กำหนดเองจะแสดงพร้อมกับการแจ้งเตือนอื่นๆ ด้วยเหตุนี้ และเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด คุณจึงควรทำให้การแจ้งเตือนของคุณยังคงมีความสอดคล้องกับส่วนอื่นๆ คู่มือการออกแบบ Material สำหรับการแจ้งเตือนเป็นแหล่งข้อมูลที่ยอดเยี่ยมในการดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทของการแจ้งเตือนและ รูปแบบที่เกี่ยวข้อง

เพิ่มปุ่ม Google Pay

เมื่อเลย์เอาต์พร้อมแล้ว ขั้นตอนสุดท้ายคือการเพิ่มปุ่ม Google Pay ลงในเลย์เอาต์ โดยทำได้ง่ายๆ เพียงใส่ทรัพยากรปุ่มที่เหมาะสมลงในไฟล์ XML ของเลย์เอาต์จากคอลเล็กชัน ชิ้นงาน Google Pay ที่สร้างไว้ล่วงหน้า ชิ้นงานเหล่านี้มีแหล่งข้อมูลกราฟิกสำหรับปุ่มที่ปรับให้เข้ากับ ขนาดและความละเอียดของหน้าจอ รวมถึงภาษาต่างๆ และเป็นไปตามหลักเกณฑ์การสร้างแบรนด์ของ Google Pay คุณดาวน์โหลด ได้โดยตรงจากส่วนหลักเกณฑ์การใช้แบรนด์

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

ตอนนี้เมื่อดูมุมมองการออกแบบของเลย์เอาต์ คุณจะเห็นปุ่ม Google Pay ดังนี้

รูปที่ 2 ตัวอย่างการแจ้งเตือนที่กำหนดเองพร้อมปุ่ม Google Pay

ทริกเกอร์การแจ้งเตือน

คุณสามารถส่งการแจ้งเตือนเพื่อตอบสนองต่อเหตุการณ์ต่างๆ ได้ โดยขึ้นอยู่กับขั้นตอนการโต้ตอบในแอปพลิเคชันหรือบริการ รูปแบบที่พบบ่อยคือการส่งการแจ้งเตือนแบบพุช จากเซิร์ฟเวอร์แบ็กเอนด์โดยใช้บริการรับส่งข้อความ หากยังไม่ได้เพิ่มฟังก์ชันการพุชลงในแอปพลิเคชัน Android โปรดดู Firebase Cloud Messaging และบทแนะนำที่ยอดเยี่ยม นี้เกี่ยวกับวิธีเริ่มต้นใช้งาน

สร้างและตั้งค่ามุมมอง

กระบวนการนี้จะทำงานแตกต่างจากกิจกรรมปกติเล็กน้อย เพื่อเริ่มต้นเลย์เอาต์การแจ้งเตือนและมุมมองที่อยู่ในเลย์เอาต์ กําหนดค่าทั้งการสร้างมุมมองและการตอบสนอง ต่อการโต้ตอบของผู้ใช้แยกกัน คุณต้องวาดการแจ้งเตือนใหม่ทุกครั้งที่สถานะอัปเดต

ก่อนอื่น ให้สร้างRemoteViewsออบเจ็กต์เพื่อเก็บลำดับชั้นเลย์เอาต์

Kotlin

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

Java

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

ตอนนี้คุณสามารถใช้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))
Notifications.kt

Java

    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));
Notifications.java

ในกรณีนี้ Intent ที่แสดงชีตการชำระเงินมีการดำเนินการซึ่ง ระบุวัตถุประสงค์ของ Intent และมีข้อมูลเพิ่มเติม เช่น ราคา ของสินค้าที่เลือก นอกจากนี้ 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()
Notifications.kt

Java

    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();
Notifications.java

พร็อพเพอร์ตี้บางรายการในการกำหนดค่านี้จะแสดงวิธีที่การแจ้งเตือนนี้ทำงาน ส่วนพร็อพเพอร์ตี้อื่นๆ อาจแตกต่างกันในแอปพลิเคชันของคุณตามค่ากำหนดและกรณีการใช้งาน ฟิลด์เหล่านี้บางส่วน ได้แก่

ช่อง	ค่า	คำอธิบาย
ช่องทางการแจ้งเตือน	NOTIFICATION_CHANNEL_ID	ตั้งแต่ Android 8.0 (API ระดับ 26) เป็นต้นไป คุณต้องกำหนดการแจ้งเตือนทั้งหมดให้กับช่องทาง แชแนลจะจัดกลุ่มการแจ้งเตือนในหัวข้อตามหมวดหมู่ที่ผู้ใช้จัดการได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องการแจ้งเตือนในเอกสาร Android
มุมมองเนื้อหาขนาดใหญ่ที่กำหนดเอง	notificationLayout	ส่วนนี้คือที่ที่เลย์เอาต์ที่คุณเตรียมไว้ก่อนหน้านี้เชื่อมต่อกับการแจ้งเตือน
ยกเลิกอัตโนมัติ	false	หากทำให้การแจ้งเตือนโต้ตอบได้ (เช่น การแจ้งเตือนที่ใช้ในตัวอย่างนี้) คุณจะตั้งค่าพารามิเตอร์ auto-cancel เป็น false เพื่อให้มั่นใจว่าระบบจะไม่ ปิดการแจ้งเตือนโดยอัตโนมัติเมื่อผู้ใช้แตะมุมมองใดก็ตามในการแจ้งเตือน
แจ้งเตือนเพียงครั้งเดียว	true	การแจ้งเตือนนี้จะตอบสนองต่อข้อมูลที่ผู้ใช้ป้อน ตั้งค่าพารามิเตอร์นี้เป็น true เพื่อหลีกเลี่ยง เสียง พรอมต์ และการสั่นเมื่อมีการอัปเดตการแจ้งเตือน

หากต้องการดูข้อมูลเกี่ยวกับการกำหนดค่าอื่นๆ และแนวคิดทั่วไปเกี่ยวกับการแจ้งเตือน โปรดดูส่วนการแจ้งเตือนที่กำหนดเอง และภาพรวม ในเอกสารประกอบของ Android

สุดท้ายนี้ หากต้องการทริกเกอร์และแสดงการแจ้งเตือน ให้ใช้วิธี notify เพื่อส่งออบเจ็กต์ notification ที่สร้างไว้ก่อนหน้านี้

Kotlin

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

Java

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

NOTIFICATION_ID เป็นจำนวนเต็มโดยพลการที่ระบุการแจ้งเตือนและจำเป็นต้องใช้เพื่ออัปเดตหรือนำออกในภายหลัง

เคล็ดลับ: อย่าลืมแสดงเฉพาะการแจ้งเตือนที่ให้ข้อมูลและดำเนินการได้ แก่ผู้ใช้ API ออนไลน์ของ Google Pay จะแสดงคำขอ isReadyToPay เพื่อช่วยให้คุณทราบว่าผู้ใช้ชำระเงินด้วย Google Pay ได้หรือไม่

ชำระเงิน

เมื่อผู้ใช้แตะปุ่ม 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()
  }
PaymentTransparentActivity.kt

Java

  @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();
  }
PaymentTransparentActivity.java

ดังที่คุณเห็น กิจกรรมนี้ยังไม่มีอะไรเกิดขึ้นมากนัก การออกอากาศที่มีค่าคงที่ ACTION_CLOSE_SYSTEM_DIALOGS จะปิดเมนูการแจ้งเตือน โปรดทราบว่ากิจกรรมนี้จะเข้าถึงได้ผ่านปุ่ม Google Pay ในการแจ้งเตือนเท่านั้น และหากไม่มีการออกอากาศ กล่องโต้ตอบการแจ้งเตือนจะยังคง เปิดอยู่

นอกเหนือจากนั้น การดำเนินการเดียวที่กิจกรรมนี้ต้องการคือการแสดงชีตการชำระเงิน ซึ่งเริ่มต้นผ่านเมธอด showPaymentsSheet จากนั้นเพียงเรียกใช้เมธอด loadPaymentData ใน Google Pay API ดูไฟล์ PaymentTransparentActivity.java ในแอปพลิเคชันตัวอย่างเพื่อสำรวจตรรกะทั้งหมดในกิจกรรม

เคล็ดลับ: ดูสาขา notifications ในที่เก็บที่มีแอปพลิเคชัน Android ตัวอย่าง เพื่อดูตัวอย่างการทำงานที่สมบูรณ์ซึ่งมีรูปแบบนี้