پرداخت از طریق اعلان

ادغام نسخه آزمایشی پرداخت سریع

برخی از کسب‌وکارها برای دسترسی یا دسترسی مجدد به یک سرویس (به عنوان مثال: طرح‌های داده تلفن همراه، قبوض خانگی، ارتقاء خدمات یا پرداخت‌های قبلاً رد شده) نیاز به توانایی پرداخت سریع دارند. بسیاری از اوقات، کسب‌وکارها کاربران را در مورد این رویدادها در دستگاه‌های تلفن همراهشان مطلع می‌کنند. با این حال، برای انجام یک پرداخت واقعی، کاربر باید زمینه را تغییر داده و از طریق فرم‌های وقت‌گیر پیمایش کند، که این امر شانس تکمیل پرداخت را به میزان قابل توجهی کاهش می‌دهد.

این الگو به شما کمک می‌کند تا یک اقدام پرداخت را مستقیماً به یک اعلان اضافه کنید و به کاربران اجازه دهید فوراً اقدام کنند و با تنها دو ضربه، پرداخت‌ها را انجام دهند. در این راهنما، یاد خواهید گرفت که چگونه یک تجربه مشابه را در برنامه اندروید خود ایجاد کنید.

الزامات

این راهنما فرض را بر این می‌گذارد که گوگل پی (Google Pay) در برنامه اندروید شما فعال است. اگر هنوز آن را اضافه نکرده‌اید، می‌توانید با آموزش یا راهنمای گام به گام codelab ما شروع کنید.

بلوک‌های سازنده

افزودن دکمه گوگل پی به اعلان‌های شما بر اساس دو اصل اساسی در اندروید است:

طرح‌بندی‌های سفارشی اعلان‌ها

اعلان‌های معمولی در اندروید، آناتومی مشخصی دارند که با زمینه‌های بصری مختلف سازگار می‌شود. استفاده از الگوی استاندارد به شما کمک می‌کند تا مطمئن شوید که اعلان‌های شما صرف نظر از جهت‌گیری، فرم فکتور و نسخه سیستم عامل دستگاه، به درستی نمایش داده می‌شوند و از این رو، این روش توصیه شده برای اطلاع‌رسانی به کاربران در مورد رویدادهایی است که نیاز به توجه آنها دارند.

در شرایطی که طرح‌بندی‌های استاندارد نیازهای شما را برآورده نمی‌کنند، می‌توانید طرح‌بندی خودتان را با استفاده از طرح‌بندی‌های اعلان سفارشی ارائه دهید. در این راهنما، از یک طرح‌بندی سفارشی برای اضافه کردن دکمه Google Pay به اعلان خود استفاده خواهید کرد و به کاربران خود اجازه می‌دهید تا مستقیماً از آنجا پرداخت را آغاز کنند.

فعالیت‌ها

فعالیت‌ها (Activities) به نمایش عملکردها در برنامه شما برای کاربران کمک می‌کنند. معمولاً فعالیت‌ها دارای یک رابط کاربری مرتبط هستند و سلسله مراتب قابل مرور صفحات را در برنامه شما تشکیل می‌دهند.

وقتی کاربر دکمه Google Pay را فشار می‌دهد، گوگل فهرستی از روش‌های پرداخت موجود را برای تکمیل تراکنش به کاربران برمی‌گرداند. این برگه پرداخت باید از یک فعالیت میزبانی اجرا شود. می‌توانید از یک فعالیت شفاف برای ایجاد این تصور استفاده کنید که برگه پرداخت مستقیماً در بالای اعلان نمایش داده می‌شود.

یک طرح‌بندی برای اعلان خود تعریف کنید

فرآیند ایجاد طرح‌بندی برای یک اعلان بسیار شبیه به نحوه تعریف رابط کاربری برای یک فعالیت معمولی است. اعلان‌ها، مانند ویجت‌ها، از کلاس RemoteViews برای مدیریت عناصر در طرح‌بندی شما استفاده می‌کنند. این امر لیست نماهای پشتیبانی شده موجود را در مقایسه با طرح‌بندی‌های معمولی کاهش می‌دهد.

برای شروع، یک فایل منبع طرح‌بندی (layout resource file) در پوشه res/layout/ ایجاد کنید تا نحوه نمایش اعلان خود را شرح دهید. برای مرجع، به فایل notification_account_top_up.xml در برنامه نمونه نگاهی بیندازید.

نمونه طرح اعلان سفارشی
شکل ۱. نمونه طرح اعلان سفارشی.

دکمه 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
شکل ۲. نمونه اعلان سفارشی با دکمه Google Pay.

فعال کردن اعلان

بسته به جریان تعامل در برنامه یا سرویس شما، می‌توانید اعلان را در پاسخ به رویدادهای مختلف ارسال کنید. یک الگوی رایج، ارسال اعلان از سرورهای backend شما با استفاده از یک سرویس پیام‌رسانی است. اگر هنوز قابلیت ارسال اعلان را به برنامه اندروید خود اضافه نکرده‌اید، به Firebase Cloud Messaging و این آموزش عالی در مورد نحوه شروع کار نگاهی بیندازید.

ایجاد و تنظیم نما

برای مقداردهی اولیه طرح‌بندی اعلان و نماهای موجود در آن، فرآیند کمی متفاوت از فعالیت‌های معمولی است. هم ساختار نماها و هم پاسخ به تعامل کاربر را جداگانه پیکربندی کنید. هر بار که وضعیت به‌روزرسانی می‌شود، باید اعلان را دوباره ترسیم کنید.

ابتدا، یک شیء RemoteViews برای نگهداری سلسله مراتب طرح‌بندی ایجاد کنید:

کاتلین

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

جاوا

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

اکنون می‌توانید از شیء notificationLayout برای ایجاد تغییرات در نماهای زیرین (دکمه‌ها، متون، تصاویر و غیره) استفاده کنید، مانند تغییر سبک آنها یا پیکربندی آنها برای پاسخگویی به تعامل کاربر. در این مثال، دکمه Google Pay رویدادهای ضربه زدن را برای راه‌اندازی جریان پرداخت ضبط می‌کند:

کاتلین

    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));

در این مثال، Intent که برگه پرداخت را نمایش می‌دهد، شامل عملی است که هدف Intent را مشخص می‌کند و شامل اطلاعات اضافی مانند قیمت کالای انتخاب شده است. همچنین، Intent یک رویداد را به دکمه Google Pay مرتبط می‌کند، به طوری که هر زمان که کاربر روی آن ضربه بزند، Intent اجرا می‌شود و فعالیت پرداخت را به پیش‌زمینه می‌آورد.

نمایش اعلان

پس از ایجاد و پیکربندی اعلان، آخرین مرحله نمایش آن به کاربر است. برای انجام این کار، یک شیء اعلان با پارامترهای تعریف شده در بالا و پیکربندی اضافی برای تعیین نحوه رفتار آن بسازید:

کاتلین

    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 از اندروید ۸.۰ (سطح API ۲۶)، باید همه اعلان‌ها را به یک کانال اختصاص دهید. کانال‌ها، اعلان‌ها را در موضوعات دسته‌بندی‌شده‌ای که کاربران می‌توانند مدیریت کنند، گروه‌بندی می‌کنند. می‌توانید در مورد کانال‌های اعلان در مستندات اندروید اطلاعات بیشتری کسب کنید.
نمای محتوای بزرگ سفارشی notificationLayout اینجاست که طرح‌بندی‌ای که قبلاً آماده کرده‌اید به اعلان متصل می‌شود.
لغو خودکار false اگر اعلان خود را تعاملی می‌کنید (مانند نمونه‌ای که در این مثال استفاده شده است)، می‌توانید پارامتر لغو خودکار را روی false تنظیم کنید تا مطمئن شوید که وقتی کاربر هر یک از نماهای داخل آن را لمس می‌کند، اعلان به طور خودکار رد نمی‌شود.
فقط یک بار هشدار دهید true این اعلان به ورودی کاربر واکنش نشان می‌دهد. برای جلوگیری از صداها، اعلان‌ها و لرزش هنگام به‌روزرسانی اعلان، این پارامتر را روی true تنظیم کنید.

برای آشنایی با سایر پیکربندی‌ها و مفاهیم کلی پیرامون اعلان‌ها، به بخش‌های اعلان‌های سفارشی و نمای کلی در مستندات اندروید نگاهی بیندازید.

در نهایت، برای فعال کردن و نمایش اعلان، از متد notify برای ارسال شیء notification ایجاد شده قبلی استفاده کنید:

کاتلین

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

جاوا

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

NOTIFICATION_ID یک عدد صحیح دلخواه است که اعلان را شناسایی می‌کند و برای به‌روزرسانی یا حذف آن در آینده ضروری است.

پرداخت را انجام دهید

وقتی کاربر دکمه Google Pay را لمس می‌کند، برگه پرداخت را نمایش دهید تا کاربران بتوانند روش پرداختی را برای تکمیل تراکنش انتخاب کنند. می‌توانید از APIهای Google Pay برای نمایش برگه پرداخت در بالای یک فعالیت استفاده کنید. از آنجا که اعلان، فرآیند پرداخت جدیدی را آغاز می‌کند، این فعالیت را شفاف کنید تا به کاربران این تصور را بدهد که عملیات بدون باز کردن برنامه شما تکمیل شده است. به متد onCreate برای این فعالیت نگاهی بیندازید:

کاتلین

  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 آغاز می‌شود. از آنجا، کافیست متد loadPaymentData را در API گوگل پی فراخوانی کنید. برای بررسی تمام منطق موجود در فعالیت، به فایل PaymentTransparentActivity.java در برنامه نمونه نگاهی بیندازید.