In This Article

Wix eCommerce: Checkout Page

Following are the slots and APIs that are available when building a plugin for the Checkout Page.

Slots

The following image shows slots in the Checkout page, into which users can add plugins.

Use the following placement objects when configuring your plugin in the Dev Center:

`checkout:summary:before`

Copy

1{
2  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
3  "widgetId": "14fd5970-8072-c276-1246-058b79e70c1a",
4  "slotId": "checkout:summary:before"
5}

`checkout:summary:lineItems:after`

Copy

1{
2  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
3  "widgetId": "14fd5970-8072-c276-1246-058b79e70c1a",
4  "slotId": "checkout:summary:lineItems:after"
5}

`checkout:summary:lineItems:after2`

Copy

1{
2  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
3  "widgetId": "14fd5970-8072-c276-1246-058b79e70c1a",
4  "slotId": "checkout:summary:lineItems:after2"
5}

`checkout:summary:totalsBreakdown:before`

Copy

1{
2  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
3  "widgetId": "14fd5970-8072-c276-1246-058b79e70c1a",
4  "slotId": "checkout:summary:totalsBreakdown:before"
5}

`checkout:summary:after`

Copy

1{
2  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
3  "widgetId": "14fd5970-8072-c276-1246-058b79e70c1a",
4  "slotId": "checkout:summary:after"
5}

Plugin API

Use the following API to integrate with the plugin's host.

`CHECKOUT`

The CHECKOUT 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.

Properties

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: `'contact-details'` `'delivery-method'` `'payment-and-billing'` `'place-order'`
`slotId`	String	The ID of the slot in which the plugin is placed.

Functions

Name	Type	Description
`onRefreshCheckout()`	`(refreshCheckoutCallback: () => void) => void`	An event handler that accepts a callback function that is invoked whenever changes are made in the checkout.

Code example

Copy

1// Global variable to use to refresh checkout
2let refreshCheckoutCallback;
3
4$w.onReady(async function () {
5    // Get properties passed by the Checkout page
6    const {checkoutId} = $widget.props;
7    
8    // Property usage
9    const checkout = fetchCheckout(checkoutId);
10    ...
11});
12// Export function to get the refresh checkout callback
13export function onRefreshCheckout(callback){
14  refreshCheckoutCallback = callback;
15}

Checkout plugins usually need to integrate with Wix eCommerce's Checkout APIs, as well as other backend APIs.

In your Blocks widget 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 APIs may be useful:

Was this helpful?

Yes