Guidelines for Checkout Page Plugins
Important: Plugins for the Checkout page currently have limited availability, so please get in touch if you want to try this feature out.
Note: This article provides special guidelines for building plugins for the Checkout page. Please review the general instruction for building plugins before proceeding.
Wix eCommerce's Checkout page is the final step in the customer's purchase process. It serves different business solutions: online stores, online bookings sites and businesses that sells both of them (services and products).
As an application developing a business solution for Wix eCommerce' checkout, you can use all Wix eCommerce Platform checkout tools to find your market fit, solve users needs. For example, you can offer cross-sell, add package protection, or show a disclaimer.
Checkout APIs and service plugins provide a simple way to create your app's logic in the Checkout page. When a checkout plugin is added inside the Checkout page, customer interactions trigger APIs and service plugin calls. For apps that need an interface for defining app settings (for example, letting the User set the items and discounts for a cross-sell offer), you also need to add a Dashboard extension with the relevant UI and logic.
As a developer, you can target your checkout widget for a specific slot or multiple slots - eventually the business owner chooses where to inject you plugin widget according to the use case.
Learn more about the slots available on the Checkout page.
Dev Center setup
In addition to the standard app setup in the Dev Center for all plugins, following are additional guidelines for checkout plugins.
Permissions
The following permissions are relevant for most checkout apps:
-
Wix Developers > Manage Your App - this is added automatically
-
Stores > Read Stores - all read permissions
Webhooks
The following webhooks are relevant to most checkout apps:
Design guidelines
The Checkout page is the place where buyers take the final step in the purchase process. They provide details about themself, a shipping address, payment details and additional relevant information to complete the purchase. It is a very sensitive step and we strive to help our users keep their page performance high by providing a clean and safe checkout experience for any Wix eCommerce site.
Currently the checkout page design is closed and can't be changed by users or third parties such as apps or partners. All Wix eCommerce websites have the same checkout page experience and design. Wix keeps them up to date according to best practices to make sure our users can offer the best experience to their customers.
The following resources provide information about the styles and components that your plugin should use to seamlessly fit into Wix's checkout system:
-
Design specs and guidelines for the Wix Checkout page, especially the guidelines for building plugins.
Available eCommerce Platform and Catalog APIs
The eCommerce Checkout APIs provide functionality for creating, retrieving, and managing a checkout flow. A checkout holds information about items to be purchased, price and tax summaries, shipping and billing info, any applied discounts, and more.
In your Blocks widget, you can use the eCommerce Checkout Velo APIs.
Learn more about related Wix Backend APIs
CHECKOUT API
To enable plugins to communicate with the Checkout page, each slot supports an API that provides data about the checkout context (for example the current checkoutId). Use it when you code your plugin's logic in Wix Blocks.
Refresh Checkout (optional)
Users may apply changes between the checkout steps such as editing the contact details or changing the delivery method. At this stage we do not notify the plugin.
In the future, we plan to add a solution to listen for changes, but for now, you may want to reload the checkout to make sure you have the latest version before performing actions based on it. In some cases, listening to changes to steps can update when checkout is updated, but in others, like adding coupons, it can occur at any time.
Example usage in a Blocks app:
1
Get the app instance
To use the getDecodedAppInstance() function, import the wix-application module.
1
Add your plugin to a slot using code in a dashboard page
While most plugins can be added to a host widget directly in the editor, this is not possible for checkout plugins, because the checkout page is not available in the editors.
Tip: You can set up your site plugin extension to automatically add your plugin to a slot when a user installs your app.
To provide users with a way to add your plugin to the checkout page, you can let them do it through your app's dashboard page. Add code to you dashboard page that calls the Wix Dashboard API's addSitePlugin() function. If you are building your dashboard page in Wix Blocks, use the Velo function. Otherwise, use the SDK function.
The following example shows how to use Velo for Blocks to add a site plugin when a user clicks an Add plugin button:
1
Test your checkout plugin
Make sure you've set up an option to install your plugin from the dashboard or set up your site plugin extension to automatically add your plugin to a slot when your app is installed.
To test your checkout plugin:
- Create a Premium development site. Select Wix Stores as the business solution.
- From the Test Your App menu, install your app on the development site.
- If relevant, go to your dashboard page and add the plugin to the checkout page.
- Initiate a checkout flow on the live site.