Facebook Shop Checkout Integration
Introduction
Facebook (Meta) has introduced new requirements for integrating Facebook Shops with external e-commerce platforms like UltraCart. This guide provides detailed instructions on how to configure your checkout URL so that Facebook can successfully pass cart details to UltraCart for order finalization.
Prerequisites
Prerequisite: Ensure you have an active UltraCart StoreFront and Facebook Shop configured before proceeding.
-
UltraCart StoreFront Host Name
-
UltraCart Merchant ID
-
Administrative access to your Facebook Commerce Manager
-
Ability to configure URL endpoints on your web server or StoreFront
Overview
When a customer initiates checkout within Facebook Shop, Meta redirects the customer to your designated checkout URL, passing cart information as URL parameters. Your endpoint must be capable of parsing these parameters and handing them off to UltraCart for final checkout.
Checkout URL Format
Your checkout URL must accept cart information encoded as URL parameters. The structure includes:
Sample URL
https://www.example.com/checkout?products=12345%3A3%2C23456%3A1&coupon=SUMMERSALE20
-
products — Required.
A comma-separated list of products. Each product consists of an ID and quantity, separated by a colon. Both commas and colons are URL-encoded. -
coupon — Optional.
A coupon code to apply at checkout.
Example Breakdown
-
products=12345%3A3%2C23456%3A1
-
Product ID 12345 with quantity 3
-
Product ID 23456 with quantity 1
-
-
coupon=SUMMERSALE20
- Applies the coupon code SUMMERSALE20 at checkout
Note: Product IDs containing commas (,) or colons (:) are not supported due to parsing limitations.
Parsing Requirements
Your server or storefront must parse these parameters appropriately. Use standard URL decoding functions (e.g., decodeURIComponent in JavaScript) to handle the URL-encoded values as defined by RFC 3986.
Configuring the UltraCart Checkout URL
UltraCart provides a dedicated parameter for Facebook Shop integration: fb_commerce=true.
This flag signals UltraCart to process the incoming cart data correctly.
UltraCart Checkout URL Format
https://www.yourdomainname.com/cgi-bin/UCEditor?merchantId=YOUR_MERCHANT_ID&fb_commerce=true
-
Replace yourdomainname.com with your StoreFront host name.
-
Replace YOUR_MERCHANT_ID with your actual UltraCart Merchant ID.
Full Example
https://www.storefrontdomain.com/cgi-bin/UCEditor?merchantId=DEMO&fb_commerce=true&products=12345%3A3%2C23456%3A1&coupon=SUMMERSALE20
Tip: You may choose to set up a redirect from a cleaner URL (e.g., /checkout) that internally maps to the full UltraCart checkout URL above.
Conclusion
Once properly configured, your Facebook Shop will seamlessly hand off cart details to your UltraCart checkout, allowing customers to complete their purchase on your storefront.
Next Steps
-
Review your Facebook Commerce Manager configuration to ensure correct checkout URL setup.
-
Test the integration by placing a test order via Facebook Shop.
-
Refer to UltraCart's StoreFront Developer Documentation for additional customization options.