The following slots and APIs are available when building a site plugin for the Checkout Page.
The following image shows slots in the checkout page, into which users can add plugins.
The slots are represented by the following placement
object:
[
{
"appDefinitionId": "<WIX_ECOMMERCE_APP_ID>",
"widgetId": "<CHECKOUT_PAGE_ID>",
"slotId": "<SELECTED_SLOT_ID>"
}
]
Provide the following values for each property:
Key | Value |
---|---|
appDefinitionId | "1380b703-ce81-ff05-f115-39571d94dfcd" |
widgetId | "14fd5970-8072-c276-1246-058b79e70c1a" |
slotId | ID of the slot you want as displayed in the image above. Supported values:
|
For example, for your widget to appear before the totals breakdown in a checkout page use the following object in your configuration:
{
"appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
"widgetId": "14fd5970-8072-c276-1246-058b79e70c1a",
"slotId": "checkout:summary:totalsBreakdown:before"
}
Learn more about how to add your plugin to a slot from the dashboard page.
Use the Checkout plugin API to integrate with the plugin's host.
The API provides data about the current checkout process and lets you define a callback function that is invoked whenever changes are made in the checkout.
Name | Type | Description |
---|---|---|
checkoutId | String | The ID of the current checkout process. |
stepId | String | The ID of the step currently rendered in the checkout page, which can be one of the following:
|
Name | Type | Description |
---|---|---|
onRefreshCheckout() | (refreshCheckoutCallback: () => void) => void | An event handler that accepts a callback function that is invoked by a widget. The widget should call the function whenever the checkout needs to be refreshed. |
import { checkout } from "wix-ecom-backend";
// Global variable to use to refresh checkout
let refreshCheckoutCallback;
$w.onReady(async function () {
// Get properties passed by the Checkout page
const { checkoutId } = $widget.props;
// Property usage
const checkout = fetchCheckout(checkoutId);
// Add selected items to the checkout on button click
$w("#addItems").onClick(async () => {
const itemsToAdd = $w("#itemsToChoose").value;
await checkout.addToCheckout(checkoutId, { lineItems: itemsToAdd });
// Call refreshCheckoutCallback to refresh the checkout
refreshCheckoutCallback();
});
});
// Export function to get the refresh checkout callback
/**
* @function
* @description An event handler that accepts a callback function that is invoked by a widget. The widget should call the function whenever the checkout needs to be refreshed.
* @param {string} callback - Callback to be trigger whenever the checkout needs to be refreshed
* @returns {void}
*/
export function onRefreshCheckout(callback) {
refreshCheckoutCallback = callback;
}
Checkout plugins usually need to integrate with Wix eCommerce's Checkout APIs, as well as other backend APIs.
In your site plugin or in your app's server code, you may want to perform actions or implement logic that is dependent on the state of the current checkout or related data.
The following Wix APIs may be useful: