2. Sharing checkout line-item data

The UFE can share private data with third-party checkout providers. By sharing this information, Developers have the freedom to do what they exactly want.

How to get UFE checkout line item data

Configure the below settings on the global settings. Disable the option Share discount code to prevent the UFE from creating a discount code.

The UFE private checkout data can be gotten by using a custom javascript event listener. Each line item may or may not contains discount information. 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 { line_items, currency, notes } = decryptedResponse || {};
	/**
	 * Acknowledge the UFE that the checkout is gonna be initialized
	 */
	if (acknowledge && typeof acknowledge === 'function') acknowledge();
  /**
	 * Logic here to create a 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


{
  "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"
}

Each line item data contains the discount information to calculate the discounted amount.

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.
   */


});