> Shopify Plus:
> [Checkout UI extensions](/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan.




Testing checkout UI extensions in different scenarios is a [UX guideline](/docs/apps/build/checkout/ux-for-checkout). The purpose is to recreate merchant and customer experiences and ensure that extensions behave as desired.

## Test locally

The [custom field](/docs/apps/build/checkout/fields-banners/add-field) and [product offer](/docs/apps/build/checkout/product-offers/build-a-pre-purchase-offer) tutorials show you how to start generating and previewing extensions. Previewing UI extensions locally is different when using [static and block targets](/docs/api/checkout-ui-extensions/latest/extension-targets-overview).

### Static targets

When you're using a [static target](/docs/api/checkout-ui-extensions/latest/extension-targets-overview#static-extension-targets), the UI extension automatically renders in a chosen location.

### Block targets

When you're using a [block target](/docs/api/checkout-ui-extensions/latest/extension-targets-overview#block-extension-targets), merchants can place the UI extension in any of the supported placements on the page.

To preview a block extension in each supported placement, append `?placement-reference={name}` to the checkout URL that's outputted by Shopify CLI. For example, `?placement-reference=DELIVERY1`.

Use the following placement references to test each supported placement:

#### Placement references

Here are all the placement references for each page.

#### Checkout

Block target: [`purchase.checkout.block.render`](/docs/api/checkout-ui-extensions/latest/targets/block/purchase-checkout-block-render)

Placement references: `WALLETS1`, `INFORMATION1`, `INFORMATION2`, `INFORMATION3`,  `DELIVERY1`,  `DELIVERY2`, `PAYMENT1`, `PAYMENT1`, `PAYMENT3`, `PAYMENT4`

#### Thank you

Block target: [`purchase.thank-you.block.render`](/docs/api/checkout-ui-extensions/latest/targets/block/purchase-thank-you-block-render)

Placement references: `ORDER_SUMMARY1`, `ORDER_SUMMARY2`, `ORDER_SUMMARY3`, `ORDER_SUMMARY4`, `ORDER_STATUS1`, `ORDER_STATUS2`, `ORDER_STATUS3`

#### Order Status

Block target: [`customer-account.order-status.block.render`](/docs/api/checkout-ui-extensions/latest/targets/block/customer-account-order-status-block-render)

Placement references: `ORDER_SUMMARY1`, `ORDER_SUMMARY2`, `ORDER_SUMMARY3`, `ORDER_SUMMARY4`, `ORDER_STATUS1`, `ORDER_STATUS2`, `ORDER_STATUS3`

> Tip:
> To recommend a specific placement to merchants, define the default placement by using the `[[extensions.targeting.default_placement]]` property in the TOML file. Learn how to [configure default placement](/docs/apps/build/app-extensions/configure-app-extensions#checkout-ui-extensions).


## Test with Shop Pay

To use extensions in Shop Pay, you need to activate Shopify Payments on your development store and enable test mode. You can develop extensions locally in Shop Pay and preview published extensions.

> Note:
> To test with [Shop Pay Installments](https://www.shopify.com/shop-pay-installments), you must complete the Shopify Payments setup. Stores with incomplete account information will show Shop Pay Installments as inactive.

### Step 1: Enable Shopify Payments in test mode

For development stores, where you aren't accepting real payments, enable Shopify Payments.

1. From your Shopify admin, go to **Settings** > **Payments**.

1. Initiate the signup process by clicking `Activate Shopify Payments`.

1. Once on the signup page, click back to go to the payment settings page.

1. Follow the steps [to enable test mode](https://help.shopify.com/en/manual/payments/shopify-payments/testing-shopify-payments).

    > Note:
    > To save changes, you require a valid **Customer statement descriptor** and **Phone number**.

[Learn more about setting up Shopify payments](https://help.shopify.com/en/manual/payments/shopify-payments/setting-up-shopify-payments).

### Step 2: Complete test orders in Shop Pay

To complete test orders in Shop Pay, you'll need to create a Shop Pay account with a vaulted test card.

1. Create a guest checkout using a test card for the payment method. Use an email that doesn't have a Shop Pay Account attributed to it.

1. Click **Save my information for a faster checkout** and enter a valid phone number.

You should now have a new Shop Pay account with a vaulted test credit card that you can use to complete checkouts from Shop Pay.

## Test the extension in the checkout editor

> Note:
> To test the extension in the checkout editor, you need to [install your app on a development store](/docs/apps/build/scaffold-app#step-3-install-your-app-on-your-development-store) that has the [Checkout and Customer Accounts Extensibility developer preview](/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview) enabled.

After you've published your extension, you'll test the experience of Plus merchants who have installed your app.

In this step, you'll preview different placements for extensions using the checkout editor. Checkout UI extensions don't display in checkout until the merchant uses the checkout editor to add the app and place it in checkout.

1. From the Shopify admin click **Settings** > **Checkout**. Then click **Customize checkout**.

1. Use the dropdown list at the top of the page to navigate to the checkout step where you want to add your extension.

1. To activate your extension, click **Add app block** on the bottom left of the page, and select your extension from the list.

    If your extension doesn't appear in the list, then you need to enable a preview of your extension:

    1. In your [Partner Dashboard](https://partners.shopify.com/current/apps), go to **Apps**.
    2. Click the name of your app.
    3. Click **Extensions**, and click the name of your extension.
    4. Click **Enable**.

1. Preview different placements for the extension by dragging and dropping the extension between the different targets. Test extension experiences in other checkout contexts like [One-page checkout](#one-page-checkout), [Three-page checkout](#three-page-checkout), and [Shop Pay](#shop-pay).

1. When you've chosen a placement, click **Save**.

### Three-page checkout

Three-page checkout is the default checkout context. To test your extension on three-page checkout, complete the following steps:

1. Open the **Settings** tab.
1. Under **Checkout layout**, click **One-page checkout**.
1. Click **Three-page checkout**.

### One-page checkout

To test your extension on one-page checkout, complete the following steps:

1. Open the **Settings** tab.
1. Under **Checkout layout**, click **Three-page checkout**.
1. Click **One-page checkout**.

### Shop Pay

To test your extension on Shop Pay, complete the following steps:

1. From checkout, click **Add app block**, and select your extension from the list.
1. Enable **Include app in Shop Pay** using the checkout behavior controls.
1. Click the cart icon in the editor header.
1. Click **Preview Shop Pay** from the list of options.

## Troubleshooting with source maps
Sometimes it can be useful to debug your extension on a merchant's shop in production. Your extension's code is bundled and minified and can be difficult to read, but you can use a [sourcemap](https://developer.mozilla.org/en-US/docs/Glossary/Source_map) which will allow you to debug your extension with your source code.

### Find your sourcemap
If you're using Shopify CLI version 3.70.0 or higher, the command to deploy your extension will also produce a source map file for your extension on your local file system within your extension's project directory. Look for a **dist** folder within your extension's project directory.

Passing the [`verbose` flag](/docs/api/shopify-cli/app/app-deploy#flags-propertydetail-verbose) on the `app deploy` command will indicate the source map file's location.

### Link your sourcemap in developer tools
Now that you have your sourcemap, you'll need to link that to the extension code. The following instructions assume you are using the Google Chrome browser.

1. Open Chrome DevTools
2. Click on the *Sources* tab
3. Each extension has its own service worker labelled with a `guid`. You'll need to expand the appropriate service worker and find your javascript bundle. It should be under the path:

```
{guid}
└─ extensions.shopifycdn.com
   └─ partners-extensions-scripts-bucket/ui-extension/handle/{name_of_extension}...
      └─ {filename_hash}.js
```

4. Right-click within the script content window and select [add sourcemap](https://developer.chrome.com/docs/devtools/developer-resources#load) to link your sourcemap.

> Note:
> The most convenient way is to link to your local filesystem where you have your sourcemap, but you may need to enable loading from file paths (i.e. 'file://{path_to_sourcemap}') in Chrome Dev Tools settings. Otherwise, you can serve your sourcemap from a local/remote server.

### Debugging with sourcemaps

Once you've linked your sourcemap, you should see your source code in the developer tools and be able to add breakpoints and step through your code.

> Note:
> Due to a limitation of Chrome DevTools, you may need to re-link your sourcemap if you reload the page.

### Integrate sourcemaps with application monitoring tools

If you're using application monitoring tools like Sentry or BugSnag, you may be able to upload the source map file to de-obfuscate JavaScript stack traces. However, this is dependent on the tool you're using and is not officially supported at this time.

## Next steps

- Learn how to [deploy extensions](/docs/apps/launch/deployment/deploy-app-versions) to release changes to users.