Gift Subscriptions Setup via Components

Overview

Gift subscriptions feature allows you to configure gift offers and let your customers buy them for their friends and family.

Gift subscriptions feature involves a gifter, a recipient, and a gift.

Gifter - a customer who buys a gift (a current subscriber or non-subscriber).

Recipient - a person who receives a gift: a current subscriber or a person that doesnā€™t have a subscription yet.

Gift - a subscription offer: monthly, 3-month, 6-month, or annual (excluding weekly and seasonal subscriptions) that is purchased by a gifter for a recipient.

Gifting process entails:

You can use gift subscriptions feature with MediaStore SDK Components (minimium version 5.4.0).

The sections below show an example of the customer experience with gift subscriptions.

Implementation

Prerequisites:

  1. Enable selling an offer as a gift using the Cleeng dashboard during the offer creation/edition process.
  2. Set a checkout URL in the Cleeng dashboard - this is where a recipient will be redirected to redeem their gift (if you are using the Checkout component - add link to checkout page; if you are using a separate RedeemGift component - make sure to add a URL redirecting there). The URL will be sent to a recipient on a delivery date.

For more information, see Enabling selling an offer as a gift

MediaStore SDK Components:

You can use gift subscriptions feature with MediaStore SDK Components minimum version 5.4.0.

Note:

If you are using the Checkout component already, you don't need to import the RedeemGift component.

If you use only Purchase component, you need to import the RedeemGift component too, and ensure that it is displayed to logged in users only. The Purchase component alone will allow you to purchase gifts, but the RedeemGift component is necessary to redeem gifts.

The sections below show an example of the customer experience with gifting.

Purchase Gift Offer

If a given offer is purchasable as a gift (the appropriate settings must be first made in the dashboard), the checkout mode looks slightly different.

Two additional options are available:

  • Purchase for myself
  • Purchase as a gift

The following purchase scenarios are available:

  • Offer is purchasable as a gift and the customer is already subscribed to it.
    In this scenario, the Purchase component will be rendered with the ā€œPurchase for myselfā€ option inactive. Only the ā€œPurchase as a giftā€ option is active.
  • Offer is purchasable as a gift and the customer is not yet subscribed to it.
    In this scenario, the Purchase component is rendered with both options active and the customer can choose the preferred one:
    • When the ā€œPurchase for myselfā€ option is selected, a standard purchase flow will be triggered and the customer will be able to subscribe to the offer.
    • When the ā€œPurchase as a giftā€ option is selected, an additional section will be displayed that will allow the customer (gifter) to provide the delivery details: a recipientā€™s email, a personalized message for the recipient, a delivery date and time.

Additionally:

  • In the scenario when offer is purchasable as a gift - if you want to open Purchase or Checkout Component in ā€œPurchase as a giftā€ mode directly (for example you want ā€œBuy as giftā€ link to redirect users to checkout with ā€œPurchase as a Giftā€ active), use the query parameter purchaseAsGift=true.
  • If you want to open the Checkout component in the ā€œRedeemā€ mode directly, use the query parameter giftCode=ABCD-1234.
Purchase for myself

Purchase for myself

Purchase as a gift

Purchase as a gift

A purchased gift can be updated (for example a delivery date, or a personalized message). The edit function is available in the TransactionList component.

Edit Purchased Gift

Purchased gifts can be updated not later than on the last day before the day of delivery (e.g. if today is 22nd August 2023 and the original delivery date for the gift you purchased is 23rd August 2023, the last day you can edit is 22nd August 2023).

This is possible in the Payment History section (TransactionList component) where you select the gift purchase transaction.

"Edit gift delivery details" option in Payment History

"Edit gift delivery details" option in Payment History

Selecting the ā€œEdit gift delivery detailsā€ option will display a form with delivery details (a recipientā€™s email, a personalized message, and a delivery date and time).

If delivery details are still editable, a customer can update them in the provided form.

If delivery details cannot be edited any more, the current details are presented in the form, available for preview.

ā€œEdit Gift Delivery Detailsā€ - editing possible

ā€œEdit Gift Delivery Detailsā€ - editing possible

ā€œEdit Gift Delivery Detailsā€ - editing no longer possible

ā€œEdit Gift Delivery Detailsā€ - editing no longer possible

Redeem Gift

A dedicated RedeemGift component is avilable for this purpose.

Here is the overview of the gift redeeming process:

  1. On the delivery date the recipient of the gift receives an email with the gift code.
  2. The recipient needs to log in to the client application or create a new account.
  3. In the ā€œRedeem your giftā€ screen, the recipient verifies the gift code.
Verify your gift code

Verify your gift code

  1. Once the gift code is verified, the component will display what will happen when the gift is redeemed or information why it cannot be redeemed, for example:
  • The existing subscription will be extended by one billing period
  • A new subscription will be created for free
  • A code is invalid
  • A code has already been used
  1. The recipient needs to confirm in order to redeem the gift.
Redeem your gift

Redeem your gift

šŸ“˜

Good to know

The ā€œThank youā€ note after redeeming a gift provides information for recipients that to retain access after a gift expires, they will need to provide a payment method.

If a recipient has a payment method added to their account, they will be charged on a recurring basis after their gift expires.

Test your integration

Test purchasing a gift

Broadcaster's side:

  1. Create a giftable offer in the dashboard.
  2. Define a checkout URL in the dashboard. It will be sent to a recipient on a delivery date. This will be the URL to which a recipient will be redirected to redeem their gift.

Customer's (gifter's) side:

  1. Display checkout for the created offer.
  2. Check if ā€œPurchase as a giftā€ option is available.
  3. Complete the required information with test data and purchase the offer as gift.
  4. Go to the customerā€™s (gifterā€™s) ā€œTransactions listā€ and check if the transaction is in the list and if there is ā€œEdit gift delivery detailsā€ button next to it.
  5. Edit the delivery details.
  6. To get a gift code: fetch a transaction and targetId of the gift, make sure that returned targetType is gift (use Fetch customer transactions), then use Get a gift endpoint with the obtained targetId (the ID of the gift).

Test redeeming a gift

Customer's (recipient's) side:

  1. Follow the link in the email. If the redeem screen is not rendered, but checkout screen is displayed - use the "Redeem here" button.
  2. Redeem the gift.
  3. The gift subscription will appear on the account of the user who has redeemed the gift code for it (recipient).
  4. The recipient will have an active subscription on their account, but they won't have any transaction record.