# 旧版结账扩展入门指南

> 旧版 Shoplazza 结账扩展（shoplazza checkout 命令）的开发流程存档：创建、调试、推送与发布。

:::caution 旧版文档
本页介绍基于 `shoplazza checkout` 命令的旧版结账扩展开发流程。新版开发流程请参阅 [构建结账扩展](/docs/app/extensions/checkout/add-checkout-extension)。
:::

:::note
本文中 Checkout Extension 开发的入门指南基于 Shoplazza CLI（具体为 **shoplazza checkout 命令**）进行说明。

此外，您也可以使用 Shoplazza CLI（通过 **shoplazza app 命令**）来创建和开发 extension。详情请[参阅此文档](/docs/app/developer-tools/shoplazza-cli/app-command/usage-guide)。
:::

本文按从创建到部署的顺序介绍 Checkout Extension 的基本流程。开始前，请先准备可用于开发的店铺 URL 和 token，并确认本次 extension 的目标是隐藏模块、插入自定义内容，还是读取结账页面上下文信息。这样在创建项目后，可以更快定位需要配置的 `extension.json`、extension point 或 `CheckoutAPI`。

# 第一步：安装最新版 Shoplazza CLI

```shell
npm install -g shoplazza-cli
```

# 第二步：创建项目模板

创建过程中，系统会提示您输入店铺 URL 和 token，可在管理后台的 **应用 -> 管理私有应用 -> 创建应用** 中获取。同时还需输入 extension 名称。一个项目中可包含多个 extension，便于统一管理，各 extension 之间互不影响。

```shell
shoplazza checkout create
# 安装依赖
npm i
```

# 第三步：本地开发

Extension 支持本地开发，允许在线上店铺的结账页面中插入本地 extension 代码，该功能仅在您的浏览器中生效。

首先，启动本地开发服务器：

```shell
shoplazza checkout dev
```

然后，在浏览器控制台中执行以下命令以启用开发者模式：

```javascript
CheckoutAPI.extension.DEV_switchDevMode();
```

此后您将在结账页面中看到更改效果。

# 第四步：预览 Extension

本地开发完成后，可以将 extension 推送至店铺进行预览。

```shell
shoplazza checkout push
```

访问预览 URL 查看变更效果。

# 第五步：部署 Extension

预览测试完成后，可以发布 extension，使所有用户均可看到。

```shell
shoplazza checkout deploy
```

或撤销已发布的 extension：

```shell
shoplazza checkout undeploy
```