How to setup mystery reward experience?

This article explains how to integrate and display the Mystery Reward experience in your custom or headless customer portal using Loop Storefront APIs.

Before you start

  1. Setting up the mystery reward experience requires using the Loop Storefront APIs here.
  2. Before implementing the storefront logic, ensure the Mystery Reward feature is configured and active in the Loop Admin portal. To learn how to configure, refer to the help article help article.

Pre-requisites

  • Configure Mystery Reward programs in Loop Admin.
  • Ensure the reward configuration is active.
  • On the storefront, you only fetch reward details and render the reward experience (no reward logic needs to be implemented on the frontend).
  • Keep the subscriptionId ready to fetch rewards.
  • Optionally pass locale to fetch localized reward texts.

Mystery reward storefront API endpoints

  1. Fetch Mystery Reward: This endpoint returns the mystery reward information for a subscription.

Note: If locale is not passed, the API returns content in the store’s default language.

Endpoint payload (what it returns)

The response contains the reward information required to render the mystery reward experience.

Key fields returned:

  • configTexts: Customer-facing texts used to render the reward banner or UI.
  • mysteryRewardType: Type of reward available. Possible values: gift or discount
  • subscriptionOrderNumber: Order number associated with the subscription when the reward is triggered.
  • source: Feature that triggered the reward.
  • rewardId: Unique identifier of the reward. This ID is required to claim the mystery reward.

  1. Claim Mystery Reward: This endpoint allows the subscriber to redeem the mystery reward.
  • Endpoint (POST) https://api.loopsubscriptions.com/storefront/2023-10/subscription/\{subscriptionId}/mysteryReward/claimReward
  • Path Params
    • subscriptionId : The unique identifier for a subscription in Loop.
  • Query Params
    • rewardId: The unique identifier of the mystery reward to be claimed. This value can be retrieved from the Mystery Reward fetch endpoint.
    • viewChannel: Defines where the reward was claimed from.
  • Response Fields: The response returns the status of the request along with basic metadata confirming whether the mystery reward was successfully claimed for the subscription.

  1. Add viewed logs for Mystery Reward: This endpoint allows you to log when a mystery reward is viewed for a subscription. These logs help brands track reward impressions and analyze conversion metrics between reward views and reward claims.
  • Endpoint (POST): https://api.loopsubscriptions.com/storefront/2023-10/subscription/\{subscriptionId}/mysteryReward/claimReward/action
  • Path Parameters
    • subscriptionId: The unique identifier for a subscription in Loop.
  • Query Parameters
    • rewardId: The unique identifier of the mystery reward that the subscription is eligible to claim. This value can be retrieved from the Mystery Reward fetch endpoint.
    • actionType: Defines the type of action performed on the reward.
  • Response Fields: The response returns the status of the request along with basic metadata confirming whether the mystery reward was successfully claimed for the subscription.