How JavaScript injection works

Firmly Social Commerce Checkout requires a JavaScript file, supplied by Firmly, to be injected into the in-app webview (IAW) of the social media platform. The script is injected at several points during the shopping experience, as described in Shopping workflow below.

​​ Receiving your JS from Firmly

The Firmly JS is the key component of Firmly Social Commerce Checkout. Once you receive it, inject it into your social commerce process.

To request your file, contact Firmly. A Firmly representative will follow up.

​​ Shopping workflow

1. The customer begins the shopping experience.

   From the social media site, the customer clicks a merchant ad (for example, merchant.example) intending to make a purchase.

2. The merchant website opens.

   The site opens in an in-app webview (IAW) within the social media application. The social media backend fetches metadata for the merchant website and returns the JS injection script with that metadata attached.

3. The customer shops.

   Until the customer clicks Checkout, the entire experience takes place on the merchant site — they select one or more items and add them to the cart. The social media app requests a health check from Firmly services and receives a health status.

   As the customer browses to different pages on the merchant’s domain, the JS must be injected into each new page.

4. The customer navigates to the Cart page.

   The JS enhances the Checkout button so that it initiates the native social media checkout rather than the merchant checkout.

5. The customer clicks Checkout.

   Firmly Social Commerce Checkout launches and the customer leaves the merchant website. The injected JavaScript collects the required information and generates an opaque handle, which is transferred to Firmly backend services to complete the flow. The makeup of the handle varies per merchant and depends on the current product state of Firmly.

6. The social media app runs the checkout process.

   1. The injected JavaScript raises the StartCheckout event with the opaque handle as an argument.
   2. The social media app retrieves the relevant httpOnly cookies from the IAW.
   3. The app calls Session Transfer — cookies plus opaque handle — against Firmly services.
   4. Firmly services respond with the Firmly cart.
   5. The social media site displays the Firmly checkout page with items and shipping info.

7. The customer completes the transaction.

   They select a payment method and complete the purchase on the checkout page.