Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

# Wix eCommerce: Checkout Page

Following are the slots and APIs that are available when [building a plugin](portalId::63e3acd8-2a9c-421d-8f92-d02930eeb59eresourceId::bc7062c3-393e-419d-af30-ebda18907d1f*fallback::https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/supported-extensions/site-extensions/site-plugin-extension/add-a-site-plugin-extension-using-wix-blocks) for the Checkout Page.

## Plugin slots

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

![checkout-slots](https://wixmp-833713b177cebf373f611808.wixmp.com/images/wix-ecommerce-checkout-page-md_build-apps-portal_develop-your-app_extensions_site-extensions_site-plugins_supported-wix-app-pages_assets_checkout-slots-desktop.png)

## 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: <ul><li>`'contact-details'`</li> <li>`'delivery-method'`</li><li> `'payment-and-billing'`</li><li> `'place-order'`</li> |

#### 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

```javascript
// 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);
    ...
});
// Export function to get the refresh checkout callback
export function onRefreshCheckout(callback){
  refreshCheckoutCallback = callback;
}
```

### Related Wix Backend APIs

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 Wix APIs may be useful:

* eCommerce APIs ([Velo](fallback::https://dev.wix.com/docs/velo/api-reference/wix-ecom-backend/introduction), [REST](fallback::https://dev.wix.com/docs/rest/business-solutions/e-commerce/introduction), [JavaScript SDK](fallback::https://dev.wix.com/docs/sdk/backend-modules/ecom/introduction))
* Stores APIs ([Velo](fallback::https://dev.wix.com/docs/velo/api-reference/wix-stores-v2/products/introduction), [REST](fallback::https://dev.wix.com/docs/rest/business-solutions/stores/about-wix-stores), [JavaScript SDK](portalId::b85dea5b-341b-493b-b99e-4d4ca12baaa2resourceId::c25ced1f-7f72-4f8c-9698-f8ea09396cd0slug::introduction*fallback::https://dev.wix.com/docs/sdk/backend-modules/stores/products/introduction))