תשלום מתוך התראה

הדגמה של שילוב תשלומים מהיר

חלק מהעסקים דורשים אפשרות לבצע תשלומים במהירות כדי לקבל או לקבל מחדש גישה לשירות (לדוגמה: חבילות גלישה לנייד, חשבונות ביתיים, שדרוגים של שירותים או תשלומים שנדחו בעבר). במקרים רבים, עסקים שולחים למשתמשים התראות על האירועים האלה במכשירים הניידים שלהם. עם זאת, כדי לבצע תשלום בפועל, המשתמש צריך לשנות את ההקשר ולעבור בין טפסים שגוזלים זמן רב, מה שמקטין באופן משמעותי את הסיכוי להשלים את התשלום.

הדפוס הזה מאפשר לכם להוסיף פעולת תשלום ישירות להתראה, כך שהמשתמשים יכולים לבצע פעולה באופן מיידי ולבצע תשלומים בשתי הקשות בלבד. במדריך הזה נסביר איך ליצור חוויה דומה באפליקציית Android.

דרישות

המדריך הזה מניח שיש לכם שילוב פעיל של Google Pay באפליקציית Android. אם עדיין לא הוספתם את השילוב, תוכלו להיעזר במדריך או בסדנת התכנות המפורטת.

אבני הבניין

הוספת לחצן Google Pay להתראות מבוססת על שני אבני בניין בסיסיות ב-Android:

פריסות של התראות בהתאמה אישית

ל התראות רגילות ב-Android יש מבנה מוגדר היטב שמותאם להקשרים חזותיים שונים. שימוש בתבנית הסטנדרטית עוזר להבטיח שההתראות יוצגו בצורה נכונה, בלי קשר לכיוון, לגורם הצורה ולגרסת מערכת ההפעלה של המכשיר. לכן, זו הדרך המומלצת ליידע את המשתמשים לגבי אירועים שדורשים את תשומת הלב שלהם.

במקרים שבהם פריסות רגילות לא עונות על הצרכים שלכם, אתם יכולים לספק פריסה משלכם באמצעות פריסות מותאמות אישית של הודעות. במדריך הזה תשתמשו בפריסה בהתאמה אישית כדי להוסיף לחשבון לחצן Google Pay, וכך לאפשר למשתמשים להתחיל תשלום ישירות מההתראה.

פעילויות

פעילויות עוזרות לחשוף פונקציונליות למשתמשים באפליקציה. בדרך כלל, לפעילויות יש ממשק משתמש משויך, והן מרכיבות את ההיררכיה של המסכים באפליקציה שאפשר לעיין בה.

כשהמשתמש לוחץ על הלחצן של Google Pay, Google מחזירה רשימה של אמצעי תשלום זמינים כדי שהמשתמשים יוכלו להשלים את העסקה. צריך להפעיל את גיליון התשלומים הזה מפעילות אירוח. אפשר להשתמש בפעילות שקופה כדי ליצור את הרושם שגיליון התשלומים מוצג ישירות מעל ההתראה.

הגדרת פריסה להתראה

תהליך יצירת הפריסה של ההתראה דומה מאוד לתהליך שבו מגדירים את ממשק המשתמש לפעילות רגילה. התראות, כמו ווידג'טים, משתמשות במחלקה RemoteViews כדי לנהל רכיבים בפריסה. כך רשימת התצוגות הנתמכות הזמינות קטנה יותר בהשוואה לפריסות רגילות.

כדי להתחיל, יוצרים קובץ משאבי פריסה בתיקייה res/layout/ כדי לתאר איך רוצים שההתראה תיראה. אפשר לעיין ב- notification_account_top_up.xml באפליקציה לדוגמה.

פריסה לדוגמה של התראה בהתאמה אישית
איור 1. פריסה לדוגמה של התראה בהתאמה אישית.

הוספת לחצן 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:

התראה מותאמת אישית לדוגמה עם כפתור Google Pay
איור 2. התראה לדוגמה בהתאמה אישית עם כפתור Google Pay.

הפעלת ההתראה

בהתאם לזרימת האינטראקציה באפליקציה או בשירות, אפשר לשלוח את ההתראה בתגובה לאירועים שונים. דפוס נפוץ הוא הנפקת הודעת פוש משרתי הבק-אנד באמצעות שירות העברת הודעות. אם עדיין לא הוספתם פונקציונליות של הודעות פוש לאפליקציית Android שלכם, כדאי לעיין במאמר בנושא העברת הודעות בענן ב-Firebase ובמדריך המצוין הזה שמסביר איך להתחיל.

יצירה והגדרה של התצוגה המפורטת

כדי לאתחל פריסת התראות והתצוגות שהיא מכילה, התהליך שונה מעט מפעילויות רגילות. אתם יכולים להגדיר בנפרד את בניית התצוגות ואת התגובה לאינטראקציה של המשתמשים. בכל פעם שהסטטוס מתעדכן, צריך לצייר מחדש את ההתראה.

קודם יוצרים אובייקט 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 method כדי להעביר את אובייקט notification שנוצר קודם:

Kotlin

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

Notifications.kt

Java

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

‫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()
  }
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 באפליקציית הדוגמה כדי לראות את כל הלוגיקה בפעילות.