1. Sharing discount code

Under the hood, UFE can generate a random discount code based on the products to be purchased and share the discount code with other third-party checkout platforms.

How to get UFE discount codes

Configure the below settings on the global settings.

The UFE discount codes can be gotten by using a custom javascript event listener. The response is in encrypted format, decrypt the response using the private key from the global settings


/** 
 * Custom javascript listener for getting line item discounts and
 * The UFE generated discount code.
 */
document.addEventListener('UFE_CHECKOUT_FINALIZED', (event) => {
	const { detail: UFEcheckoutInfo } = event || {};
	/**
	 * checkoutData contains the line item and discount details.
	 * acknowledge is a function reference to acknowledge the UFE that the
	 * checkout is gonna be initiated.
	 */
	const { checkout, acknowledge } = UFEcheckoutInfo || {};
	/**
	 * Decrypt the data returned by the UFE checkout API
	 */
	let decryptedResponse = CryptoJS.AES.decrypt(checkout, PRIVATE_KEY);
	/**
	 * Convert to JSON format
	 */
  decryptedResponse = JSON.parse(decryptedResponse.toString(CryptoJS.enc.Utf8));
	/**
	 * Destructure the response
	 */
  const { discountCode, line_items, currency, notes } = decryptedResponse || {};
	 /**
	  * Acknowledge the UFE that the checkout is gonna be initialized
	  */
	if (acknowledge && typeof acknowledge === 'function') acknowledge();
  /**
	 * Logic here to handle the third-party checkout using ufe checkout data.
   */


});

Checkout data is in an encrypted format, You can decrypt using a private key. The private key can be generated using UFE. The checkoutData looks like below


{
  "discountCode": "UFE-L8U1M1XK",
  "line_items": [
    {
      "variant_id": "34140310765700",
      "quantity": "1",
      "properties": [],
      "applied_discount": {
        "value": "6.00",
        "value_type": "fixed_amount",
        "title": "Discounted Offer 10%  Off",
        "description": "UFE Offer",
        "amount": "6.00"
      }
    },
    {
      "variant_id": "32809304817796",
      "quantity": "1",
      "properties": [],
      "applied_discount": {
        "value": "6.50",
        "value_type": "fixed_amount",
        "title": "Bundle Offer 10%  Off",
        "description": "UFE Offer",
        "amount": "6.50"
      }
    },
    {
      "variant_id": "32809304653956",
      "quantity": "1",
      "properties": [],
      "applied_discount": {
        "value": "3.00",
        "value_type": "fixed_amount",
        "title": "Bundle Offer 10%  Off",
        "description": "UFE Offer",
        "amount": "3.00"
      }
    },
    {
      "variant_id": "32809300721796",
      "quantity": "1",
      "properties": [],
      "applied_discount": {
        "value": "8.00",
        "value_type": "fixed_amount",
        "title": "Discounted Offer 10%  Off",
        "description": "UFE Offer",
        "amount": "8.00"
      }
    },
    {
      "variant_id": "33721051644036",
      "quantity": "1"
    }
  ],
  "notes": "NORMAL: 10% BUNDLE: 10% BUNDLE: 10% NORMAL: 10% ",
  "tags": "ufe_order",
  "currency": "HKD"
}

Block the checkout page redirection initiated by UFE

Sometimes UFE directly redirects the customer to the checkout page. Check the following scenarios

Popup rejects action is selected as Go to checkout.

Upsells or cross-sell with the Skip cart option enabled.

An API error occurred while creating a discount code or validating the line item from the server side.

Use the following event listener to handle the checkout page redirection when the UFE is intended to redirect the customer to the checkout page


/** 
 * Custom javascript listener for handling the checkout page redirection 
 */
document.addEventListener('UFE_GO_TO_CHECKOUT_INITIATED', (event) => {
	const { detail } = event || {};
	/*
	 * acknowledge is a function reference to acknowledge the UFE that the
	 * checkout page redirection is gonna be initiated.
	 */
	const { acknowledge } = detail || {};
	 /**
	  * Acknowledge the UFE that the checkout is gonna be initialized
	  */
	if (acknowledge && typeof acknowledge === 'function') acknowledge();
  /**
	 * Logic here to handle the page redirection.
   */


});

Limitations

The discount showing for each line item on the checkout page is different than on the cart page.

This is because Shopify uses its own algorithms to serve discounted amounts on each line item.

Discount on the Cart page

Discount on the Checkout page