Wix eCommerce: Checkout Page

The following slots and APIs are available when building a site plugin for the Checkout Page.

Note: Some plugins may not support automatic addition upon installation. If your plugin isn't added automatically, create a dashboard page to manage your site plugin.

Slots

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

checkout-slots

The slots are represented by the following placement object:

Copy

Provide the following values for each property:

KeyValue
appDefinitionId"1380b703-ce81-ff05-f115-39571d94dfcd"
widgetId"14fd5970-8072-c276-1246-058b79e70c1a"
slotIdID of the slot you want as displayed in the image above.
Supported values:
  • "checkout:header"
  • "checkout:top"
  • "checkout:steps:before"
  • "checkout:delivery-step:options:after"
  • "checkout:policies:after-1"
  • "checkout:summary:before"
  • "checkout:summary:lineItems:after"
  • "checkout:summary:lineItems:after2"
  • "checkout:summary:totalsBreakdown:before"
  • "checkout:summary:after"

For example, for your widget to appear before the totals breakdown in a checkout page use the following object in your configuration:

Copy

Checkout plugin API

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's invoked whenever changes are made in the checkout.

Note: The checkout:delivery-step:options:after slot uses a different API.

Properties

NameTypeDescription
checkoutIdStringThe ID of the current checkout process.
stepIdStringThe 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'
checkoutUpdatedDateStringDate and time the checkout was updated.

Functions

NameTypeDescription
onRefreshCheckout()(refreshCheckoutCallback: () => void) => voidAn event handler that accepts a callback function that's invoked by a widget. The widget should call the function whenever the checkout needs to be refreshed.

Code example

Copy

Delivery step options slot API

The checkout:delivery-step:options:after slot uses a different API than the other checkout slots.

Properties

NameTypeDescription
checkoutIdStringThe ID of the current checkout process.
checkoutUpdatedDateStringDate and time the checkout was updated.
selectedDeliveryOptionCarrierIdStringThe ID of the carrier for the selected delivery option.
selectedDeliveryOptionIdStringThe ID of the selected delivery option.
deliveryStepStateStringThe current state of the delivery step. Possible values: 'open' or 'summary'.

Functions

NameTypeDescription
onRefreshCheckout()(callback: () => Promise<void>) => voidAn event handler that accepts a callback function that's invoked by a widget. The widget should call the function whenever the checkout needs to be refreshed.
disableContinueButton()(callback: (isDisabled: boolean) => void) => voidAn event handler that accepts a callback function to control the checkout's continue button. Call the callback with true to disable the button, or false to enable it.

Related Wix backend APIs

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's dependent on the state of the current checkout or related data.

The following Wix APIs may be useful:

Did this help?