الدفع من إشعار

دمج العرض التوضيحي للدفع السريع

تتطلّب بعض الأنشطة التجارية إمكانية إجراء الدفعات بسرعة من أجل الحصول على خدمة أو استعادة إمكانية الوصول إليها (على سبيل المثال: خطط بيانات الأجهزة الجوّالة، وفواتير المنازل، وترقيات الخدمة، أو الدفعات التي تم رفضها سابقًا). في كثير من الأحيان، تُرسل الأنشطة التجارية إشعارات إلى المستخدمين بشأن هذه الأحداث على أجهزتهم الجوّالة. ومع ذلك، لإجراء عملية دفع فعلية، على المستخدم التبديل بين السياقات والانتقال عبر نماذج تستغرق وقتًا طويلاً، ما يقلّل بشكل كبير من فرص إكمال عملية الدفع.

يساعدك هذا النمط في إضافة إجراء دفع مباشرةً إلى إشعار، ما يتيح للمستخدمين اتّخاذ إجراء على الفور وإجراء عمليات الدفع بنقرتَين فقط. في هذا الدليل، ستتعرّف على كيفية إنشاء تجربة مشابهة على تطبيق 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 بدءًا من الإصدار 8.0 من نظام التشغيل Android (المستوى 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 هو عدد صحيح عشوائي يحدّد الإشعار وهو ضروري لتعديله أو إزالته لاحقًا.

إجراء الدفعة

عندما ينقر المستخدم على زر Google Pay، اعرض ورقة الدفع ليتمكّن المستخدمون من اختيار طريقة دفع لإكمال المعاملة. يمكنك استخدام واجهات برمجة التطبيقات في Google Pay لعرض ورقة الدفع أعلى نشاط. بما أنّ الإشعار يبدأ عملية دفع جديدة، يجب أن يكون هذا النشاط واضحًا للمستخدمين حتى يشعروا بأنّ العملية تكتمل بدون فتح تطبيقك. ألقِ نظرة على طريقة 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 في التطبيق النموذجي لاستكشاف جميع التعليمات البرمجية في النشاط.