Badge integration

Badges are small elements on a product card that contain information about cashback as Plus points or Yandex Split payments.

Step 1. Connect the library to your project

Open your project's gradle file, find the "dependencies" section, and add the com.yandex.pay:widget-badge library dependency to it. We recommend using the most recent library version.

dependencies{
    ...
    implementation "com.yandex.pay:widget-badge:2.3.10"
    ...
}

Step 2. Add a YPayBadgeView

Add the specified code to where you need in your markup.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <!-- Your markup -->

    <com.yandex.pay.widgets.badge.api.view.YPayBadgeView
        android:id="@+id/badgeView"
        android:layout_width="wrap_content"
        android:layout_height="24dp" />

</LinearLayout>

How badge sizes are calculated

Badge sizes are determined according to the following rules:

• If the height is set, the width is calculated automatically based on the aspect ratio. In this case, the width set in the markup is ignored.
• If the height is not set, but the width is specified in the markup, the height is calculated automatically based on the aspect ratio.
• In other cases, the badge height is equal to 24 dp by default. If the height or width limit doesn't allow taking up the required size, the badge is automatically reduced to the maximum allowed size.

Step 3. Initialize the inventory

Set the basic parameters required to run the inventory and badges, such as:

// general inventory parameters:
YPayInventory.init {
    // your app's context:
    appContext = yourApplicationContext
    // your Merchant ID :
    merchantId = YPayMerchantId("")
    // PROD / SANDBOX network environment:
    environment = YPayNetworkEnvironment.PROD
}
// initializes badge components:
.badges {
    // mode that hides badges if there is no data
    hidingPolicy = HidingPolicy.GONE
}

Use the following code to shut down the badge components correctly:

YPayInventory.clear()
    // deinitializes badge components:
    .badges()

Step 4. Set the badge parameters

1. Use the setSum() method to set the badge sum.

   badgeView.setSum(BigDecimal(10000))
   

2. There are two ways to set the BadgeRenderData visual parameters:

   Using the setRenderData() method

   Using XML attributes

   badgeView.setRenderData(
       // Badge type: With cashback or with Split
       BadgeRenderData.SplitBadgeRenderData(
           // Badge theme
           theme = BadgeTheme.LIGHT,
           // Badge color
           color = SplitBadgeColor.PRIMARY,
           // Badge alignment relative to the container
           align = BadgeAlign.LEFT,
           // Badge version, only for the "With Split" type
           variant = SplitBadgeVariant.SIMPLE
       )
   )
   

   <com.yandex.pay.widgets.badge.api.view.YPayBadgeView
   android:id="@+id/badgeView"
   android:layout_width="wrap_content"
   android:layout_height="24dp"
   app:ypay_badge_type="split"
   app:ypay_badge_align="left"
   app:ypay_badge_split_color="green"
   app:ypay_badge_split_variant="simple"
   app:ypay_badge_theme="light" />
   

You can use different types of the BadgeRenderData badge for cashback and Split:

BadgeRenderData type	Description	Layout
CashbackBadgeRenderData	Configures the badge to show cashback
SplitBadgeRenderData	Configures the badge to show Split

Sample badge layouts depending on how the visual parameters are set

Parameter	Value	Layout
Badge theme
theme	BadgeTheme.LIGHT
theme	BadgeTheme.DARK
theme	BadgeTheme.SYSTEM
Badge color (for CashbackBadgeRenderData)
color	CashbackBadgeColor.PRIMARY
color	CashbackBadgeColor.GREY
color	CashbackBadgeColor.TRANSPARENT
Badge color (for SplitBadgeRenderData)
color	SplitBadgeColor.PRIMARY
color	SplitBadgeColor.GREEN
color	SplitBadgeColor.GREY
color	SplitBadgeColor.TRANSPARENT
Badge alignment relative to the container
align	BadgeAlign.LEFT
align	BadgeAlign.RIGHT
align	BadgeAlign.CENTER
Badge display variant (for CashbackBadgeRenderData)
variant	CashbackBadgeVariant.SIMPLE
variant	CashbackBadgeVariant.DETAILED
Badge display variant (for SplitBadgeRenderData)
variant	SplitBadgeVariant.SIMPLE
variant	SplitBadgeVariant.DETAILED

Step 5. Test the app

Run the app and check if the badges are displayed correctly. If the badge container is too big, reduce its size.