Predictable Rewards

Predictable Rewards

Predictable Rewards allows Loyalty Publishers to communicate with users along their shopping journey, and reassure them that the products they view are reward-able.

Here's how users see a product page with (right) and without (left) Predictable Rewards:


Before

After (with Predictable Rewards)

How it works

  • Predictable Rewards is an SDK feature, available through Purchase Path Extensions.
  • When you implement a Purchase Path Extension, you will begin to receive callbacks on user events, including when a user navigates to a product.
  • When a user navigates to a mobile webpage in Button's In-App Mobile Web Checkout, you'll get a commission callback events. Those events will indicate whether the user is viewing a product-page, and whether the product is commission-able.
  • Based on the content of the callback you can customize the In-App Mobile Web Checkout. You can control visual elements, such as Title and Subtitle, and build interactive components. For example, you can build a Reward card, to let users know when they are viewing products that are reward-able.

Quick Start Tutorial

Integrating Predictable Rewards to improve your user experience is easy! In this tutorial, we'll walk you through building a Reward card - a convenient way to display content to your users when they view products on merchants' sites, based on whether these products are commission-able or not.

Step 1: Create a Purchase Path Extension

Purchase Path Extensions is the framework that allows you to get User Activity Events and use them to build a completely customized user experience within Button In-App Mobile Web Checkout.

Step 2: Try out the sample app

Learn from a working sample app that implements Purchase Path Extensions to make a Reward Card.

Step 3: Build your Predictable Rewards card!

Once you have a Purchase Path Extension, creating a Reward Card is just a few lines of code. Go ahead and add the following code to your app:

func browser(_ browser: BrowserInterface, didNavigateToProduct page: ProductPage) {
    var ctaTitle = ""
    var cardTitle = ""
    var cardBody = ""
    switch page.commission.commissionType {
    case .commissionable:
        ctaTitle = "Reward Available"
        cardTitle = "Eligible For Reward"
        cardBody = "Purchase this item to earn a reward. Your cash back will be available shortly.."
    case .nonCommissionable:
        // Determine how to proceed with a product that is not commissionable
        break;
    case .unknown:
        // Determine how to proceed with a product with unknown commissionability
        break;
    }

    // The cta will be displayed in the web view's footer and replaces the "Open in App" button.
    let cta = CardCallToAction(icon: UIImage(),
                                  title: ctaTitle,
                                  titleColor: UIColor(red:0.09, green:0.63, blue:0.27, alpha:1.0))

    // The BTNTextCard object is our template for a standard card to display above the checkout experience. It has a title and a body.
    // You must set the active card on the checkout interface object and subsequently show it.
    let card = TextCard(callToAction: cta, title: cardTitle, body: cardBody)

    browser.cardList().add(card)
    browser.showTopCard()
}
- (void)browser:(id <BTNBrowserInterface>)browser didNavigateToProduct:(id<BTNProductPage>)page {
    NSString *ctaTitle;
    NSString *cardTitle;
    NSString *cardBody;
    switch (commission.commissionType) {
        case BTNCommissionTypeCommissionable:
            ctaTitle = @"Reward Available";
            cardTitle = @"Eligible For Reward";
            cardBody = @"Purchase this item to earn a reward. Your cash back will be available shortly.";
            break;
        case BTNCommissionTypeUnknown:
        // Determine how to proceed with a product with unknown commissionability
        case BTNCommissionTypeNonCommissionable:
        //  Determine how to proceed with a product that is not commissionable
    }

    // The cta will be displayed in the web view's footer and replaces the "Open in App" button.
    BTNCardCallToAction *cta = [[BTNCardCallToAction alloc] initWithIcon:[UIImage imageNamed:@"yourCustomImageFileName"]
                                                                   title:ctaTitle
                                                              titleColor:[UIColor orangeColor]];

    // The BTNTextCard object is our template for a standard card to display above the checkout experience. It has a title and a body.
    // You must set the active card on the checkout interface object and subsequently show it.
    BTNTextCard *card = [[BTNTextCard alloc] initWithCallToAction:cta title:cardTitle body:cardBody];
    [browser.cardList add:card];
    [browser showTopCard];
}
override fun onProductNavigate(BrowserInterface browser, ProductPage page) {
    when (page.commission.commissionType) {
        COMMISSIONABLE -> {
            val ctaTitle = "Cash Back Available"
            val cardTitle = "Earn 5% Cash Back"
            val cardBody = "This item qualifies for 5% Cash Back when you shop now through Button."

            val cta = CallToAction(R.drawable.ic_call_to_action, ctaTitle, Color.BLACK)
            val card = TextCard.Builder(cta, cardTitle, cardBody).build()
            browser.cardList?.add(card)
            browser.showTopCard()
        }
        NON_COMMISSIONABLE -> {
            // Determine how to proceed with a product that is not commissionable
        }
        UNKNOWN -> {
            // Determine how to proceed with a product with unknown commissionability
        }
    }
}
@Override
public void onProductNavigate(BrowserInterface browser, ProductPage page) {
    switch (commission.getCommissionType()) {
        case COMMISSIONABLE:
            String ctaTitle = "Cash Back Available";
            String cardTitle = "Earn 5% Cash Back";
            String cardBody = "This item qualifies for 5% Cash Back when you shop now through Button.";

            CallToAction cta = new CallToAction(R.drawable.ic_call_to_action, ctaTitle, Color.BLACK);
            TextCard card = new TextCard.Builder(cta, cardTitle, cardBody).build();
            browser.getCardList().add(card);
            browser.showTopCard();
            break;
        case NON_COMMISSIONABLE:
            // Determine how to proceed with a product that is not commissionable
            break;
        case UNKNOWN:
            // Determine how to proceed with a product with unknown commissionability
            break;
    }
}

Now, when viewing a commission-able product, the newly created Reward card will slide up.

You can also interact with the card. To hide - swipe it down, or tap on the call-to-action showing in the footer. When the card is hidden, bring it back into view by tapping the call-to-action.

What's Next

Now that you know about Instant Rewards, see how to implement:


Configure Webhooks

Receive real-time server-to-server updates when users make purchases that are attributed to you. Simply configure which events you want notifications for and where to send them. Then, Button will send you an HTTP request when any of those events are created.

View Guide

Instant Rewards

Receive instant callbacks when a user checks out from within the In-App Web Checkout view. You can then customize your UI to let the user know that everything worked and they'll get their rewards. If you're set up with Predictable Rewards, you're 90% there!

View Guide