Coupons Customer Experience

Building the Couponing Experience: After configuring your coupon system, the next step is to create UI components that let customers view their points and redeem them for coupons.

Using Gameball Widget

Overview: The Gameball Widget is a pre-built interface that automatically handles the display and redemption of coupons. It simplifies the integration process by managing the UI and redemption flow for you.

Steps to Use Gameball Widget:

1. Complete the Configuration Guide:

   • Ensure all necessary configurations for your coupon system are set up in the Gameball dashboard.

2. Initialize the Widget:

   • Integrate the widget into your web application by including the provided widget script.

   • For mobile platforms, use the corresponding SDKs supported by Gameball:

     • Android

     • iOS

     • React Native

3. Expected UI After Initialization:

   • The widget will display available coupons and provide an option to create new coupons based on the customer's points balance.

   Example UI:

   This UI shows coupons like "Free Product" and an option to create a coupon under the points balance.

4. Redeem Coupons:

• Users can select a coupon to apply or redeem through the widget interface.

• The widget will automatically handle the balance deduction and order processing.

5. Monitor Transactions:

• Track coupon redemption and user interactions in real-time on the Gameball dashboard.

• Utilize analytics to optimize strategies and customer engagement.

By following these steps, your Gameball Widget will be effectively integrated, providing a seamless coupon redemption experience for your users.

---

Building Your Own Redemption UI with Gameball

While the Gameball widget offers a quick solution for managing coupon redemptions, some businesses may require more flexibility in design and user experience. If you prefer full control over the look, feel, and flow of the redemption process, building a custom UI is the way to go. This guide will walk you through creating an interface that not only allows your customers to view their points balance, redeem points, and generate coupons, but also maintains your brand identity and aligns with your business goals through personalized design and features.

Key features to build your own UI experience

• Viewing Points Balance

Allowing customers to view their points is crucial for a seamless redemption experience. For example, consider a customer named John, who has accumulated points for his purchases on your e-commerce platform. When John logs into his account and navigates to the points section, he sees that he has 1,330 points.

To display John’s points, you will need to call the GetCustomerBalance API, which returns the following payload:

{
    "pointsBalance": 1330,
    "pointsValue": 200,
    "pendingPoints": 100,
    "pendingPointsValue": 0,
    "totalPositivePoints": 1230,
    "totalPositivePendingPoints": 100,
    "totalNegativePoints": 0,
    "totalNegativePendingPoints": 0,
    "currency": "EGP",
    "pointsName": "Points"
}

---

• Calculating Points Available for Redemption The points available for redemption are calculated by deducting the pendingPoints from the pointsBalance:

pointsAvailable = pointsBalance - pendingPoints

In John's case, the calculation would be:

pointsAvailable = 1330 - 100 = 1230

To display a customer's current points balance on the redemption page, you can use the following HTML snippet:

<p><span id="points-balance">{{pointsAvailable}}</span> Points</p>

The placeholder {{pointsAvailable}} will be replaced with the actual value when the page is rendered. Additionally, you can display the equivalent monetary value of the available points using pointsValue:

<p>Equals to <span id="points-value">{{pointsValue}} {{currency}}</span></p>

---

• Validating Redemption Requests To prevent customers from redeeming points below a specific threshold, you can use the pointsBalance from the GetCustomerBalance API. For instance, if the minimum points required to redeem is 500, your validation logic would look like this:

function getCustomerBalance(customerUniqueId) {
    var customerBalanceResponse = {
        "pointsBalance": 1330,
        "pointsValue": 200,
        "pendingPoints": 100,
        "pendingPointsValue": 0,
        "totalPositivePoints": 1230,
        "totalPositivePendingPoints": 100,
        "totalNegativePoints": 0,
        "totalNegativePendingPoints": 0,
        "currency": "EGP",
        "pointsName": "Points"
    };

    var customerActualPoints = customerBalanceResponse["pointsBalance"];
    var customerPointsToRedeem = 60; // Points the customer wishes to redeem
    var minimumPointsRequiredToRedeem = 500; // Minimum points needed to redeem

    if (customerPointsToRedeem >= customerActualPoints || customerPointsToRedeem < minimumPointsRequiredToRedeem) {
        // Display an error message to the customer that they cannot redeem points.
    }
}

---

• Allowing Customers to Redeem Points for Coupons

Once customers can view their points, the next step is enabling them to redeem these points for discount coupons. For example, if a customer has accumulated 200 points, they should be able to exchange these points for a coupon.

Creating a Redemption Page To allow redemption with a flat-rate discount, follow these steps:

1. Set Up a Redemption Page: Create a page where customers can enter the number of points they wish to redeem.

2. Display Available Points: Use the previous tutorial's instructions to show the available points and their monetary equivalent.

3. Call the CreateCoupon API: When the customer clicks on the 'Redeem Now' button, calculate the monetary value of the points they wish to redeem and pass it in the request body:

{
    "value": 100,
    "customerId": "[e-mail]"
}

1. Displaying the Discount Code After calling the CreateCoupon API, display the generated discount code to the customer. For example:

{
    "code": "FreeShippingOFF"
}

1. Redeeming Points with Different Options

In addition to flat-rate discounts, you can offer various redemption options, such as free shipping or percentage discounts.

Showing Available Coupons to Customers

It's important to provide customers with a clear and organized view of their available coupons. To achieve this, you can call the GetCustomerCoupons API to retrieve all coupons associated with the customer:

[
    {
        "code": "_nqjuejhuy",
        "isUsed": false,
        "value": 11.75,
        "currency": "USD",
        "creationDate": "2022-05-03T11:08:42.298758",
        "couponType": "fixed_rate_settings"
    },
    {
        "code": "1qol7apahr",
        "isUsed": false,
        "value": 10.0,
        "currency": "USD",
        "creationDate": "2022-05-03T11:07:22.718595",
        "couponType": "fixed_rate_settings"
    }
]

Free Shipping Redemption To allow customers to redeem points for free shipping, you will follow similar steps to those outlined for flat-rate redemption but also call the GetRedemptionRules API to fetch available redemption options:

The redemptionRules object contains a list of all available redemption options, which can be displayed on the redemption page UI. When a customer selects a redemption option, the corresponding ruleId must be passed to the CreateCoupon API to create the coupon:

{
    "value": 0,
    "customerId": "[e-mail]",
    "ruleId": 1977
}

There are other redemption options you can create from your dashboard like :

• Flat rate : general_setting

• Free shipping discount : free_shipping_settings

• Percentage discount : percentage_discount_settings

• Free product discount : free_product_settings

• Fixed rate discount : fixed_rate_settings

To know more about each discount type and its business use-cases visit our help center.

---

• Applying Coupons at Checkout

To handle the discount code application and order processing, focus on the following API integration steps:

1. Check Coupon Validity:

   • Before applying the coupon, verify if it has already been used by the customer. You can make a GET request to your coupon API endpoint, checking the isUsed attribute for the coupon code. If it’s already used, notify the user accordingly.

2. Apply Coupon Logic:

   • When the customer enters the coupon code at checkout and clicks the "Apply coupon" button, calculate the discount based on the coupon's value. This involves:

     • Retrieving the current total price from the order.

     • Applying the discount from the coupon to update the totalPrice and totalDiscount.

     
3. Prepare Order API Request:

   • Update the following attributes:

     • totalPrice: Subtract the discount from the original price.

     • totalDiscount: Set this to the coupon's discount value.

   • Once the customer decides to complete the order, create the JSON request body for the Order API with the updated values. Ensure to include:

     • customerId: The unique identifier for the customer.

     • orderId: The unique identifier for the order.

     • orderDate: The timestamp for the order.

     • totalPrice: The updated total price.

     • totalDiscount: The total discount applied.

     • discountCodes: An array including the coupon code used.

     • Any additional attributes (e.g., totalShipping, totalTax, lineItems, extra, etc.).

4. Send Order Request:

   • Send a POST request to the Order API with the prepared JSON body. This should finalize the order and process the payment.

Example JSON Request Body

{
  "customerId": "customer456",
  "orderId": "6253e03b",
  "orderDate": "2023-05-5T16:53:28.190Z",
  "totalPrice": "53.25",
  "totalPaid": "65",
  "totalDiscount": "11.75",
  "totalShipping": "0",
  "totalTax": "0",
  "lineItems": [],
  "discountCodes": [
    "_NQJUEJHUY"
  ],
  "extra": {
    "paymentMethod": "credit card",
    "billingAddress": "Alabama"
  },
  "redeemedAmount": 11.75,
  "holdReference": null,
  "guest": false
}

---