How to Create Meta Checkout URLs for Wix Stores

Meta Shops recently changed how checkout works for Facebook and Instagram Shops. Instead of automatically handling checkout inside Meta, you may now need to provide a custom checkout URL that sends shoppers back to your own site with the selected products and quantities included in the URL.

In this tutorial, we’ll build that bridge in Wix using Velo, the Wix eCommerce APIs, and a custom Meta checkout redirect page. By the end, you’ll have a Wix page that receives product data from Meta, parses the checkout URL, creates a Wix checkout with the correct products, and redirects the shopper directly to Wix Checkout.

https://www.youtube.com/watch?v=otj6iu_fPQA

What We’re Building

When someone shops from your Facebook or Instagram Shop and clicks checkout, Meta sends them to a URL on your Wix site. That URL includes product information in the query string, such as:

/meta-checkout?products=PRODUCT_ID%3A2,PRODUCT_ID%3A1

Your Wix site needs to receive the visitor on a custom checkout page, read the full URL, parse the product IDs and quantities, create a Wix checkout using those products, and redirect the user to the generated Wix Checkout URL.

Prerequisites

Before starting, you should already have a Wix site with Wix Stores installed, products synced to your Meta Commerce Manager catalog, product IDs in Meta that match the Wix product IDs, Velo enabled, and access to the Wix Editor and backend files.

The product ID match is important. In this setup, the Meta catalog uses the Wix product ID as the Meta content_id. That makes it possible to take the product IDs from Meta and use them directly when creating a Wix checkout.

Step 1: Create a Meta Checkout Page in Wix

Create a new blank page in Wix and name it Meta Checkout. Set the page URL slug to meta-checkout. This page does not need visible design or UI. It acts as a redirect handler: the user briefly lands on this page, your code runs, and then they are redirected to the actual Wix Checkout page.

https://www.yoursite.com/meta-checkout

Step 2: Add the Checkout URL in Meta Commerce Manager

In Meta Commerce Manager, go to your shop settings, open the checkout configuration, find the Checkout URL section, choose the option indicating that you have built a checkout URL, and paste your Wix meta-checkout page URL. Meta will then let you preview the checkout flow by selecting products from your catalog and generating a test checkout URL.

Step 3: Understand the Meta Checkout URL Format

Meta sends the selected products through a query parameter named products. The structure looks like this:

products=PRODUCT_ID:QUANTITY,PRODUCT_ID:QUANTITY

Because the data is URL-encoded, the actual URL may look more like this:

products=abc123%3A2%2Cxyz789%3A1

After decoding, that data represents an array of product IDs and quantities.

[
  {
    productId: "abc123",
    quantity: 2
  },
  {
    productId: "xyz789",
    quantity: 1
  }
]

Step 4: Create a Public Utility Function to Parse the URL

In the Wix Editor, create a public JavaScript file at public/utils.js and add this parser function:

Step 5: Create a Backend Web Module for Checkout Creation

Next, create a backend web module.

For example:

backend/checkout.web.js

This file will create the Wix checkout on the backend.

You’ll need to use the Wix eCommerce checkout API and expose a web method that the frontend page can call.

The key part is the lineItems array.

The key part is the lineItems array. Each item needs a quantity and a catalogReference with the Wix Stores app ID and the Wix Stores product ID as the catalogItemId.

{
  quantity: product.quantity,
  catalogReference: {
    appId: WIX_STORES_APP_ID,
    catalogItemId: product.productId
  }
}

Step 6: Add Frontend Logic to the Meta Checkout Page

Now go to the page code for your meta-checkout page. Import the parser, the backend checkout function, and the Wix location API.

This code gets the current page URL, parses the Meta product data, sends the product data to the backend, receives the Wix Checkout URL, and redirects the customer to checkout.

Step 7: Test the Flow from Meta

Go back to Meta Commerce Manager and preview your checkout URL. Select a few products from your catalog, then click Preview Checkout. If everything is working correctly, Meta opens your Wix meta-checkout page, Wix creates a checkout, the shopper is redirected to Wix Checkout, and the selected products appear in the cart with the correct quantities.

Important Note About Product Variants

One major issue came up during testing: products with variants did not work correctly in the basic implementation. The checkout was created, but the line items were empty. The likely reason is that Wix needs more specific variant information when a product has options such as size, color, or style.

This setup works best for Wix Store products without variants.

If your Meta Shop includes products with variants, you may need to extend the implementation to pass variant choices or map Meta variant IDs to Wix variant data.

Troubleshooting Tips

The checkout opens, but the cart is empty

Check whether the product has variants. If it does, the basic product ID alone may not be enough to create a valid checkout line item. Also confirm that the product ID coming from Meta matches the Wix Stores product ID.

The product IDs do not match

In Meta Commerce Manager, check the product’s content_id. Ideally, this should match the Wix product ID. If it does not, you’ll need to create a mapping system that converts Meta product IDs into Wix product IDs before creating the checkout.

The checkout URL does not load

Make sure your Wix site is published. Also make sure your site has a valid payment method configured. During testing, checkout required setting up payments and using a premium site.

The backend function returns a checkout but no URL

After creating the checkout, you still need to call:

checkout.getCheckoutUrl()

Creating the checkout and getting the checkout URL are separate steps.

Final Thoughts

This setup gives you a practical way to connect Meta Shops checkout back to Wix Stores. Instead of sending shoppers to a normal product page or cart page, Meta can send them to a dedicated Wix redirect page. That page reads the selected products, creates a real Wix checkout, and sends the customer straight to payment.

The basic flow works well for simple products without variants. For stores that rely heavily on variants, you’ll likely need an additional mapping layer to make sure Meta’s selected variant data matches the correct Wix product variant. Once that is handled, this approach can create a much smoother checkout experience for customers coming from Facebook Shops or Instagram Shops.