Sleek’s SDK automatically inputs coupon codes into checkout and cart pages. To setup this experience for your users, you’ll need to provide Sleek with the coupons that you want to enter into the page. This documentation will guide you through the integration process.
This document assumes that you have already integrated the Sleek SDK into your extension. If you haven’t, please refer to the SDK integration guide.

​
Register coupon provider

After Sleek is installed and setup in your extension, you are ready to enable CAA. CAA requires a simple registration of a coupon provider to provide coupons to the SDK. This coupons are then automatically applied on coupon relevant pages. To register a coupon provider, you need to call the registerCouponProvider method. 
import { getSdkInstance, EventType, SdkCoupon } from '@sleek/web-ext-coupon-sdk';

const couponProvider = async (urlString: string): Promise<SdkCoupon> => {
// Fetch coupons from your backend or any other source.
const response = await fetch('https://your-backend.com/coupons');
const coupons = await response.json();
return coupons;
};

const sdk = getSdkInstance();
sdk.registerCouponProvider(couponProvider);
Once registered, the SDK will call the couponProvider function above whenever the SDK needs coupons for the given url.

​
Register for the coupon auto-apply events

Sleek’s SDK automatically handles restarting CAA after page reloads, finding the best coupon for the cart, and more. The result and status of CAA is emitted using the SDK’s event listener. Subscribe to events that you care about to create UX for your users that shows the status of coupons and the savings that users earn. For example, you might want to show UI when coupons start to get entered on a tab and when the CAA process finishes. To do so, you can follow a pattern like: 
import { getSdkInstance, EventType } from "@sleek/web-ext-coupon-sdk";

getSdkInstance().registerEventListener((event, tabId) => {
  // `event` is typed, so the data of the event `event.data` is also typed
  // based on the type of the event.
  switch (event.type) {
    case EventType.COUPON_SESSION_STARTED:
      browser.tabs.sendMessage(tabId, {
        message: "CAA_STARTED",
      });
      break;
    case EventType.COUPON_SESSION_COMPLETED:
      browser.tabs.sendMessage(tabId, {
        message: "CAA_COMPLETE",
      });
      break;
  }
});

​
Register for user generated code (UGC) events

Once CAA has been enabled and run on a tab, the user may enter a coupon code into the page. This coupon code is called a user generated code (UGC). UGC events are emitted by the SDK when UGC is detected on a tab. To register for UGC events, you can follow a pattern like: 
import { getSdkInstance, EventType } from "@sleek/web-ext-coupon-sdk";

getSdkInstance().registerEventListener((event, tabId) => {
  // `event` is typed, so the data of the event `event.data` is also typed
  // based on the type of the event.
  switch (event.type) {
    case EventType.USER_GENERATED_CODE:
      // Emitted when a user generated code is detected on a tab.
      // Shape of the event is:
      // interface UserGeneratedCodeEvent {
      //   type: EventType.USER_GENERATED_CODE;
      //   data: {
      //     code: string;
      //   };
      // }
      console.log(event.data.code); // Do something with the UGC.
      break;
  }
});

What’s next: Now that you have enabled coupon auto-apply in your extension, you can check out the TypeDoc for specific event types and methods on the SDK.

View TypeDoc

Browse the reference TypeDoc for the SDK.