How To Setup 99minds Loyalty Page On Your Website

window.LoyaltyPage.render({
  platform: "NONE", // One of SHOPIFY, BIGCOMMERCE, WOOCOMMERCE, WORDPRESS, NONE
  client_id: '<API_KEY_HERE>',
  getCurrentCustomer: () => {}, // Should return a simple object containing current logged in customer data, i.e { id: 'xxxxx', email: '[email protected]', name: 'Jhon Doe' }. `id` is required.
  onCouponApply: () => {}, // Triggered when a customer clicks the Apply button next to a coupon or discount code. This function should apply the discount code to the cart. If this function is not provided, the Apply button will be hidden and a Copy to Clipboard option will be shown instead.
  onStoreCreditApply: () => {}, // Triggered when a customer clicks the Apply button next to a store credit. This function should apply the gift card code (store credits are stored as GC on Bigcommerce) to the cart. If this function is not provided, the Apply button will be hidden and a Copy to Clipboard option will be shown instead.
  onGiftcardApply: () => {}, // Triggered when a customer clicks the Apply button next to a gift card. This function should apply the gift card code to the cart. If this function is not provided, the Apply button will be hidden and a Copy to Clipboard option will be shown instead.
})

window.LoyaltyPage.render({
  platform: "NONE", // One of SHOPIFY, BIGCOMMERCE, WOOCOMMERCE, WORDPRESS, NONE
  client_id: '<API_KEY_HERE>',
  
  // Customer Functions
  getCurrentCustomer: () => {}, // Should return a simple object containing current logged in customer data, i.e { id: 'xxxxx', email: '[email protected]', name: 'Jhon Doe' }. `id` is required.
  
  // Apply Functions
  onCouponApply: (couponCode) => {}, // Triggered when a customer clicks the Apply button next to a coupon or discount code. This function should apply the discount code to the cart. If not provided, Apply button is hidden and Copy to Clipboard is shown.
  onStoreCreditApply: (giftCardCode) => {}, // Triggered when a customer clicks the Apply button next to a store credit. This function should apply the gift card code to the cart. If not provided, Apply button is hidden and Copy to Clipboard is shown.
  onGiftcardApply: (giftCardCode) => {}, // Triggered when a customer clicks the Apply button next to a gift card. This function should apply the gift card code to the cart. If not provided, Apply button is hidden and Copy to Clipboard is shown.
  
  // Callback Functions
  onInit: () => {}, // Callback when the loyalty page is initialized and finished loading.
  
  // Platform-specific Options
  channel_id: 6425, // Should be provided when using multistorefront on Bigcommerce
  myshopify_domain: 'your-store.myshopify.com', // Required for Shopify platform
  useAppProxy: true, // Set to true when using Shopify app proxy
  
  // Other options...
})

<script type="text/javascript">
  (function () {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://assets.99minds.io/live/loyalty-page/bundle.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
    var loyaltyPageLoaded = false;
    s.onload = s.onreadystatechange = function() {
      if ( !loyaltyPageLoaded && (!s.readyState || s.readyState == 'complete') ) {
        loyaltyPageLoaded = true;
        window.LoyaltyPage.render({
          client_id: '<API_KEY_HERE>',
          platform: 'SHOPIFY',
          myshopify_domain: '<MYSHOPIFY_DOMAIN>',
          useAppProxy: true
        })
      }
    };
  })();
</script>

LoyaltyPage.render({
  platform: 'NONE',
  client_id: '<API_KEY_HERE>',
  getCurrentCustomer: () => {
    // Your custom customer object
    return {
      id: 'customer_unique_id',
      email: '[email protected]',
      name: 'Customer Name'
    };
  },
  onCouponApply: (couponCode) => {
    // Your custom logic to apply coupon
    console.log('Applying coupon:', couponCode);
    // Example: Call your cart API to apply the discount
  },
  onStoreCreditApply: (giftCardCode) => {
    // Your custom logic to apply store credit
    console.log('Applying store credit:', giftCardCode);
  },
  onGiftcardApply: (giftCardCode) => {
    // Your custom logic to apply gift card
    console.log('Applying gift card:', giftCardCode);
  }
})

LoyaltyPage.render({
  platform: 'SHOPIFY',
  client_id: '<API_KEY_HERE>',
  myshopify_domain: 'your-store.myshopify.com',
  useAppProxy: true // Set to true if using Shopify app proxy
})

onCouponApply: (couponCode) => {
  // couponCode: String - The discount code to be applied
  console.log('Coupon code to apply:', couponCode);
  
  // Your implementation to apply the coupon to cart
  applyDiscountToCart(couponCode);
}

onStoreCreditApply: (giftCardCode) => {
  // giftCardCode: String - The gift card code representing store credit
  console.log('Store credit code to apply:', giftCardCode);
  
  // Your implementation to apply store credit to cart
  // Note: Store credits are stored as gift cards in BigCommerce
  applyStoreCreditToCart(giftCardCode);

onGiftcardApply: (giftCardCode) => {
  // giftCardCode: String - The gift card code to be applied
  console.log('Gift card code to apply:', giftCardCode);
  
  // Your implementation to apply gift card to cart
  applyGiftCardToCart(giftCardCode);
}

getCurrentCustomer: () => {
  // Must return an object with at least the customer id
  return {
    id: 'customer_unique_id',      // Required
    email: '[email protected]', // Optional but recommended
    name: 'John Doe'               // Optional
  };
}

import React, { useEffect } from 'react';

const LoyaltyPageComponent = ({ apiKey, platform = 'NONE' }) => {
  useEffect(() => {
    // Load the external script
    const script = document.createElement("script");
    script.src = "https://assets.99minds.io/live/loyalty-page/bundle.js";
    script.async = true;
    
    script.onload = () => {
      if (window.LoyaltyPage) {
        window.LoyaltyPage.render({
          platform: platform,
          client_id: apiKey,
          getCurrentCustomer: () => {
            // Return your customer data here
            // This could come from your app's state/context
            return {
              id: 'customer_123',
              email: '[email protected]',
              name: 'John Doe'
            };
          },
          onCouponApply: (couponCode) => {
            console.log('Applying coupon:', couponCode);
            // Your custom logic to apply coupon
          },
          onStoreCreditApply: (giftCardCode) => {
            console.log('Applying store credit:', giftCardCode);
            // Your custom logic to apply store credit
          },
          onGiftcardApply: (giftCardCode) => {
            console.log('Applying gift card:', giftCardCode);
            // Your custom logic to apply gift card
          }
        });
      }
    };
    
    document.body.appendChild(script);
    
    return () => {
      // Cleanup: remove script when component unmounts
      if (script.parentNode) {
        document.body.removeChild(script);
      }
    };
  }, [apiKey, platform]);
  
  return <div id="loyalty-page-container"></div>;
}

export default LoyaltyPageComponent;

import LoyaltyPageComponent from './LoyaltyPageComponent';

function App() {
  return (
    <div className="app">
      <h1>My Loyalty Program</h1>
      <LoyaltyPageComponent 
        apiKey='<API_KEY>'
        platform='NONE'
      />
    </div>
  );
}

export default App;