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

• 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

• Replace yourdomainname.com with your StoreFront host name.

• Replace YOUR_MERCHANT_ID with your actual UltraCart Merchant ID.

Full Example

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.